Maak Je Site Sneller!

MAAK JE SITESNELLER!

Wie ben ik?

2

3

Denis Defreyne

4

stoneship.org

5

[email protected]

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{


22

body{


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



89




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

Maak Je Site Sneller!

Technology