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
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
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
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
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
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
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