De snelheid van je website optimaliseren

De snelheid van een website heeft een enorme invloed op de gebruikservaring van een bezoeker. Naarmate het laden van je website langer duurt zal het geduld van de bezoeker afnemen. Er wordt gezegd dat de helft van webgebruikers verwachten dat een website binnen 2 seconden geladen is en dat ze zelfs afhaken als dit langer duurt dan 3 seconden. Dit afhaken wordt de bounce-rate genoemd en heeft mogelijk invloed op conversie. Het belang van een snelle website is dus groot, zo groot zelfs dat snellere websites beloond worden met een hogere positie in de zoekresultaten van Google.

Time To First Byte

De tijd dat het kost nadat een webadres is ingetypt tot aan de eerste byte die binnenkomt heet de "Time To First Byte" (of TTFB) en wordt deels bepaald door de snelheid van het netwerk tussen de bezoeker en de website en deels door de tijd die de webserver nodig heeft om het verzoek af te handelen.

Ons hostingplatform is aangesloten op meerdere supersnelle verbindingen met het internet. Zodra er een webpagina bij ons wordt opgevraagd vindt er een aaneenschakeling van processen plaats om het juiste resultaat aan de bezoeker terug te kunnen geven. Stel bijvoorbeeld dat je een webpagina hebt waarop een stukje tekst staat dat uit een database komt. Zodra iemand deze pagina opvraagt trapt dat het volgende proces af:

  1. De bezoeker komt binnen op onze load-balancer, deze speelt het verzoek door naar één van onze achterliggende webservers
  2. De gekozen webserver legt een verbinding met Apache en leest vervolgens alle PHP bestanden van onze fileserver die met het verzoek geraadpleegd worden. Bij sommige CMS-en of frameworks loopt dat op tot tientallen PHP bestanden die stuk voor stuk gecompileerd en uitgevoerd moeten worden
  3. Bij het uitvoeren van deze scripts wordt er een verbinding opgezet met de achterliggende database server en daarbij wordt om de verzochte tekst van de homepagina gevraagd
  4. Het PHP script voegt dan enkele templates en de content uit de database samen tot een html resultaat en geeft deze terug aan de webserver, die op zijn beurt deze terug geeft aan de load-balancer die dit als antwoord naar de bezoeker stuurt

Zoals je merkt is dit nogal een onderneming en toch vindt dat hele proces vaak nog binnen een seconde plaats. Maar stel nu dat je direct daarna nog een bezoeker krijgt voor dezelfde pagina, deze zou ditzelfde proces opnieuw opstarten. Best wel zonde, want deze pagina is waarschijnlijk voor de tweede bezoeker niet veranderd.

Caching

Dit is waar caching om de hoek komt kijken. Met een cache bewaar je een eerder resultaat (bijvoorbeeld een pagina, plaatje, gecompileerde code, etc) als antwoord voor opvolgende verzoeken om onnodig dubbel werk te vermijden. Bij Oni bieden we diverse caches die op de verschillende punten in het bovenstaande laad proces inhaken:

  • Varnish Cache - een response cache op onze loadbalancer (#1)
  • OPCache - een PHP compile cache (#2)
  • Memcached - een in-memory key/value database (#3 en #4)

Goed gebruik maken van de caching mogelijkheden is de sleutel tot het optimaliseren van de snelheid en schaalbaarheid van een website.

Browser verwerkingstijd

Naast de server tijd om de website op te halen, heeft de browser ook tijd nodig om de website te renderen. De tijd die daarvoor nodig is is o.a. afhankelijk van de hoeveelheid/grootte van de statische bestanden (html, plaatjes, css, fonts) en de hoeveelheid javascript code die uitgevoerd moet worden.

Dit is goed te zien met behulp van de Chrome webdeveloper tools (druk in Chrome op F12 en ga naar het netwerk tabblad). Voor deze help pagina ziet dat er bijvoorbeeld zo uit:

Chrome developer network tab

Onderaan zie je dat er 28 verzoeken zijn en dat er 527KB bytes gedownload moest worden. De website was bruikbaar na 653 milliseconden seconden en volledig geladen na 1.57 seconden.

Om je verder te helpen met het optimaliseren van je website heeft Google een uitstekende tool ontwikkeld, genaamd PageSpeed, die de pijnpunten van je website bloot legt en tips biedt om deze op te lossen.