Wat is GTMetrix?

GTmetrix is gemaakt door GT.net, een bedrijf uit Canada. Het is een hulpmiddel voor hun hosting klanten om eenvoudig de prestaties van hun site te bepalen. Samen met Pingdom (handleiding) is het waarschijnlijk een van de bekendste en meest gebruikte snelheidstestprogramma’s op het internet!

Veel cursisten hebben vragen hoe ze de adviezen die ze in hun GTmetrix-rapporten zien, kunnen opvolgen. Vandaar deze handleiding.

Vergeleken met andere ontwikkelaarstools is GTmetrix vrij eenvoudig te gebruiken en beginners kunnen het vrij snel onder de knie krijgen. Het gebruikt een combinatie van snelheid score meten website met Google PageSpeed Insights en YSlow om resultaten en aanbevelingen te genereren.

GTmetrix analyse opties voor testen snelheid WordPress site

De basisversie van GTmetrix is volledig gratis. Je krijgt toegang tot een reeks opties na het aanmelden voor een account. Ze hebben ook premium abonnementen, maar in het bericht van vandaag gebruiken we de gratis versie. Als u een account hebt, kunt u een aantal extra analyse-opties opgeven.

De eerste is de mogelijkheid om de locatie te selecteren waar u uw URL wilt testen. De fysieke locatie die u kiest is eigenlijk heel belangrijk, want die heeft betrekking op waar uw site daadwerkelijk wordt gehost. Hoe lager de latentie, hoe sneller de laadtijden. Momenteel beschikbare locaties zijn:

• Dallas, USA
• Hong Kong, China
• Londen, UK
• São Paulo, Brazilië
• Vancouver, CanadaMumbai, India
• Sydney, Australië

U kunt kiezen welke browser u wilt gebruiken. U kunt testen met Chrome (desktop) en Firefox (desktop). Mobiele versies zijn beschikbaar bij hun premium abonnementen. U kunt ook uw verbindingssnelheid wijzigen om verschillende verbindingstypen te simuleren en te zien hoe die het laden van pagina’s beïnvloeden.

Analyse met behulp van de snelheidstest van GTmetrix

Een website bestaat uit verschillende elementen, zoals HTML, JavaScript, CSS, afbeeldingen en video’s. Elk van deze genereert verzoeken om weer te geven wat u op uw pagina ziet. Hoe meer aanvragen, hoe langzamer de pagina laadt. Dit is niet altijd het geval, maar in de meeste gevallen wel.

Hieronder splitsen we elk onderdeel van GTmetrix op en leggen we in meer detail uit wat de informatie betekent voor de algehele siteprestaties en wat u met de aanbevelingen kunt doen. Denk niet obsessief aan prestaties, maar concentreer u op het sneller maken van uw site.

• GTmetrix samenvatting
• Prestaties
• Structuur
• Waterval grafiek
• Video
• Geschiedenis
• GTmetrix samenvatting (prestatieresultaten en details)

Ik heb deze verderop uitgelegd.

GTmetrix samenvatting (prestatieresultaten en details)

Wanneer u uw WordPress site door GTmetrix laat lopen, genereert het een prestatierapport met de ‘GTmetrix Grade’ en ‘Web Vitals’ resultaten.

De GTmetrix Grade, oftewel uw score, wordt berekend op basis van twee maatstaven: prestatie (Performance) en structuur (Structure).

• GTmetrix Performance is de prestatiescore van de Lighthouse website audit tool
• De structuur GTmetrix is een merkgebonden prestatiestatistiek die algemene plaatsprestaties meet.

In 2020 introduceerde Google een uniforme reeks statistieken voor websiteprestaties en gebruikerservaring, Web Vitals genaamd. Web Vitals bestaat uit een aantal statistieken, maar de statistieken waarmee GTmetrix rekening houdt zijn Largest Contentful Paint (LCP), Total Blocking Time (TBT) en Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is de tijd die het grootste deel van uw site nodig heeft om te laden. Voor sommige sites kan het LCP een grote uitgelichte afbeelding zijn, terwijl het op andere sites meer om de hoofdtekst gaat.

Total Blocking Time (TBT)

Total Blocking Time (TBT) is de tijd dat een pagina als het ware geblokkeerd is voordat een gebruiker er iets mee kan doen omdat de pagina nog niet voldoende geladen is. “Render-blocking” CSS en JS kunnen een enorme impact hebben op TBT.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) verwijst naar het verschuiven van elementen tijdens het laden van de pagina. Zo kan de lay-out van een pagina met ingesloten tweets drastisch veranderen wanneer de pagina wordt geladen.

Voorbeeldtest

In ons voorbeeld gebruiken we een site die we willen optimaliseren.
Om te testen vul je je url in.

In onze eerste snelheidstest registreerde onze site de volgende statistieken.

• GTmetrix Grade – C
• GTmetrix Performance – 67%
• GTmetrix Structure – 91%
• LCP – 3.1s
• TBT – 0ms
• CLS – 0

Na optimalisatie

We hebben de website geoptimaliseerd. Vervolgens hebben we nog een test uitgevoerd en nu is de GTmetrix-score een ‘A’!
Wat heeft dit ermee te maken? Belangrijke tips en uitleg volgens hieronder.

U kunt dit zelf controleren door de snelheidstest van GTmetrix verschillende keren op uw website uit te voeren.

Overzicht GTMetrix

De overzichtspagina van GTmetrix bevat ook een snelheidsweergave, die een tijdlijn toont van de belangrijkste gebeurtenissen tijdens het laden van de pagina.

In de screenshot zie je de TTFB, de FCP, de LCP, de laadtijd, de tijd tot de site interactief wordt, en de tijd die het duurt voor de pagina volledig geladen is.

Prestatie overzicht

Het tabblad GTmetrix Performance volgt, met een aantal nuttige statistieken die zijn afgeleid van de prestatiegegevens van Lighthouse.

Naast LCP, TBT en CLS die op de overzichtspagina worden weergegeven, toont het onderdeel Prestatiecijfers ook Snelheidsindex (SI), Tijd tot Interactief (TTI) en Eerste Inhoudelijke Content (FCP).

GTmetrix Lighthouse prestatiestatistieken

Hoewel het onderdeel Prestatiecijfers niet precies laat zien wat er moet worden opgelost, geeft het een mooi overzicht van de belangrijkste gegevens over de gebruikerservaring die kunnen worden verbeterd.

Verderop op de pagina toont GTmetrix ook enkele meer traditionele “Browser Timing” statistieken, waaronder Onload Time, Time to First Byte, Fully Loaded Time en andere. In het verleden waren deze traditionele maatstaven zeer belangrijk.

Aangezien Google nu werkt met gestandaardiseerde statistieken en Web Vitals, raden wij aan deze te gebruiken. In de meeste gevallen leidt optimalisatie voor Web Vitals ook tot goede statistieken over de browsertijd.

Structuur tab in GTMetrix

In het tabblad “Structuur” van GTmetrix kunt u specifieke problemen bekijken die de prestaties van uw site beïnvloeden. Deze pagina is zeer nuttig omdat hij nuttige informatie geeft zoals “verwijder bronnen die rendering blokkeren” en “minify CSS” die gebruikt kunnen worden om de site te optimaliseren.

We zullen proberen de meest voorkomende en wijdverbreide problemen te bespreken waar WordPress sites mee te kampen hebben.

Vergeet niet dit bericht te bookmarken, want we zullen het voortdurend bijwerken. Over het algemeen zult u merken dat uw site beter presteert wanneer u de punten op uw site verbetert.

Waterval tab GTMetrix

Het waterval schema van GTmetrix toont alle individuele webpagina aanvragen. Vervolgens kunt u elk verzoek analyseren om te begrijpen wat vertragingen en prestatieproblemen op uw site veroorzaakt. Hieronder vindt u een samenvatting en/of een meer gedetailleerde definitie van wat elke kleur betekent.

Aansluiting (groen)

De verbindingstijd in GTmetrix verwijst naar de TCP verbinding of de totale tijd die nodig is om een TCP verbinding te maken. We zullen u de technische details besparen, maar het gaat in wezen om een communicatiemethode tussen de host/cliënt en de server die moet plaatsvinden.

Send – Zenden (rood)

De verzendtijd is de tijd die de webbrowser nodig heeft om gegevens naar de server te sturen.

Wachten (paars)

De wachttijd in Pingdom verwijst naar de tijd tot de eerste byte, ook bekend als verbeteren laadtijd pagina“>TTFB in andere tools. TTFB is een maat die wordt gebruikt als indicator voor de reactietijd van een webserver of een andere netwerkbron. In het algemeen is elke waarde van minder dan 100 ms aanvaardbaar en een goede TTFB. Als uw website de 300-400ms nadert, kan er iets mis zijn met uw server of kan het tijd zijn om te upgraden naar een betere web stack. Zoals u in onze onderstaande test kunt zien, bedroeg de reactietijd ongeveer 100ms, wat geweldig is.

Enkele eenvoudige manieren om TTFB te verminderen zijn ervoor te zorgen dat uw host een goede cache heeft en een CDN gebruikt. Bekijk ons volledige artikel over alle manieren om TTFB op je WordPress site te verminderen.

Reception (grijs)

De ontvangsttijd is de tijd die de webbrowser nodig heeft om gegevens van de server te ontvangen.

Event tijden

Elke keer dat u een pagina opvraagt, zijn er momenten waarop dingen worden weergegeven en geladen.

• First Paint (groene lijn):
  het eerste punt waarop de browser enige vorm van rendering van de pagina uitvoert, zoals het weergeven van de achtergrondkleur.
• DOM Loaded (blauwe lijn):
  het punt waarop het DOM (Document Object Model) klaar is.
• Onload (rode lijn):
  wanneer de verwerking van de pagina is voltooid en alle paginabronnen (afbeeldingen, CSS, enz.) zijn gedownload.
• Volledig geladen (paarse lijn):
  het punt nadat de Onload-gebeurtenis is geactiveerd en er gedurende 2 seconden geen netwerkactiviteit is geweest.

Video tab GTMetrix

Heb je niet echt nodig. Deze functie is alleen nuttig voor het oplossen van visuele problemen die alleen voorkomen in bepaalde combinaties van browser en schermgrootte.

Historie tab GTMetrix

Op het tabblad History of Geschiedenis kunnen alle vorige snelheidstests worden bekeken. Er is een limiet aan het aantal saves in gratis accounts. U kunt ook een URL volgen waarmee u de prestaties in de tijd kunt volgen en veranderingen kunt zien.

Een handige functie is de mogelijkheid om eerdere rapporten te selecteren en met elkaar te vergelijken. Dit kan zeer nuttig zijn, vooral bij optimalisaties op de site om te zien of er verbeteringen zijn. Vergeet niet dat je soms ook kunt over-optimaliseren.

Betaalde functies GTMetrix

GTmetrix testformaat opties

Extra opties zijn de mogelijkheid om een video te maken. Dit kan helpen bij het oplossen van problemen, omdat u kunt zien hoe de pagina wordt weergegeven. AdBlock Plus is een coole functie. Als u een extern advertentienetwerk op uw site hebt, zoals Google Adsense, kunt u deze optie inschakelen om de volledige impact van advertenties op de laadtijden te zien.

Extra GTmetrix opties

Extra opties zijn het stoppen van de testbelasting (waarover later meer), de mogelijkheid om een cookie mee te sturen met het verzoek, het gebruik van HTTP-authenticatie, de mogelijkheid om URL’s op te nemen in de blokkeer- en toestemmingslijst, schermresolutie en pixelverhouding van het apparaat, en user agent override.

Meer links over GTMetrix

Meer links over GTMetrix

GTMetix prestaties zelf verbeteren of laten doen

Hierboven dus veel tips om de GTMetix prestaties zelf te verbeteren. Vind je het te ingewikkeld of wil je het laten doen. Dat kan. Neem rechtstreeks contact op met Arthur en hij zal het fixen.