SlideShare a Scribd company logo
1 of 52
Download to read offline
need for speed
                         het belang van een snelle website




donderdag 3 juni 2010
www.slideshare.net/occhionl




donderdag 3 juni 2010
inhoud
                        waarom?
                        is een snelle website belangrijk?

                        hoe?
                        werkt het opvragen van een webpagina?

                        wat?
                        kun je doen aan optimalisatie?



donderdag 3 juni 2010
waarom een
                        snelle website?



donderdag 3 juni 2010
waarom een snelle website?
                •       steeds meer (online) concurrentie, dus

                            noodzaak tot onderscheiden

                •       trage websites leiden tot omzetverlies (directe transacties)

                            maar ook indirecte imagoschade

                •       herhaalbestellingen belangrijk

                            voor winstgevendheid van e-commerce

                •       bezoeker verwacht steeds meer

donderdag 3 juni 2010
hoge verwachtingen

                        recent onderzoek van forrester (2009):

                •       47 % verwacht laden binnen 2 seconden

                •       40% klikt weg na 3 seconden

                •       75% keert vermoedelijk niet terug




donderdag 3 juni 2010
hoge verwachtingen

                        in cijfers




donderdag 3 juni 2010
hoe werkt een
                        websitebezoek?



donderdag 3 juni 2010
mogelijkheden
                        grofweg zijn er de volgende mogelijkheden:

                •       sneller gegevens verwerken

                         •   meer verwerkingskracht

                         •   efficientere broncode

                •       minder gegevens naar de browser sturen

                •       minder transacties met webserver

                •       perceptie bezoeker verbeteren

donderdag 3 juni 2010
goede hosting
                        is basisvoorwaarde



donderdag 3 juni 2010
wat realhosting doet
                        realhosting doet concreet om uw website te versnellen:

                •       ruim voldoende capaciteit in netwerk

                        (6,2 gigabit op dit moment)

                •       niet te veel sites per server

                •       fijnafstemming van web- & database server

                        (optimale caching, simultane verbindingen)



donderdag 3 juni 2010
managed hosting
                •       uw site altijd op eigen, onafhankelijke server

                •       analyse, rapportage en maatwerk advies

                •       compressie van data

                •       optimalisatie van browsercaching

                •       php optimalisatie (eaccelerator, xcache, apc)

                •       content delivery network



donderdag 3 juni 2010
content delivery network

                        geografische locatie van belang voor snelheid




donderdag 3 juni 2010
occhio
                        web development en internet communicatie




donderdag 3 juni 2010
wie we zijn



donderdag 3 juni 2010
achtergrond

                •       team van circa 8 professionals, 10 jaar ervaring

                •       allround - ‘full service’

                •       gespecialiseerd in usability en techniek



                •       oebe rombout, technical director, oebe@occhio.nl



donderdag 3 juni 2010
focusgebieden


                •       semantisch HTML, zoekmachine optimalisatie

                •       social media integratie

                •       solide websites

                •       web ontwikkeling voor mobiel




donderdag 3 juni 2010
donderdag 3 juni 2010
donderdag 3 juni 2010
donderdag 3 juni 2010
wat kun je doen
                        aan optimalisatie?



donderdag 3 juni 2010
wat doen aan optimalisatie

                •       server optimalisatie

                •       code optimalisatie

                •       front end optimalisatie




donderdag 3 juni 2010
front end optimalisatie

                        wat gaan we behandelen?

                •       yslow / google page speed

                •       image sprites

                •       css compressie

                •       cookie free domains

                •       ajax


donderdag 3 juni 2010
yslow / google page speed




donderdag 3 juni 2010
yslow / google page speed
                •       tools om de snelheid van je pagina te meten

                •       add-ons voor de firebug add-on van firefox

                        firebug net: http requests (bestanden) inzien




donderdag 3 juni 2010
yslow / google page speed
                •       tools om de snelheid van je pagina te meten

                •       add-ons voor de firebug add-on van firefox

                        yslow: snelheidstest




donderdag 3 juni 2010
image sprites




donderdag 3 juni 2010
image sprites




             15 losse afbeeldingen            1 afbeelding
                = 15 requests                 = 1 request




donderdag 3 juni 2010
image sprites


                •       verlagen http-requests

                •       bestand wordt iets groter

                •       maar weegt op tegen de requests




donderdag 3 juni 2010
image sprites

                        tips

                •       20 x 20 px grid

                •       bullets in aparte sprite

                •       commentaar in je sprite-afbeelding,

                •       bv ‘default’, ‘hover’, ‘active’ bij buttons.

                •       bewaar het bronbestand (bv de .psd)

                •       anti-cache: sprite.png?v=2
donderdag 3 juni 2010
image sprites




donderdag 3 juni 2010
image sprites




donderdag 3 juni 2010
image sprites




donderdag 3 juni 2010
compressie




donderdag 3 juni 2010
css / js compressie

                •       verlagen http-requests

                         •   meerdere bestanden samenvoegen (php)

                •       verkleinen bestandsgrootte

                         •   verwijderen spaties en commentaar (php)

                         •   gzip'en (php)



donderdag 3 juni 2010
css / js compressie

                        tips

                •       debug modus

                •       anti-cache wanneer nodig

                •       combined.css.php?lm=20100531-161424

                •       last-modified-checker




donderdag 3 juni 2010
cookie free domains




donderdag 3 juni 2010
cookie free domains

                •       bij elke http-request worden de cookies meegezonden

                         •   ook bij afbeeldingen

                         •   bij javascript

                         •   en css

                •       gebruik een apart subdomein bijv. static.occhio.nl



donderdag 3 juni 2010
cookie free domains

                        tip

                •       maak in plesk een domain alias aan

                •       static.occhio.nl = www.occhio.nl

                         •    website:   http://www.occhio.nl

                         •    afb/css/js: http://static.occhio.nl/main.css




donderdag 3 juni 2010
ajax




donderdag 3 juni 2010
reëel vs. ervaren: ajax



                •       lazyloading met ajax

                        later inladen paginadelen




donderdag 3 juni 2010
reëel vs. ervaren: ajax




donderdag 3 juni 2010
reëel vs. ervaren: ajax
                        lazyloading met ajax

                        later inladen paginadelen

                         •   ervaring is sneller omdat belangrijke content er snel
                             staat

                         •   zoekmachine-technisch minder goed

                         •   realtime webservices zijn soms traag, dus altijd
                             lazyloading toepassen


donderdag 3 juni 2010
reëel vs. ervaren: ajax

                        content na klik

                        na klik wordt slechts deel pagina wordt opnieuw ingeladen

                         •   zoekresultaten

                         •   inhoud tabjes

                         •   zoekmachine-technisch minder goed



donderdag 3 juni 2010
reëel vs. ervaren: ajax



                        tip

                •       gebruik loading-icoon voor de flow




donderdag 3 juni 2010
yslow
                •       make fewer http requests
                •       use a content delivery network (cdn)
                •       compress components with gzip
                •       put css at top
                •       put javascript at bottom
                •       avoid css expressions
                •       make javascript and css external
                •       avoid url redirects
                •       remove duplicate javascript and css
                •       configure entity tags (ETags)
                •       make ajax cacheable
                •       reduce cookie size
                •       use cookie-free domains
donderdag 3 juni 2010
conclusie




donderdag 3 juni 2010
conclusie

                        Een geoptimaliseerde website...

                        ... verlaagt de belasting op de webserver

                        ... verlaagt (vaak) de datatraffic op de webserver

                        ... verhoogt de gebruiksvriendelijkheid en

                        ... verhoogt de sales



donderdag 3 juni 2010
download de presentatie
                        www.slideshare.net/occhionl

                        info@occhio.nl
                        www.occhio.nl
                        twitter.com/occhionl

                        Laat je gegevens bij ons achter voor de css compressie tool



donderdag 3 juni 2010
meer info: yslow




donderdag 3 juni 2010
meer info: occhio image sprite




donderdag 3 juni 2010
meer info: occhio image sprite




donderdag 3 juni 2010

More Related Content

Viewers also liked

Viewers also liked (10)

iPhone ios7 imap settings
iPhone ios7 imap settingsiPhone ios7 imap settings
iPhone ios7 imap settings
 
The CACUSS Identity Project
The CACUSS Identity ProjectThe CACUSS Identity Project
The CACUSS Identity Project
 
Alf Lizzio 2015
Alf Lizzio 2015Alf Lizzio 2015
Alf Lizzio 2015
 
York residence learning plan apr192012
York residence learning plan apr192012York residence learning plan apr192012
York residence learning plan apr192012
 
iPhone iOS6 Email Setup Guide
iPhone iOS6 Email Setup GuideiPhone iOS6 Email Setup Guide
iPhone iOS6 Email Setup Guide
 
12 Linked In Starter Tips
12 Linked In Starter Tips12 Linked In Starter Tips
12 Linked In Starter Tips
 
Business Lending
Business LendingBusiness Lending
Business Lending
 
Editing images in the WordPress media manager
Editing images in the WordPress media managerEditing images in the WordPress media manager
Editing images in the WordPress media manager
 
Examples of our website work
Examples of our website workExamples of our website work
Examples of our website work
 
Outlook 2010 imap settings
Outlook 2010 imap settingsOutlook 2010 imap settings
Outlook 2010 imap settings
 

Need for speed realhosting - occhio seminar

  • 1. need for speed het belang van een snelle website donderdag 3 juni 2010
  • 3. inhoud waarom? is een snelle website belangrijk? hoe? werkt het opvragen van een webpagina? wat? kun je doen aan optimalisatie? donderdag 3 juni 2010
  • 4. waarom een snelle website? donderdag 3 juni 2010
  • 5. waarom een snelle website? • steeds meer (online) concurrentie, dus noodzaak tot onderscheiden • trage websites leiden tot omzetverlies (directe transacties) maar ook indirecte imagoschade • herhaalbestellingen belangrijk voor winstgevendheid van e-commerce • bezoeker verwacht steeds meer donderdag 3 juni 2010
  • 6. hoge verwachtingen recent onderzoek van forrester (2009): • 47 % verwacht laden binnen 2 seconden • 40% klikt weg na 3 seconden • 75% keert vermoedelijk niet terug donderdag 3 juni 2010
  • 7. hoge verwachtingen in cijfers donderdag 3 juni 2010
  • 8. hoe werkt een websitebezoek? donderdag 3 juni 2010
  • 9. mogelijkheden grofweg zijn er de volgende mogelijkheden: • sneller gegevens verwerken • meer verwerkingskracht • efficientere broncode • minder gegevens naar de browser sturen • minder transacties met webserver • perceptie bezoeker verbeteren donderdag 3 juni 2010
  • 10. goede hosting is basisvoorwaarde donderdag 3 juni 2010
  • 11. wat realhosting doet realhosting doet concreet om uw website te versnellen: • ruim voldoende capaciteit in netwerk (6,2 gigabit op dit moment) • niet te veel sites per server • fijnafstemming van web- & database server (optimale caching, simultane verbindingen) donderdag 3 juni 2010
  • 12. managed hosting • uw site altijd op eigen, onafhankelijke server • analyse, rapportage en maatwerk advies • compressie van data • optimalisatie van browsercaching • php optimalisatie (eaccelerator, xcache, apc) • content delivery network donderdag 3 juni 2010
  • 13. content delivery network geografische locatie van belang voor snelheid donderdag 3 juni 2010
  • 14. occhio web development en internet communicatie donderdag 3 juni 2010
  • 15. wie we zijn donderdag 3 juni 2010
  • 16. achtergrond • team van circa 8 professionals, 10 jaar ervaring • allround - ‘full service’ • gespecialiseerd in usability en techniek • oebe rombout, technical director, oebe@occhio.nl donderdag 3 juni 2010
  • 17. focusgebieden • semantisch HTML, zoekmachine optimalisatie • social media integratie • solide websites • web ontwikkeling voor mobiel donderdag 3 juni 2010
  • 21. wat kun je doen aan optimalisatie? donderdag 3 juni 2010
  • 22. wat doen aan optimalisatie • server optimalisatie • code optimalisatie • front end optimalisatie donderdag 3 juni 2010
  • 23. front end optimalisatie wat gaan we behandelen? • yslow / google page speed • image sprites • css compressie • cookie free domains • ajax donderdag 3 juni 2010
  • 24. yslow / google page speed donderdag 3 juni 2010
  • 25. yslow / google page speed • tools om de snelheid van je pagina te meten • add-ons voor de firebug add-on van firefox firebug net: http requests (bestanden) inzien donderdag 3 juni 2010
  • 26. yslow / google page speed • tools om de snelheid van je pagina te meten • add-ons voor de firebug add-on van firefox yslow: snelheidstest donderdag 3 juni 2010
  • 28. image sprites 15 losse afbeeldingen 1 afbeelding = 15 requests = 1 request donderdag 3 juni 2010
  • 29. image sprites • verlagen http-requests • bestand wordt iets groter • maar weegt op tegen de requests donderdag 3 juni 2010
  • 30. image sprites tips • 20 x 20 px grid • bullets in aparte sprite • commentaar in je sprite-afbeelding, • bv ‘default’, ‘hover’, ‘active’ bij buttons. • bewaar het bronbestand (bv de .psd) • anti-cache: sprite.png?v=2 donderdag 3 juni 2010
  • 35. css / js compressie • verlagen http-requests • meerdere bestanden samenvoegen (php) • verkleinen bestandsgrootte • verwijderen spaties en commentaar (php) • gzip'en (php) donderdag 3 juni 2010
  • 36. css / js compressie tips • debug modus • anti-cache wanneer nodig • combined.css.php?lm=20100531-161424 • last-modified-checker donderdag 3 juni 2010
  • 38. cookie free domains • bij elke http-request worden de cookies meegezonden • ook bij afbeeldingen • bij javascript • en css • gebruik een apart subdomein bijv. static.occhio.nl donderdag 3 juni 2010
  • 39. cookie free domains tip • maak in plesk een domain alias aan • static.occhio.nl = www.occhio.nl • website: http://www.occhio.nl • afb/css/js: http://static.occhio.nl/main.css donderdag 3 juni 2010
  • 41. reëel vs. ervaren: ajax • lazyloading met ajax later inladen paginadelen donderdag 3 juni 2010
  • 42. reëel vs. ervaren: ajax donderdag 3 juni 2010
  • 43. reëel vs. ervaren: ajax lazyloading met ajax later inladen paginadelen • ervaring is sneller omdat belangrijke content er snel staat • zoekmachine-technisch minder goed • realtime webservices zijn soms traag, dus altijd lazyloading toepassen donderdag 3 juni 2010
  • 44. reëel vs. ervaren: ajax content na klik na klik wordt slechts deel pagina wordt opnieuw ingeladen • zoekresultaten • inhoud tabjes • zoekmachine-technisch minder goed donderdag 3 juni 2010
  • 45. reëel vs. ervaren: ajax tip • gebruik loading-icoon voor de flow donderdag 3 juni 2010
  • 46. yslow • make fewer http requests • use a content delivery network (cdn) • compress components with gzip • put css at top • put javascript at bottom • avoid css expressions • make javascript and css external • avoid url redirects • remove duplicate javascript and css • configure entity tags (ETags) • make ajax cacheable • reduce cookie size • use cookie-free domains donderdag 3 juni 2010
  • 48. conclusie Een geoptimaliseerde website... ... verlaagt de belasting op de webserver ... verlaagt (vaak) de datatraffic op de webserver ... verhoogt de gebruiksvriendelijkheid en ... verhoogt de sales donderdag 3 juni 2010
  • 49. download de presentatie www.slideshare.net/occhionl info@occhio.nl www.occhio.nl twitter.com/occhionl Laat je gegevens bij ons achter voor de css compressie tool donderdag 3 juni 2010
  • 51. meer info: occhio image sprite donderdag 3 juni 2010
  • 52. meer info: occhio image sprite donderdag 3 juni 2010