Hoe wij een snelle website maken

Traagheid geeft irritatie en zorgt ervoor dat bezoekers afhaken. Uit onderzoek van Google (onder andere) blijkt dat secondes extra laadtijd leidt tot tientallen procenten meer afhakers.

Wie bezoekers goed wil helpen, zorgt dus voor een snelle website. Dan is Google ook blij. De zoekmachine gebruikt snelheid namelijk  als ranking factor. Als je hoger wilt scoren in de zoekmachine, helpt het als de website goed presteert.

De snelheid op jouw computer is niet altijd gelijk aan wat de bezoeker ervaart. Zij bezoeken je site misschien via een tragere verbinding, zoals 3G of een gedeelde wifi.

Daarnaast bestaat er zoiets als de ‘snelheidsbeleving’. Bij veel sites wordt de tekst alvast getoond en worden sommige afbeeldingen later geladen. Je beleeft zo’n website sneller dan wanneer het scherm wit blijft totdat de volledige website geladen is.

Wat beïnvloedt de snelheid?

Een webpagina bestaat niet uit één bestand. Het is een verzameling van bestanden: een hoofdbestand met daaraan gekoppeld stijlbestanden, afbeeldingen en scripts (stukjes programma). Als je dit blogartikel opent, laden er bijvoorbeeld circa 18 bestanden.

De bestanden staan op een webserver en worden bij het aanroepen van de site verstuurd naar de browser van de bezoeker. Vaak wordt daarbij op de webserver eerst een database benaderd en wordt de webpagina on-the-fly samengesteld.

Snelheid is onder meer afhankelijk van:

• De fysieke locatie van de webserver en de bezoeker.
• De snelheid van de webserver en de programma’s die de webpagina samenstellen.
• Het aantal bestanden dat gekoppeld is aan de webpagina.
• De grootte van die bestanden (in bytes).
• De volgorde waarop bestanden laden (voor de snelheidsbeleving).

Performance optimalisatie vanaf de start

Tot nu toe gebruikte ik het woord ‘snelheid’, maar webbouwers spreken over website performance: de prestatie van een website. Het verbeteren van de performance wordt vaak pas achteraf opgepakt. Wij vervlechten het graag vanaf de start in onze werkwijze.

• Inhoud – voorbeeld: bedenk vooraf al wat de impact op performance is van de afbeeldingen die je wilt gebruiken. Heb je echt grote zware afbeeldingen nodig of kan het ook zonder?
• Ontwerp – voorbeeld: gebruik een beperkt aantal lettertypes op je website, omdat elk lettertype laadtijd kost.
• Bouw – voorbeeld: wil je standaard emoticons laden, ook als ze niet gebruikt worden?

Optimaliseren bij livegang

Hoewel onze websites vóór livegang al goed presteren, werken we ook vlak daarna nog aan performance. Dat is ook bij ons de grootste optimalisatieslag. Een aantal zinvolle acties:

• Afbeeldingen worden extra gecomprimeerd.
• Afbeeldingen worden later geladen (lazy loading, voor de snelheidsbeleving).
• Stijlbestanden worden samengevoegd en verkleind (concatenation en minification).
• Scripts, die zorgen voor functionaliteit van bijvoorbeeld formulieren, worden ook samengevoegd en verkleind.
• Er wordt zogeheten caching ingesteld. Hierover in een volgend blog meer.

Deze optimalisaties doen we pas aan het eind, omdat er tijdens de bouw nog te veel verandert. Als je te vroeg optimaliseert, moet je het opnieuw doen na elke verandering die je nog doorvoert.

Website performance meten

Website performance meet je voor en na een verbeterslag, zodat je weet of wijzigingen uithalen. Na elke andere grote wijziging is het ook goed om performance te meten.

De snelheid van een website meet je niet met een stopwatch. Hiervoor zijn diverse (gratis) tools beschikbaar. Twee handige tools zijn Google PageSpeed en GTMetrix.

Aan de slag

Wil je aan de slag met performance optimalisatie? Begin dan eerst eens met het doormeten van de jouw website met een van bovenstaande tools. Voel je vrij om vragen te stellen onder dit blog.