need for speed realhosting - occhio seminar

need for speedhet belang van een snelle website

donderdag 3 juni 2010

www.slideshare.net/occhionl


http://www.slideshare.net/occhionl


waarom? is een snelle website belangrijk?

hoe?werkt het opvragen van een webpagina?

wat?kun je doen aan optimalisatie?

inhoud


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

waarom een snelle website?


recent onderzoek van forrester (2009):

• 47 % verwacht laden binnen 2 seconden

• 40% klikt weg na 3 seconden

• 75% keert vermoedelijk niet terug

hoge verwachtingen


in cijfers

hoge verwachtingen


hoe werkt een websitebezoek?


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

mogelijkheden


goede hostingis basisvoorwaarde


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)

wat realhosting doet


• 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

managed hosting


geografische locatie van belang voor snelheid

content delivery network


occhioweb development en internet communicatie


wie we zijn


achtergrond

• team van circa 8 professionals, 10 jaar ervaring

• allround - ‘full service’

• gespecialiseerd in usability en techniek

• oebe rombout, technical director, [email protected]


focusgebieden

• semantisch HTML, zoekmachine optimalisatie

• social media integratie

• solide websites

• web ontwikkeling voor mobiel


wat kun je doenaan optimalisatie?


wat doen aan optimalisatie

• server optimalisatie

• code optimalisatie

• front end optimalisatie


front end optimalisatie

• yslow / google page speed

• image sprites

• css compressie

• cookie free domains

• ajax

wat gaan we behandelen?


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



• tools om de snelheid van je pagina te meten

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

yslow: snelheidstest


image sprites


image sprites

15 losse afbeeldingen 1 afbeelding

= 15 requests = 1 request


image sprites

• verlagen http-requests

• bestand wordt iets groter

• maar weegt op tegen de requests


image sprites

• 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

tips


image sprites


compressie


css / js compressie

• verlagen http-requests

• meerdere bestanden samenvoegen (php)

• verkleinen bestandsgrootte

• verwijderen spaties en commentaar (php)

• gzip'en (php)


css / js compressie

• debug modus

• anti-cache wanneer nodig

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

• last-modified-checker

tips


cookie free domains


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


cookie free domains

• 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

tip


http://www.occhio.nl




ajax


reëel vs. ervaren: ajax

• lazyloading met ajax

later inladen paginadelen



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



content na klik

na klik wordt slechts deel pagina wordt opnieuw ingeladen

• zoekresultaten

• inhoud tabjes

• zoekmachine-technisch minder goed



tip

• gebruik loading-icoon voor de flow


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


conclusie


conclusie

Een geoptimaliseerde website...

... verlaagt de belasting op de webserver

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

... verhoogt de gebruiksvriendelijkheid en

... verhoogt de sales


download de presentatiewww.slideshare.net/occhionl

[email protected] www.occhio.nltwitter.com/occhionl

Laat je gegevens bij ons achter voor de css compressie tool












meer info: yslow


meer info: occhio image sprite


need for speed realhosting - occhio seminar

Technology