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 u WordPress wilt optimaliseren, zijn sommige maatregelen glashelder, welbekend en bewezen doeltreffend. Maar zelfs zogenaamd geoptimaliseerde pagina's hebben vaak nog potentieel. Daarom is het de moeite waard om verder te kijken dan Google PageSpeed Insights en Co. Want veel performance tools leveren ware datagoudmijnen opdie een zeer uitgebreide analyse mogelijk maken - als je weet waar je naar moet zoeken. Vandaag laat ik u 7 tips zien waarmee u uwgegevens in slechts 7 seconden kunt analyseren.

Eenvoudige prestatie-instrumenten zoals Google's Test mijn site of Google PageSpeed Insights en als resultaat daarvan een lijst van aanbevolen acties. Dit kan prima zijn voor het begin. Maar als u uw WordPress projecten efficiënt wilt monitoren en WordPress zinvol wilt optimaliseren, moet u vroeg of laat uw toevlucht nemen tot een performancetool die ook de laadtijd van uw pagina weergeeft en u precies laat zien hoe uw blog, uw shop, uw bedrijfspagina zich gedraagt bij het laden.

Deze omvatten bijvoorbeeld Pingdom, GTMetrix of Webpagetest. Deze geven vaak een zogenaamde watervalgrafiek. Deze enigszins omvangrijke gegevensverzamelingen worden door veel gebruikers nauwelijks opgemerkt. Maar als je professioneel werkt met WordPress , moet je begrijpen hoe ze werken. Want: er is geen andere gegevensbron die u laat zien hoe snel uw site laadt, hoe goed uw hoster is, hoe efficiënt uw site laadt en waar de bouwplaatsen van uw site zijn.

En met een beetje oefening kun je elke pagina in één oogopslag en binnen (handgeklokte) 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 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 met de meest frequente laadtijdremmen van WordPress - zijden deze redenen landen steeds weer op de voorste plaatsen.

Onze ervaring met honderden systematische prestatie-analyses met Webpagetest en uitgebreide site-checks leert echter: zelfs in zogenaamd "grondig geoptimaliseerde" WordPress pagina's kunnen keer op keer prestatie-valkuilen worden gevonden. En dit is precies waar het watervaldiagram van pas komt. Omdat het iets bijzonders kan: het laat zien hoe je pagina laadt, welke elementen worden geladen en hoe snel het geheel gaat.

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  optimaliseer Pingdom Waterval
In Pingdom Tools, moet u eerst een beetje scrollen om de watervalgrafiek te bereiken. Het overeenkomstige onderdeel hier heet Bestandsaanvragen. 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 wordt uitgezet op de X-as.
    Watervaldiagrammen zijn chronologisch gestructureerd: Met behulp van de X-as kunt u precies zien wanneer een element begint te laden en hoe lang het duurt om het te laden. Het is deze chronologische structuur die een watervalgrafiek zo waardevol maakt. Op die manier kunt u precies zien waar laadtijd verloren gaat en welke processen u moet aanpakken om uw laadsnelheid te optimaliseren.
  2. Op de Y-as wordt elk HTTP-verzoek geregistreerd.
    In de meeste watervaldiagrammen kunt u op de elementen op de Y-as klikken om extra informatie over hen te krijgen.
  3. Een legende toont welk soort bron is geladen.
    Webpagetest markeert HTML, CSS, afbeeldingen, Flash enz. met kleuren, Pingdom gebruikt hiervoor pictogrammen.
  4. 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.
WordPress optimaliseren: zo analyseer je jouw website in 7 seconden
WordPress  optimaliseer 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 inzichten kun je er uit putten?

Voor prestatie-analyse heeft de 7-seconden analyse zich voor ons bewezen: De grafiek geeft u in één oogopslag informatie over zeven belangrijke factoren voor de laadsnelheid. Deze zeven hacks helpen u precies te begrijpen hoe en hoe snel uw 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 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.

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 zoals voorheen. 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 uw website echter via HTTPS worden geladen, d.w.z. dat hij een SSL-certificaat moet hebben.

Hoe dan ook, onze ervaring heeft uitgewezen dat er geen direct verband bestaat tussen de lengte van een waterval en de werkelijke laadsnelheid. Tenminstetot een bepaalde limiet: Met aanzienlijk meer dan 100 verzoeken is er in de meeste gevallen zeker 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 geven niet echt om de waarden die analyse-instrumenten uitspuwen. Het enige dat voor hen telt is hoe snel de pagina laadt .

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 kunt u deze waargenomen laadtijd ook heel goed via watervaldiagrammen doorgronden. Voor zover wij weten, is Webpagetest het enige gratis programma dat onderscheid kan maken tussen de technisch gemeten laadtijd en de waargenomen door de gebruiker 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  optimaliseer 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 u deze gegevens geeft. Dit is ons niet bekend van Pingdom Tools of GTMetrix. Deze regel is dus alleen van toepassing als u 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 dat het meerdere verzoeken tegelijk kan afhandelen. En je kunt dit duidelijk zien in je waterval diagram. Aangezien de verzoeken hier chronologisch worden verwerkt, beginnen verschillende balken op hetzelfde punt op de X-as wanneer HTTP/2 wordt gebruikt.

WordPress  optimaliseer 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 zo ziet het eruit als afbeeldingen 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.

OptimaliseerWordPress  Identificeer omleidingen
Deze pagina heeft een aantal 302 omleidingen achterelkaar.

Met een watervaldiagram kunt u in één oogopslag zien hoeveel en welke redirects zijn ingesteld. Tussen haakjes, dit helpt ook om forwarding loops op te sporen na een DNS wijziging. Dankzij de gele markers hebben wij meermaals onnodige of zelfs schadelijke omleidingen kunnen opsporen.

Gele lijnen markeren omleidingen.

Tip #7: Herken fouten 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 worden fouten aangeduid 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 tijdens het renderen van de pagina.

Alle tips in één oogopslag met het spiekbriefje

Een watervalgrafiek is waarschijnlijk de meest waardevolle analyse die u kunt krijgen voor uw WordPress pagina's. Het combineert verschillende gegevens die u als site-eigenaar in het oog moet houden: Laadtijden, render volgorde, en foutmeldingen. Gewapend met de tips uit dit artikel, kunt u snel en effectief herkennen en doeltreffend, waar er nog potentieel voor optimalisatie 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 pagina 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.

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.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.