Post on 13-Jul-2015
MAAK JE SITESNELLER!
Wie ben ik?
2
3
Denis Defreyne
4
stoneship.org
5
denis.defreyne@stoneship.org
6
@ddfreyne
7
del.icio.us/ddfreyne
8
facebook.com/denisdefreyne
9
netlog.com/ddfreyne
10
flickr.com/photos/denisdefreyne
11
github.com/ddfreyne
12
bitbucket.org/ddfreyne
13
last.fm/user/amonre
Maar waaromzou ik mijn sitesneller maken?
14
15
“It’s sort of fair to say thatif you’re a fast site,
maybe you should geta little bit of a bonus.”
— Matt Cutts, Google16
Client Side #1Verklein JavaScript en CSS
Voorbeeld: CSS
18
Gooi overbodige witruimte,overbodige interpunctie
en overbodige tekens weg
19
body{
background-‐color: #ffccee;}
20
body{background:#fce}
21
body{
background-‐color: #ffccee;}
22
body{
background-‐color: #ffccee;}
23
Gooi overbodige regels weg
24
Combineer regels
25
body{ background-‐color: #ffccee; background-‐image: url(blah.png); background-‐attachment: fixed; background-‐position: top left;}
26
body{ background: #fce url(moo.png) fixed top left;}
27
28
*{margin:0;padding:0}body{text-‐align:center;background:#000}#wrapper{width:960px;margin:10px auto;text-‐align:left}#lang-‐picker{text-‐align:right}#lang-‐picker ul{width:960px;margin:10px auto}#lang-‐picker ul li{display:inline;margin:0 0 0 10px}#lang-‐picker a,#lang-‐picker span{font-‐family:Helvetica,Arial,sans-‐serif;font-‐size:10px;padding:10px 0;letter-‐spacing:1px;text-‐decoration:none;text-‐transform:uppercase}#lang-‐picker span{color:#fff}#lang-‐picker a:link,#lang-‐picker a:visited{color:#666}#lang-‐picker a:hover{color:#999}#lang-‐picker a:active{color:#fff}#header{background:#6a3506 url(/assets/images/header/header-‐v2.jpg) no-‐repeat;position:relative;width:960px;height:126px}#header #link-‐home span{display:none}#header #link-‐home a,#header #link-‐home div.hover{position:absolute;top:0;left:320px;width:313px;height:126px;background:url(/assets/images/header/header-‐v2.jpg) -‐320px 0}#header #link-‐home a:hover,#header #link-‐home div.hover{background-‐position:-‐320px -‐126px}#header #link-‐home a{z-‐index:100}#header #link-‐home div{z-‐index:50}#nav{position:relative;height:69px;background:#43290D}body.mystonline-‐com-‐en #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐en.jpg)}body.mystonline-‐com-‐de #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐de.jpg)}body.mystonline-‐com-‐es #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐es.jpg)}body.mystonline-‐com-‐fi #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐fi.jpg)}body.mystonline-‐com-‐fr #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐fr.jpg)}body.mystonline-‐com-‐it #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐it.jpg)}body.mystonline-‐com-‐nl #nav{background:#43290D url(/assets/images/header/nav-‐v2-‐nl.jpg)}#nav li,#nav li a,#nav li div.hover{display:block;position:absolute;top:0;left:0;width:160px;height:69px}#nav li a{z-‐index:100}#nav li div{z-‐index:50}#nav li a span{display:none}#nav li#nav-‐home{top:0;left:0}#nav li#nav-‐play{top:0;left:160px}#nav li#nav-‐about{top:0;left:320px}#nav li#nav-‐forums{top:0;left:480px}#nav li#nav-‐media{top:0;left:640px}#nav li#nav-‐developers{top:0;left:800px}body.mystonline-‐com-‐en #nav li a,body.mystonline-‐com-‐en #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐en.jpg)}body.mystonline-‐com-‐de #nav li a,body.mystonline-‐com-‐de #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐de.jpg)}body.mystonline-‐com-‐es #nav li a,body.mystonline-‐com-‐es #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐es.jpg)}body.mystonline-‐com-‐fi #nav li a,body.mystonline-‐com-‐fi #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐fi.jpg)}body.mystonline-‐com-‐fr #nav li a,body.mystonline-‐com-‐fr #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐fr.jpg)}body.mystonline-‐com-‐it #nav li a,body.mystonline-‐com-‐it #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐it.jpg)}body.mystonline-‐com-‐nl #nav li a,body.mystonline-‐com-‐nl #nav li div.hover{background:url(/assets/images/header/nav-‐v2-‐nl.jpg)}#nav li#nav-‐home a{background-‐position:0 0}#nav li#nav-‐play a{background-‐position:-‐160px 0}#nav li#nav-‐about a{background-‐position:-‐320px 0}#nav li#nav-‐forums a{background-‐position:-‐480px 0}#nav li#nav-‐media a{background-‐position:-‐640px 0}#nav li#nav-‐developers a{background-‐position:-‐800px 0}#nav li#nav-‐home a:hover,#nav li#nav-‐home div.hover{background-‐position:0 -‐69px}#nav li#nav-‐play a:hover,#nav li#nav-‐play div.hover{background-‐position:-‐160px -‐69px}#nav li#nav-‐about a:hover,#nav li#nav-‐about div.hover{background-‐position:-‐320px -‐69px}#nav li#nav-‐forums a:hover,#nav li#nav-‐forums div.hover{background-‐
Voorbeeld: JavaScript
29
Gooi overbodige witruimte weg
30
window.onLoad = function() { alert("moo");}
31
window.onLoad=function(){alert("moo")}
32
Nuttig?
33
Voorbeeld: semver.org
34
Voorbeeld: semver.org
Verkleinen van CSS:20.499 bytes → 886 bytes
19.613 bytes uitgespaard95,7% nutteloze data
(http://github.com/mojombo/semver.org/issues/closed/#issue/7) 35
Client Side #2Combineer afbeeldingen
in “CSS Sprites”
Voorbeeldjes
37
38
39
40
Maar waarom?
41
1 HTTP requestvs.
10, 20, … HTTP-requests
42
Efficiëntere compressie
43
Meer weten?
44
45
spriteme.orgalistapart.com/articles/sprites
Client Side #3Gooi JavaScript achteraan
47
<!DOCTYPE HTML><html lang="en"> <head> … <script type="text/javascript" src="…"> </head> <body> …
</body></html>
48
<!DOCTYPE HTML><html lang="en"> <head> …
</head> <body> … <script type="text/javascript" src="…"> </body></html>
<script async="async">(HTML5)
49
Client Side #4Pre-load data
new Image().src = 'http://example.com/images/kitten.jpg';
51
Client Side #5Verklein afbeeldingen
53
CSS Sprites (zie #1)
54
Afbeeldingsformaten
55
PNG? GIF? BMP?JPEG 2000? TIFF?
JPEG? WTF?
56
PNG: ✓
goed voor illustraties
57
GIF: ✓
goed voor illustratiesmaar liever PNG
58
JPEG: ✓
goed voor foto’s
59
BMP, TIFF: ✗
lossless en slecht of zelfsniet gecomprimeerd!
60
De rest: ✗
meestal gewoon slechteof geen ondersteuning
61
Crop afbeeldingen
62
Crush afbeeldingen
63
pngcrush, optipng, …
64
developer.yahoo.com/yslow/smushit
Client Side #6Minimaliseer het
aantal HTTP-requests
Browser Server
66
Browser Server
67
Browser Server
68
Browser Server
69
Browser Server
70
Browser Server
71
Browser Server
72
Browser Server
73
74
Server Side #1Gebruik Last-Modified-
en ETag-headers
76
Standaard aan!
77
▸ curl -‐I http://stoneship.org/
…ETag: "3273576609"Last-‐Modified: Fri, 06 Nov 2009 10:41:51 GMT…
Browser Server
78
79
Browser Server
Browser Server
80
Browser Server
81
82
Browser Server
Browser Server
83
Server Side #2Gebruik Expires- en
Cache-Control-headers
85
▸ curl -‐I http://example.com/assets/style.css
…Expires: Wed, 16 Jun 2010 14:54:56 GMTCache-‐Control: max-‐age=15552000…
86
Voorbeeld
87
<link rel="stylesheet" type="text/css" href="/assets/style-‐v1.css">
88
<link rel="stylesheet" type="text/css" href="/assets/style-‐v1.css">
<link rel="stylesheet" type="text/css" href="/assets/style-‐v2.css">
89
<link rel="stylesheet" type="text/css" href="/assets/style-‐v1.css">
<link rel="stylesheet" type="text/css" href="/assets/style-‐v2.css">
<link rel="stylesheet" type="text/css" href="/assets/style-‐v3.css">
Server Side #3Comprimeer data
Browser Server
91
Browser Server
92
Tools
94
YSlow (Firefox)
95
96
97
Page Speed (Firefox)
98
99
100
Web Inspector (Safari)
101
102
103
Q & A
104
105