Maak Je Site Sneller!
Upcoming SlideShare
Loading in...5
×
 

Maak Je Site Sneller!

on

  • 2,266 views

Presentation given at Barcamp Ghent 2009 (december 19).

Presentation given at Barcamp Ghent 2009 (december 19).

Statistics

Views

Total Views
2,266
Views on SlideShare
2,257
Embed Views
9

Actions

Likes
3
Downloads
5
Comments
2

1 Embed 9

http://www.slideshare.net 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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”.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Maak Je Site Sneller! Maak Je Site Sneller! Presentation Transcript

    • MAAK JE SITE SNELLER!
    • Wie ben ik? 2
    • Denis Defreyne 3
    • stoneship.org 4
    • denis.defreyne@stoneship.org 5
    • @ddfreyne 6
    • del.icio.us/ddfreyne 7
    • facebook.com/denisdefreyne 8
    • netlog.com/ddfreyne 9
    • flickr.com/photos/denisdefreyne 10
    • github.com/ddfreyne 11
    • bitbucket.org/ddfreyne 12
    • last.fm/user/amonre 13
    • Maar waarom zou ik mijn site sneller maken? 14
    • 15
    • “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
    • Client Side #1 Verklein 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
    • *{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
    • 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 uitgespaard 95,7% nutteloze data (http://github.com/mojombo/semver.org/issues/closed/#issue/7) 35
    • Client Side #2 Combineer afbeeldingen in “CSS Sprites”
    • Voorbeeldjes 37
    • 38
    • 39
    • 40
    • Maar waarom? 41
    • 1 HTTP request vs. 10, 20, … HTTP-requests 42
    • Efficiëntere compressie 43
    • Meer weten? 44
    • spriteme.org alistapart.com/articles/sprites 45
    • Client Side #3 Gooi JavaScript achteraan
    • <!DOCTYPE  HTML> <html  lang="en">    <head>        …        <script  type="text/javascript"  src="…">    </head>    <body>        …    </body> </html> 47
    • <!DOCTYPE  HTML> <html  lang="en">    <head>        …    </head>    <body>        …        <script  type="text/javascript"  src="…">    </body> </html> 48
    • <script async="async"> (HTML5) 49
    • Client Side #4 Pre-load data
    • new  Image().src  =    'http://example.com/images/kitten.jpg'; 51
    • Client Side #5 Verklein afbeeldingen
    • CSS Sprites (zie #1) 53
    • Afbeeldingsformaten 54
    • PNG? GIF? BMP? JPEG 2000? TIFF? JPEG? WTF? 55
    • PNG: ✓ goed voor illustraties 56
    • GIF: ✓ goed voor illustraties maar liever PNG 57
    • JPEG: ✓ goed voor foto’s 58
    • BMP, TIFF: ✗ lossless en slecht of zelfs niet gecomprimeerd! 59
    • De rest: ✗ meestal gewoon slechte of geen ondersteuning 60
    • Crop afbeeldingen 61
    • Crush afbeeldingen 62
    • pngcrush, optipng, … 63
    • developer.yahoo.com/yslow/smushit 64
    • Client Side #6 Minimaliseer 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 #1 Gebruik Last-Modified- en ETag-headers
    • Standaard aan! 76
    • ▸  curl  -­‐I  http://stoneship.org/ … ETag:  "3273576609" Last-­‐Modified:  Fri,  06  Nov  2009  10:41:51  GMT … 77
    • Browser Server 78
    • Browser Server 79
    • Browser Server 80
    • Browser Server 81
    • Browser Server 82
    • Browser Server 83
    • Server Side #2 Gebruik Expires- en Cache-Control-headers
    • ▸  curl  -­‐I  http://example.com/assets/style.css … Expires:  Wed,  16  Jun  2010  14:54:56  GMT Cache-­‐Control:  max-­‐age=15552000 … 85
    • Voorbeeld 86
    • <link  rel="stylesheet"  type="text/css"  href="/assets/style-­‐v1.css"> 87
    • <link  rel="stylesheet"  type="text/css"  href="/assets/style-­‐v1.css"> <link  rel="stylesheet"  type="text/css"  href="/assets/style-­‐v2.css"> 88
    • <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
    • Server Side #3 Comprimeer data
    • Browser Server 91
    • Browser Server 92
    • Tools
    • YSlow (Firefox) 94
    • 95
    • 96
    • Page Speed (Firefox) 97
    • 98
    • 99
    • Web Inspector (Safari) 100
    • 101
    • 102
    • 103
    • Q&A 104
    • 105