Het hart van elke goede prestatie analyse

Jan Hornung Laatst bijgewerkt op 15.01.2021
4 Min.
OptimaliserenWordPress

Voor een succesvolle online business of blog is het essentieel dat u weet hoe snel uw pagina laadt. En hoe je WordPress daarvoor kunt optimaliseren. Maar goede analyse-instrumenten leveren tonnen gegevens op. Vooral de waterval grafieken zijn niet gemakkelijk te lezen. Vandaag laat ik u drie eenvoudige trucs zien waarmee u met één blik meer uit uw prestatie-analyse kunt halen en WordPress op de juiste plaatsen kunt optimaliseren.

Toen ik me voor het eerst begon te verdiepen in het onderwerp WordPress optimalisatie, gebruikte ik ook voor het eerst webpagetest.org. Op dat moment, was ik letterlijk weggeblazen door de resultaten. Vooral het watervaldiagram lijkt in eerste instantie een nauwelijks grijpbaar en ordenend gegevensbeest: Kleuren, nummers, de lengte van de staven, hun volgorde, alles heeft een betekenis.

Daarom kunnen de grafieken u ook een heleboel waardevolle dingen over uw site vertellen. Als je weet waar je naar moet zoeken.

Vandaag ga ik je laten zien hoe je met drie eenvoudige trucs belangrijke kerngegevens over de laadtijd van je pagina in één oogopslag kunt vastleggen en zo WordPress op de juiste plaatsen kunt optimaliseren.

Om precies te zijn, ik zal het je laten zien:

  • hoe herken je een trage webserver
  • hoe ongecomprimeerde beelden en te grote bestanden te herkennen
  • hoe te weten of uw server HTTP/2 ondersteunt

Imitatie aanbevolen

Veel van de gegevens die ik je vandaag laat zien, komen van webpagetest.org. De watervaldiagrammen van deze tool zijn bijzonder complex, maar geven ook veel inzicht in uw site.

Als u de testresultaten wilt volgen, klikt u hier en bekijkt u de gegevens in hun geheel in Webpagetest.

Als u uw eigen site wilt optimaliseren met behulp van een analyse van Webpagetest, moet u in gedachten houden dat elke testrun slechts een momentopname is. Als u echt betrouwbare resultaten wilt, raad ik u aan ten minste drie tests te doen. Op die manier vermindert u de kans op het meten van uitschieters en krijgt u een betere database voor belangrijke beslissingen.

OptimaliserenWordPress  - Watervaldiagram
Dit is slechts het eerste derde deel van het watervaldiagram voor raidboxes.de. En hier wordt het al duidelijk dat het schema niet gemakkelijk te doorgronden is.

Hoe herken je een trage webserver

De belangrijkste waarde voor het evalueren van de responstijd van uw server is de zogenaamde Time to First Byte (TTFB). De TTFB is de tijd die verstrijkt tot de eerste databyte van de webserver wordt gedownload. Gedurende deze tijd gebeurt er niets. Tenminste niets dat uw bezoeker zou kunnen opvatten als een pagina laden. Daarom is het belangrijk de tijd tot de eerste byte zo laag mogelijk te houden.

Kijk naar de eerste query van je waterval diagram. Dit moet zo kort mogelijk zijn. Bij voorkeur minder dan 200 milliseconden.

Het eerste verzoek van uw webpagina moet zo kort mogelijk zijn. Het beste onder de 200 ms.

Dit voorbeeld illustreert wat ik bedoel: Vóór de overstap naar ons had deze klantensite soms een TTFB van meer dan 3,5 seconden. Na de verhuizing, was het ver onder de 200 ms. Vooral het lichtblauwe gebied van het eerste verzoek is massaal afgenomen.

Ervoor:

OptimaliseerWordPress  - Voorbeeld voor extreem lange tijd tot de eerste byte

Met RAIDBOXES:

OptimaliseerWordPress  - Tijd tot de eerste byte met RAIDBOXES

Dus als u regelmatig een zeer hoge tijd tot eerste byte meet op uw WordPress projecten, zou een optimalisatiemaatregel zijn om van host te veranderen of uw hostingplan dienovereenkomstig te upgraden.

Te grote afbeeldingen en bronnen opsporen

Elke lijn van je watervaldiagram stelt een zogenaamd verzoek voor. Dit is een verzoek van de browser aan de webserver. Dit verzoek omvat het downloaden van datapakketten, bijvoorbeeld afbeeldingen. In het onderstaande voorbeeld komt het paarse deel van de balken overeen met de downloadtijd.

OptimaliseerWordPress  - detecteer te grote afbeeldingen

Zoals u kunt zien, doen de afbeeldingen op deze pagina er erg lang over om te laden - bijna 12, drie en bijna negen seconden. Een duidelijke indicatie voor ongecomprimeerde beelden.

Lange paarse balken zijn een duidelijke indicatie van een gebrek aan beeldcompressie.

Webpagetest laat je voor elk verzoek precies zien om welke bron het gaat. Zo kunt u gemakkelijk uitvinden welke afbeelding van uw WordPress pagina te groot is en geoptimaliseerd moet worden.

Dit geldt natuurlijk ook voor alle andere bestandstypen die Webpagetest weergeeft. Bijvoorbeeld CSS en JavaScript. Deze bestanden kunnen ook worden gecomprimeerd, waardoor de laadtijd van uw pagina nog korter wordt.

HTTP/2 herkennen

Als u wilt weten of uw WordPress -projecten baat hebben bij de extra snelle HTTP/2-standaard, kunt u dat met één blik op het watervaldiagram te weten komen.

Als de verzoeken van uw pagina parallel worden verwerkt, dan is HTTP/2 actief.

En deze zin verduidelijkt al heel mooi wat HTTP/2 eigenlijk doet. Als uw site SSL-gecodeerd is, dan kunt u met HTTP/2 meerdere webserververzoeken tegelijk verwerken. Dit verkort de totale laadtijd.

Hier is een lege WordPress pagina zonder SSL:

OptimaliseerWordPress  - Het watervaldiagram van een WordPress  pagina zonder HTTP/2

En hier dezelfde pagina met SSL certificaat, dus ook met HTTP/2:

OptimaliseerWordPress  - Watervaldiagram van een lege WordPress  pagina met HTTP/2

Ziet u: in het eerste geval worden de afzonderlijke verzoeken na elkaar geladen. In het tweede geval worden zij echter meestal gelijktijdig belast.

Toegegeven, er is hier geen WordPress -zijdige optimalisatiemogelijkheid. Het beste kunt u uw hostingprovider vragen of HTTP/2 wordt gebruikt.

Conclusie: Wees niet bang voor het schema!

Met een beetje oefening en de juiste kennis kunt u veel informatie uit een watervalgrafiek halen. U kunt zien of uw pagina baat heeft bij bepaalde technologieën, hoe snel uw webserver reageert en of er laadtijdremmen op uw pagina verborgen zijn. Als u uw WordPress pagina's grondig wilt analyseren en optimaliseren, kunt u niet om de watervaldiagrammen heen.

Ken je nog meer trucs om snel typische laadtijdremmen te identificeren? Geef het dan altijd aan mij!

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

Reacties op dit artikel

Laat een opmerking achter

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