WordPress optimaliseren: zo analyseer je jouw website in 7 seconden

Jan Hornung Laatst bijgewerkt op 12.10.2020
9 Min.
Met deze tips en onze Cheat Sheet kun je jouw WordPress pagina's in slechts 7 seconden analyseren en zelfs nog beter dan Google PageSpeed Insights
Laatst bijgewerkt op 12.10.2020

Als je WordPress wilt optimaliseren, zijn sommige maatregelen glashelder, bekend en bewezen effectief. Maar zelfs zogenaamd grondig geoptimaliseerde pagina's hebben vaak nog potentie. Daarom is het de moeite waard om verder te kijken dan de horizon van Google PageSpeed Insights en co. Omdat veel prestatietools echte data-goudmijnen opleveren, die een zeer uitgebreide analyse mogelijk maken - als je weet waar je naar moet zoeken. Ik laat je vandaag zeven tips zien, waardoor de analysein slechts 7 seconden lukt.

Eenvoudige prestatietools zoals Google's Test My Site of Google PageSpeed Insights geven als resultaat een lijst met aanbevolen acties. Voor het begin kan dit wel goed zijn. Maar als je efficiënt toezicht wilt houden op WordPress-projecten en WordPress zinvol wilt optimaliseren, moet je vroeg of laat een performancetool gebruiken die ook de laadtijd van je pagina weergeeft en je precies laat zien hoe je blog, je winkel, je bedrijfspagina zich bij het laden gedraagt.

Daarbij horen bijvoorbeeld Pingdom, GTMetrix of Webpagetest. Deze leveren vaak een zogenaamde Watervaldiagram mee. Deze ietwat omvangrijke datasets worden door veel gebruikers nauwelijks opgemerkt. Maar als je professioneel met WordPress werkt, moet je begrijpen hoe ze werken. Want: Er is geen enkele andere gegevensbron die je laat zien hoe snel je site laadt, hoe goed je hoster is, hoe efficiënt je site laadt en waar de ontwikkelingsmogelijkheden van je site zich bevinden.

En met een beetje oefening kun je elke pagina in één oogopslag en binnen (handgeklokte) 7 seconden analyseren 😉.

Hoe je dat doet? Vandaag laat ik het je stap voor stap zien!

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

Misschien vraag je je nu af: waar doe ik al die moeite voor? Er zijn geweldige prestatietools die mij al alle belangrijke optimaliseringsmaatregelen laten zien. Bovendien is het meestal toch beperkt tot de volgende punten:

Tuurlijk, als je deze punten hebt verduidelijkt en geoptimaliseerd, heb je een zeer goede basis gecreëerd voor een echt snelle site. Daarom worden deze redenen (terecht) behandeld in alle lijstjes voor goede prestaties.

Bijvoorbeeld

En ook bij de meestvoorkomende laadtijdremmen van WordPress-pagina's komen deze redenen altijd bovendrijven.

Onze ervaring met honderden systematische prestatieanalyses met Webpagetest en uitgebreide Sitechecks toont echter aan: zelfs in zogenaamd "grondig geoptimaliseerde" WordPress-pagina's zijn er steeds weer performance-valkuilen te vinden. En dit is precies waar het watervaldiagram helpt. Omdat het iets speciaals kan: het laat zien hoe je pagina wordt geladen, welke elementen worden geladen en hoe snel het geheel zich voltrekt.

Zo krijg je toegang tot de dataset

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

WordPress  koninkrijk waterval optimaliseren
Met de Pingdom Tools moet je eerst een beetje scrollen om bij het watervaldiagram te komen. De overeenkomstige sectie hier heet File Requests. Webpagetest en GT-Metrix hebben elk hun eigen tabbladen voor de diagrammen.

Maar om al deze informatie goed te registreren, moet je begrijpen hoe je watervaldiagrammen correct 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:

  1. De tijd is uitgezet op de X-as.
    Watervaldiagrammen zijn chronologisch opgebouwd: aan de hand van de X-as kun je precies zien wanneer een element begint met laden en hoe lang dat duurt. Juist deze chronologische structuur maakt een watervaldiagram zo waardevol. Want zo kun je precies zien waar de laadtijd verloren gaat en met welke processen je moet beginnen om je laadsnelheid te optimaliseren.
  2. Elk HTTP-verzoek wordt geregistreerd op de Y-as.
    Bij de meeste watervaldiagrammen kun je op de elementen op de Y-as klikken om extra informatie over de elementen te krijgen.
  3. Een legenda laat zien welk type ressource geladen wordt. 
    Webpage-test markeert HTML, CSS, afbeeldingen, Flash, etc. in kleur, Pingdom gebruikt hiervoor symbolen.
  4. Een extra codeersysteem geeft informatie over hoe individuele verzoeken worden uitgevoerd - bijvoorbeeld hoe lang het duurt om verbinding te maken met de server of of dat er gebruik wordt gemaakt van HTTPS.
WordPress optimaliseren: zo analyseer je jouw website in 7 seconden
WordPress  het optimaliseren van de gebieden van een watervaldiagram
In deze figuur vind je de vier hierboven beschreven gebieden.

WordPress optimaliseren met de 7 seconden analyse

Het is nu dus duidelijk hoe je een watervaldiagram leest - maar welke conclusies kun je daaruit trekken?

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

Opmerking:

Overigens zullen we in onze voorbeelden altijd verwijzen naar de watervaldiagrammen van Webpagetest, omdat we deze tool eigenlijk altijd gebruiken, ongeacht of dit handmatig of automatisch gebeurt.

Tip #1: Grootte is belangrijk

Hoe langer de waterval is (d.w.z. hoe meer elementen er op de Y-as worden weergegeven), hoe meer aanvragen er moeten worden verwerkt en hoe langzamer de pagina's worden geladen. Toch hoeft een lange waterval niet per se slecht te zijn. Er zijn functies en externe middelen die je gewoonweg niet kunt of wilt missen. Bij ons is bijvoorbeeld de live chat zo'n hulpmiddel. Het laden van het chatprogramma vertraagt onze site natuurlijk. Maar de snelle ondersteuning via chat is een centraal onderdeel van onze hosting. Dus kunnen we niet zonder deze plugin.

Ook zorgt HTTP/2 ervoor dat alleen al het aantal verzoeken niet meer dezelfde betekenis heeft als een paar jaar geleden.

Want met de nieuwe webstandaard kunnen requests gelijktijdig worden verwerkt in plaats van na elkaar zoals vroeger. Bovendien stuurt de server onder HTTP/2 al uit voorzorg HTML-bestanden naar de browser. De nieuwe standaard compenseert dus de nadelen die eventueel kunnen voortvloeien uit een groot aantal HTTP-verzoeken. Om te kunnen profiteren van HTTP/2 moet je webpagina echter worden geladen via HTTPS, d.w.z. over een SSL-certificaat beschikken.

In ieder geval heeft de ervaring geleerd dat er geen direct verband bestaat tussen de lengte van een waterval en de werkelijke laadsnelheid. Tenminste tot een bepaalde limiet: bij meer dan 100 aanvragen is er in de meeste gevallen besparingspotentieel.

Als je website deze drempel overschrijdt, moet je je HTTP-requests eens nader bekijken. Onze homepage laadt bijvoorbeeld met meer dan 130 HTTP-aanvragen. Er is hier dus potentie voor optimalisatie.

Als je waterval meer dan 100 aanvragen bevat, kijk dan goed welke je kunt missen.

Tip #2: Herken de laadtijd

De maximale waarde op de X-as is essentieel voor het analyseren van de laadsnelheid: hier kun je zien hoeveel tijd er voorbij gaat tot je website volledig is weergegeven. Hoe kleiner deze waarde is, hoe beter.

Als de maximale waarde van de X-as hoger is dan 10, moet je je zeker bezighouden met de laadsnelheid van je pagina.

De totale laadtijd van je pagina moet minder dan 10 seconden bedragen.

Tip #3: Herken de waargenomen laadtijd

De meeste gebruikers maakt het niet veel uit welke waarden analysetools spuien. Het enige wat voor hen telt is: hoe snel het laden van de pagina's aanvoelt.

Voor jou als websitebeheerder is het daarom belangrijk om dit gevoel van snelheid zoveel mogelijk te verbeteren. Dit kun je bereiken door middel van optimale caching, een above-the-fold-optimalisatie of - als je klanten in het buitenland zitten - door gebruik te maken van een Content Delivery Network (CDN).

Gelukkig kun je deze waargenomen laadtijd ook heel goed aan de hand van watervaldiagrammen doorzien. Voor zover wij weten is de Webpagetest de enige gratis tool die een onderscheid maakt tussen 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 webpagina wordt geladen (dit wordt het "Start Render"-punt genoemd). De blauwe lijn geeft aan wanneer de gebruiker de pagina als volledig geladen waarneemt - op dit punt neemt de kans aanzienlijk toe dat hij op de pagina blijft. Deze twee lijnen moeten zo ver mogelijk naar links en zo dicht mogelijk bij elkaar liggen.

WordPress  het optimaliseren van het in kaart brengen van de waargenomen laadtijd
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 kan leveren. Van de Pingdom Tools of GTMetrix is dit ons niet bekend. 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 maximaal na 7 seconden.

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

HTTP/2 biedt een doorslaggevend voordeel ten opzichte van HTTP/1: met de nieuwere webstandaard laden pagina's veel sneller. Naast een SSL-certificaat ben je er ook van afhankelijk of je hoster deze dienst aanbiedt. Veel websitebeheerders weten echter niet zeker of dit bij hen ook daadwerkelijk het geval is.

Een van de grootste voordelen van HTTP/2 is de gelijktijdige verwerking van meerdere aanvragen. En juist die kun je duidelijk in je watervaldiagram aflezen. Aangezien de aanvragen chronologisch worden verwerkt, beginnen meerdere balken op hetzelfde punt op de X-as wanneer HTTP/2 wordt gebruikt.

WordPress   het laadgedrag van een WordPress  -Pagina met en zonder HTTP/2
Links het typische laadgedrag van een WordPress-pagina zonder HTTP/2. De individuele HTTP-aanvragen worden na elkaar uitgevoerd. Rechts zie je hoe dezelfde pagina zich met HTTP/2 verhoudt: de individuele aanvragen worden hier tegelijkertijd geladen.

Als enkele aanvragen parallel laden, draait je pagina op HTTP/2.

Tip 5: Herken te grote foto's

In ongeveer 30 procent van de websites die we analyseren, vinden we nog steeds potentie bij de beeldgrootte. En dat terwijl de meeste webmasters ervan uitgaan dat ze er al het optimale uitgehaald hebben.

Afbeeldingen zijn - volgens onze ervaring - de belangrijkste factor voor de paginalaadtijd op de caching na. Voor elke afbeelding die je in de backend uploadt, maakt WordPress automatisch een heleboel andere bestanden, thumbnails of Featured Images aan. De juiste compressie van deze bestanden is een van de meest effectieve manieren om de grootte en dus de laadsnelheid van je pagina 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  optimaliseren dit is hoe het eruit ziet als foto's echt te groot zijn
Een extreem maar zeer beeldend voorbeeld van ongecomprimeerde afbeeldingen. Sommige bestanden hebben alleen al meer dan 8 seconden nodig om te laden, waardoor de hele pagina wordt vertraagd.

In een dergelijk geval als hierboven, moet je je foto's goed bekijken. Door op de betreffende aanvraag te klikken, kun je meestal in een watervaldiagram precies zien om welke bestanden het gaat. Dit maakt het veel gemakkelijker om te zoeken naar "laadtijdremmen".

Lange laadbalken voor beeldbronnen wijzen op de mogelijkheden voor compressie.

Tip #6: Omleidingen opsporen

Een watervaldiagram helpt je niet alleen te begrijpen welke elementen wanneer en hoe snel geladen worden, maar ook hoeveel redirections (omleidingen) er zijn opgezet en waar ze naartoe wijzen.

Aanvragen met omleidingen worden meestal in kleur gemarkeerd. Het diagram geeft ook informatie over welke omleiding is opgezet en waar deze naartoe leidt.

WordPress  het doorsturen te optimaliseren
Deze pagina heeft een aantal 302 omleidingen achterelkaar.

Met een watervaldiagram kun je dus in één oogopslag zien hoeveel en welke omleidingen er zijn ingesteld. Dit helpt overigens ook bij het opsporen van doorstuurlussen na een DNS-verandering. Dankzij de gele markeringen hebben we al meerdere malen onnodige of zelfs schadelijke omleidingen kunnen opsporen.

Gele lijnen markeren omleidingen.

Tip #7: Fouten opsporen in een oogopslag

Af en toe gebeurt het dat elementen van een webpagina niet correct worden gerenderd. Het kan bijvoorbeeld gaan om AdSense-frames, maar ook om geïntegreerde kaarten en lettertypen.

WordPress  optimaliseren in het watervaldiagram, fouten worden geïdentificeerd met rode lijnen
Deze pagina geeft een 404-fout aan.

In dit geval geeft het watervaldiagram een foutmelding aan en markeert de lijn met de betreffende rij in het rood. Het diagram geeft ook het type fout aan en de bron die de fout veroorzaakt.

Rode lijnen geven fouten aan bij het renderen van de pagina.

Met de Cheat-Sheet heb je alle tips op een rijtje

Een watervaldiagram is waarschijnlijk de meest waardevolle analyse die je voor je WordPress-pagina's kunt krijgen. Hier worden verschillende gegevens gecombineerd, die je als website-eigenaar in de gaten moet houden: de laadtijden, de volgorde van het renderen en de foutmeldingen. Gewapend met de tips uit dit artikel herken je snel en effectief waar er nog ruimte is voor verbetering:

  • Is de waterval te lang (meer dan 100 aanvragen)?
  • Is de maximale waarde 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 staan ze te ver uit elkaar (waardoor de gebruiker de pagina als traag ervaart)?
  • 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.

RAIDBOXER van het eerste uur en Head of Support. Bij Bar- en WordCamps praat hij het liefst over PageSpeed en website-performance. De beste manier om hem om te kopen is met een espresso - of Beierse Brezel.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

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