In 2008, een eeuwigheid geleden voor het web, kwam Amazon met de cijfers dat een vertraging van laden van een website van 100 milliseconden voor een verlies van 1% in verkopen leidt. Met een omzet van 19,17 miljard in 2008 was dat 191,7 miljoen dollar. Bij Google zorgt een vertraging van 500 milliseconden voor een 20% bezoekers verlies, volgens Marissa Mayer. Er zijn weinig bedrijven die zich kunnen meten met een Amazon of Google, maar snelheid is belangrijk, hoe groot of klein je ook bent.
Sinds 2008 zijn er meer onderzoeken geweest die het belang van een snelle website uitwijzen. Zo zou 57% van de gebruikers een website verlaten wanneer het langer dan drie seconden duurt om te laden. En de bounce rate (verlaten van een website na 1 paginabezoek) is 50% hoger wanneer een website langer dan drie seconden nodig heeft om te laden.
"On a global basis, the average connection speed increased 14% year over year."
In de afgelopen jaren is het internet sneller geworden. Maar de grootte van pagina’s stijgt gestaag mee. In 2010 waren pagina’s nog gemiddeld 702kb, in september 2016 komt het totaal neer op 2480kb een toename van 353%. Daarom is snelheid nog steeds een probleem waar veel websites mee kampen. Als je een website thuis of op het werk achter een computer opent, zul je dit waarschijnlijk niet merken. Maar denk eens aan de gebruikers die een website bekijkt op een 3G netwerk terwijl ze in de trein zitten of op een openbaar WI-FI netwerk zit bij de McDonalds met een lage snelheid. Nu spreek ik nog alleen over Nederland, maar steeds meer sites richten zich op de Aziatische of Afrikaanse markt. Op veel van deze plekken is het internet nog vele malen trager.
Een hogere snelheid van een website zorgt voor hogere conversies, dat blijkt uit verschillende onderzoeken. Een bijkomend voordeel is SEO (Search Engine Optimisation). Google heeft in 2010 aangegeven dat snelheid bepalend is voor de ranking in Google. Dat betekent dat als een concurrent een snellere website heeft, deze vaker boven jouw website uit stijgt.
Meten is weten
De minder technische gebruikers raad ik aan om jouw website te testen met Test my site van Google. Deze tool test jouw website op verschillende factoren, waaronder mobiele vriendelijkheid, mobiele snelheid en desktop snelheid. Elk onderdeel krijgt een score en onder de details staan verbeterpunten.
Voor een geavanceerdere weergave raad ik WebpageTest aan. Deze tool heeft ontzettend veel opties, waaronder een optie om de snelheid van het internet aan te passen. Dit is handig om de ervaring van gebruikers op een niet optimale verbinding te kunnen nabootsen.
Een mooie functionaliteit van WebpageTest is de filmstrip view. Hiermee kan je per 0.5 seconden zien hoe de pagina laadt. Zo kunnen we op websites de prioriteit leggen op content “boven de vouw”, zodat pagina’s voor het gevoel sneller laden. Content die de gebruiker nog niet ziet wordt later ingeladen.
Dit lijkt heel erg op wat Apple doet met het iOS besturingssysteem. De laatste keer dat een app gebruikt is, wordt er een screenshot gemaakt. Bij het opnieuw openen wordt eerst deze screenshot getoond en pas wanneer de app klaar is met laden is de app bruikbaar. Voor de gebruiker geeft dit het gevoel dat switchen tussen apps heel snel gaat, maar eigenlijk krijg je een oude versie te zien, totdat de nieuwe versie geladen is.
Waar kun je verbeteren
Vanaf hier wordt het verhaal iets technischer en is een beetje verstand van website-opbouw handig.
1. Verminder HTTP requests
Verminder de hoeveelheid te downloaden bestanden. Voeg stylesheets samen, bundel de Javascript tot een enkel bestand en zet afbeeldingen in een sprite (waar mogelijk).
Onze huidige webtechnologie kan een bepaald aantal bestanden tegelijk downloaden. In Chrome en Firefox is dat 6 en in IE10 8. Als je boven dat aantal uitkomt, moet er dus gewacht worden voordat deze klaar zijn. Als je alle content binnen de 6 of 8 requests kan houden is je site vele malen sneller.
Met HTTP/2 is dit ‘probleem’ verleden tijd, het duurt echter nog even voordat HTTP/2 helemaal klaar is om te gebruiken.
2. Caching
De eerste pagina die een gebruiker laadt duurt vaak het langst. Waar we voor moeten zorgen in dat de gebruiker op de volgende pagina's alle bestanden al gecached heeft. De bestanden staan dan opgeslagen op de computer en kunnen direct aangeroepen worden. Er zijn vele manieren om cache aan te zetten en te gebruiken. Voor uitgebreide uitleg, lees dit artikel dan even.
3. Afbeeldingen optimaliseren
Afbeeldingen nemen veruit de meeste data van een website in beslag. Mede door de trend dat afbeeldingen prominenter en groter dan ooit getoond worden, is dit een belangrijk verbeterpunt voor snelheid verhoging. Een handige tool om afbeeldingen te optimaliseren is ImageOptim voor Mac en online tools zoals TinyPNG en TinyJPG.
Nog belangrijker dan optimaliseren is de afbeeldingen passend maken voor de ruimte die ze in beslag nemen. Een productafbeelding wordt meestal niet groot getoond in een webshop. Het is daarom zonde om een gigantische afbeelding in te laden die vervolgens verkleind wordt.
4. Geef prioriteit aan content boven de vouw
In het hoofdstuk meten gaf ik aan dat er een filmstrip view is in WebpageTest. Hierin is duidelijk te zien hoe een pagina laadt. Het is belangrijk dat we content “boven de vouw” als eerste inladen en secundaire content (onder de vouw) later inladen. Dit kunnen we doen door afbeeldingen asynchroon in te laden, Javascript in te laden als het nodig is en de HTML van de pagina zo klein mogelijk te houden.
5. Minify bestanden
Javascript en CSS worden tijdens het ontwikkelen vaak in de originele vorm gebruikt. Dit maakt het testen tijdens het ontwikkelen makkelijker. Als een website live staat is het handiger om de bestanden zo klein mogelijk te maken door witruimte te verwijderen uit de bestanden. Dit zorgt voor kleinere bestanden en een snellere website.
Bovenstaande lijst is het topje van de ijsberg, maar vormen wel de problemen die we het vaakst tegenkomen bij langzame websites. Voor een lijst die specifiek gericht is op jouw website, gebruik de Google Pagespeed test. Zij geven een duidelijke lijst met verbeterpunten en verdere uitleg.
