16-12-2014

Maak je WordPress site sneller!

16 december 2014

Maak jouw WordPress website sneller!

Wanneer je een website bezoekt, is het wel zo prettig wanneer deze snel laadt. Dat verwachten bezoekers dus ook van jouw eigen website. In dit artikel leggen we uit wat de voordelen zijn van een snelle WordPress site, hoe je de snelheid zelf eenvoudig kunt testen en last but not least: hoe je jouw site sneller kunt maken.

Wat zijn de voordelen van een snelle website?

Wanneer een website traag laadt, zal een bezoeker eerder wegklikken en kiezen voor een sneller alternatief. Deze wijsheid is inmiddels diverse keren bevestigd door wetenschappelijke studies, waaronder een onderzoek uitgevoerd door Measureworks en Bol.com. Onderstaande grafiek laat een duidelijke stijging in de bouncerate (percentage van de bezoekers die de website vroegtijdig wegklikken) zien vanaf een laadtijd van meer dan 2,5 seconden.

snelheid wordpress
Bron afbeelding: Measureworks

Ook Google waardeert het wanneer een website snel is en neemt dit mee als ranking factor in het zoekmachine algoritme. De bovenste 5 websites in de organische rankings van Google zijn over het algemeen een stuk sneller dan de websites die lager ranken. Natuurlijk impliceert correlatie nog geen causatie, maar waar rook is…

speed
Bron afbeelding: Karelgeenen.nl

Maar wanneer is een website nu snel? Is de laadtijd van de eerst zichtbare content de maatgevende factor, of is de tijd waarbinnen de gehele website ingeladen is bepalend? Er zijn verschillende standaarden om de snelheid van een website aan te spiegelen en deze zullen we in het volgende hoofdstuk uitgebreid bespreken.

De snelheid van een website meten

Wanneer je wilt weten hoe snel jouw eigen website is, kun je dit gratis testen op Webpagetest.org. Deze test kun je meerdere keren achter elkaar uitvoeren, zodat je een goed beeld krijgt van de gemiddelde snelheid van je site. Bovendien kun je zelf kiezen vanaf welke locatie de test wordt uitgevoerd (bijvoorbeeld Amsterdam of Brussel), zodat de test representatief is voor doelgroepen die zich op verschillende afstanden kunnen bevinden.

performance

Bron afbeelding: Karelgeenen.nl

Webpagetest.org geeft in de testresultaten een overzicht van bijzonder veel metrics. Wij richten ons in dit artikel op de 3 meest belangrijke: respectievelijk de first byte time, start render en load time. Wanneer een website op een computer wordt ingeladen, gebeurt dat in deze volgorde:

  • DNS Lookup
  • Maken van de verbinding
  • Wachttijd
  • First Byte Time
  • Start Render (inladen assets zoals HTML, CSS, Javascript en afbeeldingen)
  • Load Time

First byte time

Google ziet de first byte time als een van de criteria om de snelheid van een website te bepalen. De first byte time wordt door Google ook wel de ‘Server Response Time’ genoemd en geeft weer hoelang het duurt voordat een webbrowser de eerste byte (geheugeneenheid voor digitale gegevens) van een website heeft ingelezen.

Ondanks het feit dat de ‘First Byte Time’ ook wel ‘Server Response Time’ genoemd wordt, mag hierdoor niet het misverstand ontstaan dat de hosting server van een website de enige bepalende factor is voor de laadtijd ervan. Integendeel, de wijze waarop de website technisch in elkaar steekt heeft vaak een zeer grote invloed op de sitesnelheid.

Start Render

Renderen is het proces waarbij pagina-inhoud zoals afbeeldingen stapsgewijs wordt opgebouwd in je webbrowser. Start Render staat logischerwijs dus voor het startpunt van dit proces, wanneer je het eerste onderdeel van een webpagina ziet verschijnen.

Load Time

De tijd waarbinnen de browser klaar is met het inladen van de volledige inhoud van een webpagina wordt de Load Time genoemd.

Hoe snel is mijn webhosting?

Helemaal aan de bovenzijde van het testrapport op Webpagetest.org zijn de scores van een aantal belangrijke criteria zichtbaar. Hiervoor worden Amerikaanse normeringen gehanteerd, waarbij A de hoogst mogelijke score is en F de laagst mogelijke score. Het kenmerk van goede webhosting is dat een website zeer hoog scoort op de criteria ‘Keep-alive Enabled’, ‘Compress Transfer’ en ‘Cache static content’.

Keep-alive Enabled

Wanneer ‘keep-alive’ enabled oftewel geactiveerd is, houdt de webserver de connectie met de computer van een bezoeker in stand, zelfs wanneer deze een tijdje idle oftewel niet actief is. Hierdoor hoeft er voor elke nieuwe opdracht die wordt gegeven (bijvoorbeeld het inladen van een nieuwe pagina), niet opnieuw een connectie met de server te worden gemaakt. Logischerwijs verloopt het proces hierdoor sneller.

Compress Transfer

Compress Transfer betekent dat de assets op een webpagina in ingepakte vorm (gecomprimeerd in gzip-bestandsformaat) worden verstuurd naar de computer van een bezoeker. Gecomprimeerde bestanden nemen minder ruimte in beslag en kunnen dus ook sneller ingeladen worden. De ‘Compress Transfer’-functie maakt het minify’en van HTML overbodig.

Cache static content

Wanneer ‘Cache static content’ is ingeschakeld geeft de webserver jouw webbrowser een signaal dat assets op de webpagina mogen worden opgeslagen in de browsercache (het tijdelijk geheugen van een browser). Doordat de bestanden lokaal worden opgeslagen op de computer van de gebruiker, hoeven deze de eerstvolgende keer dat dezelfde webpagina wordt bezocht niet van de webserver te worden opgehaald, maar worden deze rechtstreeks ingeladen vanaf de eigen computer. Dit versnelt het proces aanzienlijk. Bijkomend voordeel is dat de webserver minder wordt belast, waardoor er meer bandbreedte overblijft voor andere bezoekers, wat de laadtijd van de website nog eens ten goede zal komen.

Welke webserver software is sneller?

De meest gebruikte webserver software is Apache, maar deze software heeft sinds enkele jaren concurrentie gekregen van nginx. Nginx werkt sneller en stabieler voor sites met veel bezoekers, maar heeft als belangrijk nadeel dat slechts weinig instellingen zelf handmatig aan te passen zijn; dit kan alleen worden gedaan door de webhoster. Op de website van hosting providers wordt vaak vermeld welke webserver software wordt gebruikt.

SSL instellingen

SSL wordt door miljoenen websites gebruikt om de internetverbinding te beveiligen. Een nadeel van SSL is echter dat de extra versleuteling hogere laadtijden van webpagina’s oplevert. Er zijn diverse technieken om deze snelheidsvermindering zoveel mogelijk te beperken: SPDY, STS headers en OSCP stapling. Over het algemeen zal door het toepassen van SPDY de grootste snelheidswinst behaald worden.

De SSL instellingen zijn niet via Webpagetest.org te bekijken, maar wel via de Qualys SSL Test.

ssl
Bron afbeelding: Karelgeenen.nl

Hoe maak ik mijn WordPress website sneller?

Je kunt nog zoveel lezen over de verschillende methoden om je website sneller te maken, maar uiteindelijk zul je zelf moeten testen welke methode het beste werkt voor jouw website. Maak gebruik van Webpagetest.org om verschillende testversies van je website uit te proberen. Activeer en deactiveer verschillende WordPress plugins en thema’s en voer meerdere testen achter elkaar uit om te bepalen welke invloed deze factoren hebben op de snelheid van je site.

Een handige tip om je site direct sneller te maken is door een caching plugin voor WordPress te installeren. De HTML-code kan hierdoor lokaal vanaf de computer worden ingeladen, wat erg veel laadtijd scheelt door het omzeilen van de database en PHP. W3 Total Cache en WP Super Cache zijn de meest bekende WordPress caching plugins.

Het sneller maken van je website is soms simpelweg een kwestie van het verwijderen van vertragende elementen. Voor vrijwel alle plugins geldt dat ze vertragend werken, hoewel de hierboven genoemde caching plugins uiteraard een uitzondering zijn. Ook widgets in WordPress zoals ‘populaire posts’ of ‘gerelateerde posts’ zorgen vaak voor extra laadtijd.

Net zoveel invloed als plugins heeft het door jou gebruikte thema: elke lijn extra code verhoogt de laadtijd met een klein percentage. Vaak is de laadtijd van websites die er grafisch bijzonder aantrekkelijk uitzien daarom ook hoger. Mooie design elementen zoals Javascript sliders en CSS regels zien er weliswaar leuk uit, maar kunnen bezoekers afschrikken door de verhoogde laadtijd. Zorg dus voor een goede balans tussen uiterlijk en laadtijd van je website.

Conclusie

Het maken van een snelle WordPress site is een proces dat vaak met vallen en opstaan gaat wanneer je het zelf doet. Kleine aanpassingen kunnen een grote snelheidswinst opleveren, maar dan zul je deze aanpassingen wel eerst moeten testen op hun effectiviteit.

Ben jij op zoek naar een partij die dit voor jou doet en die bovendien ruimte ervaring heeft met het fors verhogen van de laadtijden van websites? Neem dan vrijblijvend contact op met Webton via info@webton.nl of bel naar 074-3030400.

Vind je dit een interessant bericht? Deel het!