Maak Je Site Sneller!

1,347 views
1,242 views

Published on

Presentation given at Barcamp Ghent 2009 (december 19).

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
  • Bedankt voor de opmerkingen! Omdat ik slechts 15 minuten had, ben ik inderdaad over een paar zaken wat snel gegaan en je opmerkingen zijn in het algemeen dan ook terecht.

    #21 Volledig akkoord. Slides 26 → 27 leggen dit beter uit.

    #27 Had er voor de duidelijkheid inderdaad beter “bottom right” of iets gelijkaardigs gezet. Dit is een voorbeeldje om te demonstreren hoe je regels kan combineren, maar je kan het uiteindelijk resultaat in dit geval inderdaad nog vereenvoudigen.

    #35 Als je op een eenvoudige manier 95% van de CSS kunt weggooien, lijkt mij dat wel degelijk nuttig (op voorwaarde dat dit op een eenvoudige manier kan gebeuren).

    #39 Hier ga ik niet akoord. Wat ik nog zou kunnen doen, is een aparte image of CSS-sprite maken met de blauw hover-achtergrond en de tekst, maar dan heb je alpha transparency nodig, wat altijd wat miserie is in oudere versies van Internet Explorer. (De achtergrondtextuur voor elke knop is verschillend, dus 1 on- en 1 off-variant gebruiken gaat hier niet.)

    #46 In sommige gevallen waar JavaScript vereist is om een site te laten werken, is het inderdaad geen goed idee om de JavaScript op het einde van de pagina te plaatsen.

    #54 Klopt. Op zo’n korte tijd kan je echter niet in detail gaan, dus heb ik het gehouden bij de vrij vage beschrijvingen “goed voor illustraties” en “goed voor foto’s”.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Enkele opmerkingen;


    #21 background-color in background veranderen is een slechte optimalisatie: background shorthand en background-color zijn 2 verschillende dingen. Background shorthand houdt ook alle andere background regels in.


    #27 top left in je shorthand laten staan is niet zinnig omdat dat sowieso de default background position is


    #35 voorbeeld website optimaliseren is nutteloos: je moet een website pas optimaliseren als het nodig is #39 deze sprite is absoluut niet optimaal; kan veel kleiner door de tekstlaag te scheiden van de achtergrond hover/nonhover


    #46 dit is niet altijd waar; sommige Javascript kan gerust achteraan (Google Analytics e.d.), maar als je pagina afhangt van de javascript interacties, zet je deze best in je head-gedeelte


    #54 afbeeldingsformaten; formaat dient te kiezen geworden op basis van een aantal factoren: a) aantal kleuren b) herhalende patronen c) transparantie: 1 bit of volledig? PNG ’goed voor illustraties’ is nogal kort door de bocht.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,347
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
6
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Maak Je Site Sneller!

  1. 1. MAAK JE SITE SNELLER!
  2. 2. Wie ben ik? 2
  3. 3. Denis Defreyne 3
  4. 4. stoneship.org 4
  5. 5. denis.defreyne@stoneship.org 5
  6. 6. @ddfreyne 6
  7. 7. del.icio.us/ddfreyne 7
  8. 8. facebook.com/denisdefreyne 8
  9. 9. netlog.com/ddfreyne 9
  10. 10. flickr.com/photos/denisdefreyne 10
  11. 11. github.com/ddfreyne 11
  12. 12. bitbucket.org/ddfreyne 12
  13. 13. last.fm/user/amonre 13
  14. 14. Maar waarom zou ik mijn site sneller maken? 14
  15. 15. 15
  16. 16. “It’s sort of fair to say that if you’re a fast site, maybe you should get a little bit of a bonus.” — Matt Cutts, Google 16
  17. 17. Client Side #1 Verklein JavaScript en CSS
  18. 18. Voorbeeld: CSS 18
  19. 19. Gooi overbodige witruimte, overbodige interpunctie en overbodige tekens weg 19
  20. 20. body { background-­‐color:  #ffccee; } 20
  21. 21. body{background:#fce} 21
  22. 22. body { background-­‐color:  #ffccee; } 22
  23. 23. body { background-­‐color:  #ffccee; } 23
  24. 24. Gooi overbodige regels weg 24
  25. 25. Combineer regels 25
  26. 26. body {    background-­‐color:  #ffccee;    background-­‐image:  url(blah.png);    background-­‐attachment:  fixed;    background-­‐position:  top  left; } 26
  27. 27. body {    background:  #fce  url(moo.png)  fixed  top  left; } 27
  28. 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-­‐ 28
  29. 29. Voorbeeld: JavaScript 29
  30. 30. Gooi overbodige witruimte weg 30
  31. 31. window.onLoad  =  function()  {        alert("moo"); } 31
  32. 32. window.onLoad=function(){alert("moo")} 32
  33. 33. Nuttig? 33
  34. 34. Voorbeeld: semver.org 34
  35. 35. Voorbeeld: semver.org Verkleinen van CSS: 20.499 bytes → 886 bytes 19.613 bytes uitgespaard 95,7% nutteloze data (http://github.com/mojombo/semver.org/issues/closed/#issue/7) 35
  36. 36. Client Side #2 Combineer afbeeldingen in “CSS Sprites”
  37. 37. Voorbeeldjes 37
  38. 38. 38
  39. 39. 39
  40. 40. 40
  41. 41. Maar waarom? 41
  42. 42. 1 HTTP request vs. 10, 20, … HTTP-requests 42
  43. 43. Efficiëntere compressie 43
  44. 44. Meer weten? 44
  45. 45. spriteme.org alistapart.com/articles/sprites 45
  46. 46. Client Side #3 Gooi JavaScript achteraan
  47. 47. <!DOCTYPE  HTML> <html  lang="en">    <head>        …        <script  type="text/javascript"  src="…">    </head>    <body>        …    </body> </html> 47
  48. 48. <!DOCTYPE  HTML> <html  lang="en">    <head>        …    </head>    <body>        …        <script  type="text/javascript"  src="…">    </body> </html> 48
  49. 49. <script async="async"> (HTML5) 49
  50. 50. Client Side #4 Pre-load data
  51. 51. new  Image().src  =    'http://example.com/images/kitten.jpg'; 51
  52. 52. Client Side #5 Verklein afbeeldingen
  53. 53. CSS Sprites (zie #1) 53
  54. 54. Afbeeldingsformaten 54
  55. 55. PNG? GIF? BMP? JPEG 2000? TIFF? JPEG? WTF? 55
  56. 56. PNG: ✓ goed voor illustraties 56
  57. 57. GIF: ✓ goed voor illustraties maar liever PNG 57
  58. 58. JPEG: ✓ goed voor foto’s 58
  59. 59. BMP, TIFF: ✗ lossless en slecht of zelfs niet gecomprimeerd! 59
  60. 60. De rest: ✗ meestal gewoon slechte of geen ondersteuning 60
  61. 61. Crop afbeeldingen 61
  62. 62. Crush afbeeldingen 62
  63. 63. pngcrush, optipng, … 63
  64. 64. developer.yahoo.com/yslow/smushit 64
  65. 65. Client Side #6 Minimaliseer het aantal HTTP-requests
  66. 66. Browser Server 66
  67. 67. Browser Server 67
  68. 68. Browser Server 68
  69. 69. Browser Server 69
  70. 70. Browser Server 70
  71. 71. Browser Server 71
  72. 72. Browser Server 72
  73. 73. Browser Server 73
  74. 74. 74
  75. 75. Server Side #1 Gebruik Last-Modified- en ETag-headers
  76. 76. Standaard aan! 76
  77. 77. ▸  curl  -­‐I  http://stoneship.org/ … ETag:  "3273576609" Last-­‐Modified:  Fri,  06  Nov  2009  10:41:51  GMT … 77
  78. 78. Browser Server 78
  79. 79. Browser Server 79
  80. 80. Browser Server 80
  81. 81. Browser Server 81
  82. 82. Browser Server 82
  83. 83. Browser Server 83
  84. 84. Server Side #2 Gebruik Expires- en Cache-Control-headers
  85. 85. ▸  curl  -­‐I  http://example.com/assets/style.css … Expires:  Wed,  16  Jun  2010  14:54:56  GMT Cache-­‐Control:  max-­‐age=15552000 … 85
  86. 86. Voorbeeld 86
  87. 87. <link  rel="stylesheet"  type="text/css"  href="/assets/style-­‐v1.css"> 87
  88. 88. <link  rel="stylesheet"  type="text/css"  href="/assets/style-­‐v1.css"> <link  rel="stylesheet"  type="text/css"  href="/assets/style-­‐v2.css"> 88
  89. 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"> 89
  90. 90. Server Side #3 Comprimeer data
  91. 91. Browser Server 91
  92. 92. Browser Server 92
  93. 93. Tools
  94. 94. YSlow (Firefox) 94
  95. 95. 95
  96. 96. 96
  97. 97. Page Speed (Firefox) 97
  98. 98. 98
  99. 99. 99
  100. 100. Web Inspector (Safari) 100
  101. 101. 101
  102. 102. 102
  103. 103. 103
  104. 104. Q&A 104
  105. 105. 105

×