WordPress optimize

WordPress optimaliseren: hoe je jouw website in 7 seconden kunt analyseren

Als je WordPress wilt optimaliseren, zijn sommige maatregelen glashelder, welbekend en bewezen doeltreffend. Maar zelfs websites die zogenaamd door en door geoptimaliseerd zijn, hebben vaak nog potentieel. Daarom is het de moeite waard om verder te kijken dan Google PageSpeed Insights en dergelijke. Want veel performance tools bieden echte data-goudmijntjes die een zeer uitgebreide analyse mogelijk maken – als je weet waar je naar moet zoeken.

Eenvoudige prestatie tools zoals Google's Test my site of Google PageSpeed Insights en als resultaat daarvan een lijst van aanbevolen acties. Dit kan prima zijn voor het begin. Maar als je je WordPress projecten efficiënt wilt monitoren en WordPress op een zinvolle manier wilt optimaliseren, moet je vroeg of laat je toevlucht nemen tot een performance tool die ook de laadtijd van je website weergeeft en precies laat zien hoe je blog, winkel of bedrijfswebsite zich gedraagt bij het laden.

Deze omvatten bijvoorbeeld Pingdom, GTMetrix of Webpagetest. Deze geven vaak een zogenaamd watervaldiagram. Deze enigszins omvangrijke data worden door velen nauwelijks opgemerkt. Maar als je professioneel met WordPress werkt, moet je begrijpen hoe ze werken. Want: er is geen andere gegevensbron die je laat zien hoe snel je website laadt, hoe goed je webhost is, hoe efficiënt je website laadt en waar de verbeteringen van je website zich bevinden.

En met een beetje oefening kun je elke website in één oogopslag en in (handomdraai) 7 seconden analyseren 😉 Hoe doe je dat? Ik zal het je vandaag stap voor stap laten zien!

WordPress optimaliseren: zonder een watervaldiagram blijf je alleen maar aan de oppervlakte

Misschien vraagt je je nu af: wat is het nut van al deze moeite? Er zijn geweldige prestatie tools die me al de belangrijke optimaliseringsmaatregelen laten zien. Bovendien blijft het meestal toch beperkt tot de volgende punten:

Als je deze punten hebt verduidelijkt en geoptimaliseerd, heb je natuurlijk een zeer goede basis gelegd voor een echt snelle website. Daarom worden deze redenen (terecht) in alle goede prestatiegidsen behandeld.

Bijvoorbeeld

En deze redenen staan ook herhaaldelijk bovenaan de lijst van de meest voorkomende laadtijdremmen voor WordPress websites.

Onze ervaring met honderden systematische prestatieanalyses met Webpagetest en uitgebreide sitechecks leert echter dat zelfs in zogenaamd "grondig geoptimaliseerde" WordPress websites altijd prestatievalkuilen zitten. En dit is precies waar het waterval diagram om de hoek komt kijken. Want het kan iets bijzonders: het laat je zien hoe je website laadt, welke elementen worden geladen en hoe snel het geheel verloopt.

Zo krijg je toegang tot de dataset

Alle goede prestatieanalyses geven ook watervaldiagrammen. Als je de Pingdom tools gebruikt, bijvoorbeeld, hoef je alleen maar ver genoeg naar beneden te scrollen.

WordPress optimaliseren Pingdom waterval

In Pingdom Tools moet je eerst een beetje scrollen om bij het watervaldiagram te komen. De bijbehorende sectie heet hier File Requests. Webpagetest en GT-Metrix hebben elk hun eigen tabbladen voor de diagrammen. Maar om al deze informatie goed vast te leggen, moet je begrijpen hoe je watervaldiagrammen goed moet lezen.

Hoe je de watervaldiagrammen correct leest

Door de geconcentreerde informatiedichtheid staan watervaldiagrammen niet bijster bekend om hun overzichtelijkheid. In feite hoef je maar vier dingen te weten om de gegevens te begrijpen:

  • De tijd wordt uitgezet op de X-as. Watervaldiagrammen zijn chronologisch gestructureerd: met behulp van de X-as kun je precies zien wanneer een element begint te laden en hoe lang het duurt om dat te doen. Het is juist deze chronologische structuur die een watervaldiagram zo waardevol maakt. Zo kun je precies zien waar laadtijd verloren gaat en waar je moet beginnen om je laadsnelheid te optimaliseren.
  • De Y-as registreert elk HTTP-verzoek. In de meeste watervaldiagrammen kun je op de elementen op de Y-as klikken om extra informatie te verkrijgen.
  • Een legende toont welk soort bron is geladen. Webpagetest markeert HTML, CSS, afbeeldingen, Flash enz. in kleur, Pingdom gebruikt hiervoor symbolen.
  • Een aanvullend coderingssysteem geeft informatie over de wijze waarop afzonderlijke verzoeken worden uitgevoerd – bijvoorbeeld hoe lang het duurt om verbinding te maken met de server of dat HTTPS wordt gebruikt.

In de volgende illustratie vind je de vier zojuist beschreven gebieden.

WordPress Optimize Waterfall Areas

WordPress optimaliseren met de 7 seconden analyse

Het is nu dus duidelijk hoe je een watervaldiagram leest – maar welke inzichten kun je er uit putten?

De 7-seconden-analyse heeft zich bewezen in onze prestatie-analyse: Het diagram geeft je in één oogopslag informatie over zeven belangrijke factoren voor de laadsnelheid. Deze zeven hacks helpen je precies te begrijpen hoe en hoe snel je website wordt weergegeven. En ze laten zien waar er potentieel is om het sneller te maken, problemen op te lossen of verder te verbeteren.

Opmerking:

Overigens zullen we in onze voorbeelden altijd verwijzen naar de watervaldiagrammen van Webpagetest, omdat we dit hulpmiddel eigenlijk altijd gebruiken, ongeacht of het handmatig of geautomatiseerd is.

Tip #1: Grootte is belangrijk

Hoe langer de waterval is (d.w.z. hoe meer elementen er langs de Y-as naar beneden worden getransporteerd), hoe meer verzoeken er moeten worden verwerkt en hoe trager de website laadt. Toch hoeft een lange waterval niet per se slecht te zijn. Er zijn functies en externe hulpbronnen waar je gewoon niet zonder kunt of wilt. In ons geval, bijvoorbeeld, is de live chat zo'n tool. Natuurlijk vertraagt het laden van het chatprogramma onze website. Snelle ondersteuning via chat is echter een centraal onderdeel van onze hosting. Dus we kunnen niet zonder de plugin.

HTTP/2 zorgt er ook voor dat het aantal verzoeken niet langer dezelfde betekenis heeft als een paar jaar geleden.

Met de nieuwe webnorm kunnen verzoeken gelijktijdig worden verwerkt in plaats van na elkaar. Bovendien stuurt de server bij HTTP/2 uit voorzorg al HTML-bestanden naar de browser. De nieuwe norm compenseert dus eventuele nadelen van een groot aantal HTTP-verzoeken. Om van HTTP/2 te kunnen profiteren, moet je website echter via HTTPS worden geladen, d.w.z. dat hij een SSL-certificaat moet hebben.

In ieder geval heeft onze ervaring geleerd dat er geen direct verband bestaat tussen de lengte van een waterval en de werkelijke laadsnelheid. Tenminste tot een bepaalde limiet: bij aanzienlijk meer dan 100 verzoeken is er in de meeste gevallen zeker ruimte voor besparingen.

Als je website deze drempel overschrijdt, moet je je HTTP-verzoeken eens onder de loep nemen. Onze homepage, bijvoorbeeld, laadt met meer dan 130 HTTP-verzoeken. Er is hier dus ruimte voor optimalisatie. Als je waterval meer dan 100 requests bevat, kijk dan eens goed welke je achterwege kunt laten.

Tip #2: Herken de laadtijd

De maximumwaarde op de X-as is essentieel voor het analyseren van de laadsnelheid: hier kun je aflezen hoeveel tijd er verstrijkt tot je website volledig is gerenderd. Hoe kleiner deze waarde, hoe beter.

Als de maximumwaarde van de X-as boven de 10 ligt, moet je zeker kijken naar de laadsnelheid van je website. De totale laadtijd van de website moet onder de 10 seconden liggen.

"*" geeft verplichte velden aan

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
Dit veld dient ter validatie en mag niet worden gewijzigd.

Tip #3: Herken de waargenomen laadtijd

De meeste gebruikers geven niet echt om de waarden die analysetools uitspuwen. Het enige dat voor hen telt is hoe snel ze denken dat de website laadt.

Wanneer je een website beheert, is het dus belangrijk om dit gevoel van snelheid zoveel mogelijk te verbeteren. Je kunt dit bereiken door optimale caching, above-the-fold optimalisatie of – als jouw klanten zich in het buitenland bevinden – het gebruik van een content delivery network (CDN).

Maar gelukkig kun je deze waargenomen laadtijd ook heel goed via watervaldiagrammen achterhalen. Voor zover wij weten, is Webpagetest het enige gratis tool dat een onderscheid maakt tussen de technisch gemeten laadtijd en de door de gebruiker waargenomen laadtijd.

Het hele diagram geeft de - minder belangrijke - technische laadtijd weer. De waargenomen laadtijd is tussen de blauwe en groene lijnen in het diagram verstopt.

De groene lijn geeft aan wanneer het eerste visuele element van de website wordt geladen (dit wordt het "start render" punt genoemd). De blauwe lijn geeft aan wanneer de website volgens de gebruiker volledig geladen is – op dat moment neemt de waarschijnlijkheid van interactie met de website aanzienlijk toe. Deze twee lijnen moeten zo ver mogelijk naar links en zo dicht mogelijk bij elkaar staan.

WordPress optimaliseert de waargenomen laadsnelheid

Het oranje gebied toont de fase waarin geen zichtbare inhoud gerenderd wordt. Tot het einde van deze fase ziet de bezoeker alleen een witte pagina. Het blauwe gebied markeert de tijdspanne tussen Start Render en Load Time, waarin de bezoeker een zichtbaar weergaveproces kan waarnemen (bijvoorbeeld een zandloper). Beide vormen samen de waargenomen laadtijd.

Webpagetest is de enige tool die je deze gegevens verschaft. Dit is ons niet bekend van Pingdom Tools of GTMetrix. Deze regel is dus alleen van toepassing als je Webpagetest gebruikt: de groene lijn moet na ongeveer 2 tot 3 seconden verschijnen, de blauwe lijn uiterlijk na 7 seconden.

Tip #4: HTTP/2 vs. HTTP/1

HTTP/2 biedt een doorslaggevend voordeel ten opzichte van HTTP/1: websites laden veel sneller met de nieuwere webstandaard. Naast een SSL-certificaat ben je echter ook afhankelijk van je webhost die deze dienst levert. Veel mensen zijn er niet zeker van of dit voor hen ook werkelijk het geval is of niet.

Een van de grootste voordelen van HTTP/2 is de gelijktijdige verwerking van meerdere verzoeken. En dit is precies wat je duidelijk kunt zien in je watervaldiagram. Aangezien de verzoeken chronologisch worden verwerkt, beginnen verschillende balken op hetzelfde punt op de X-as wanneer HTTP/2 wordt gebruikt.

WordPress optimaliseert HTTP2

Links zie je het typische laadgedrag van een WordPress website zonder HTTP/2. De afzonderlijke HTTP requests worden achter elkaar uitgevoerd. Rechts zie je hoe dezelfde website zich gedraagt met HTTP/2: De afzonderlijke verzoeken worden gelijktijdig geladen.

Als individuele verzoeken parallel worden geladen, draait je website met HTTP/2.

Tip 5: Herken te grote foto's

In ongeveer 30 procent van de websites die we analyseren, vinden we nog potentieel op het gebied van beeldgrootte. En dit ondanks het feit dat de meeste webmasters ervan uitgaan dat zij hier al het optimale hebben bereikt.

Afbeeldingen zijn – in onze ervaring – na caching de belangrijkste factor voor de laadtijd van pagina's. Voor elke afbeelding die je in de backend uploadt, maakt WordPress automatisch een hele reeks extra bestanden aan, de thumbnails of uitgelichte afbeeldingen. De juiste compressie van deze bestanden is een van de meest doeltreffende methoden om de omvang en dus de laadsnelheid van je website te verminderen.

Hoe je je foto's slim kunt optimaliseren laat dit voorbeeld zien:

In het watervaldiagram kunnen afbeeldingen snel worden geïdentificeerd met behulp van de legenda: Webpagetest laat ze met paarse balken zien, Pingdom met een icoon. Alleen GTMetrix labelt afbeeldingen niet apart. In ieder geval: als de bijbehorende balken veel langer zijn dan de balken van de overige requests duidt dit op een lange laadtijd van de afbeelding.

WordPress optimaliseert grote afbeeldingen

In de afbeelding zie je een extreem maar zeer duidelijk voorbeeld van ongecomprimeerde beelden. Sommige bestanden alleen al duren meer dan 8 seconden om te laden, waardoor de hele website wordt vertraagd.

In een geval als hierboven moet je de afbeeldingen goed bekijken. Door op het betreffende verzoek te klikken kun je meestal in een watervaldiagram precies zien om welke bestanden het gaat. Dit maakt het zoeken naar laadtijdremmen veel gemakkelijker. Lange laadbalken voor beeldbronnen wijzen op compressiemogelijkheden.

Tip #6: Omleidingen opsporen

Een watervalgrafiek helpt je niet alleen te begrijpen welke items wanneer en hoe snel laden, maar ook hoeveel redirects er zijn opgezet en waar ze naartoe wijzen. Verzoeken met omleidingen zijn meestal gemarkeerd. Het schema vertelt je ook welke omleiding is ingesteld en waar die heen gaat.

WordPress Optimize Redirects

De website in deze illustratie heeft verschillende 302 redirects achter elkaar.

Met een watervaldiagram kun je in één oogopslag zien hoeveel en welke redirects zijn ingesteld. Dit helpt ook om forwarding loops te detecteren na een DNS wijziging.

Dankzij de gele markeringen hebben wij al verschillende keren onnodige of zelfs schadelijke omleidingen kunnen opsporen.

Tip #7: Herken fouten in een oogopslag

Af en toe worden elementen van een website niet correct weergegeven. Dit kan bijvoorbeeld gevolgen hebben voor AdSense-frames, maar ook voor ingesloten kaarten en lettertypes.

WordPress Optimize Error

In dit geval werpt het watervaldiagram een foutmelding en markeert de regel met het betreffende verzoek in het rood. Het diagram geeft ook aan wat de fout is en welke bron de fout veroorzaakt. De website in deze afbeelding gooit een 404-fout.

Rode lijnen wijzen op fouten bij het renderen van de website.

Alle tips in een oogopslag met het cheatsheet

Een watervalgrafiek is waarschijnlijk de meest waardevolle analyse die je kunt krijgen voor jouw WordPress websites. Het combineert verschillende gegevens die je in het oog moet houden: de laadtijden, de rendervolgorde en foutmeldingen. Gewapend met de tips uit dit artikel kun je snel en effectief herkennen waar nog optimalisatie mogelijk is:

  • Is de waterval te lang (meer dan 100 verzoeken)?
  • Is de maximumwaarde van de X-as te groot (groter dan 10)?
  • Laden de aanvragen parallel (via HTTP/2)?
  • Zijn de beelden te groot (d.w.z. zijn de beelden slecht geoptimaliseerd)?
  • Staan de groene en blauwe lijnen te ver naar rechts of te ver uit elkaar (d.w.z. ervaart de gebruiker de website als traag)?
  • Zijn er onverwachte gele lijnen (omleidingen)?
  • Zijn er rode lijnen (fouten)?

Toegegeven: de eerste keer zul je misschien langer over de analyse doen. Met een beetje ervaring kun je echter met watervaldiagrammen je WordPress-projecten veel beter begrijpen en optimaliseren.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.