Een diepe duik in de GTmetrix Speed Test Tool

Er zijn veel opties die je als website-eigenaar hebt als het gaat om het uitvoeren van snelheidstests om de prestaties van je website te checken. Eerder zijn we dieper ingegaan op de Pingdom tool. Vandaag willen we bespreken hoe we de gegevens van Pingdom, de populaire tool om de snelheid van websites te testen, beter kunnen gebruiken en begrijpen. Dergelijke tools zijn afhankelijk van beoordelingssystemen en scores, samen met waarschuwingen over wat er mogelijk mis is op jouw site. Soms kunnen deze ronduit verwarrend zijn en daarom kan het nemen van de tijd om te interpreteren wat ze werkelijk betekenen je niet alleen helpen jouw scores te verhogen maar ook de prestaties van jouw site, en dat is wat er echt toe doet.

GTmetrix is ontwikkeld door GT.net, een bedrijf dat is gevestigd in Canada, als een hulpmiddel voor klanten van hun hosting om eenvoudig de prestaties van hun site te bepalen. Naast Pingdom is het waarschijnlijk een van de bekendste en meest gebruikte snelheidstesttools op het internet van vandaag de dag! De reden dat we dit artikel schrijven is dan ook omdat we veel Kinsta klanten hebben die ons vragen hoe ze het advies kunnen opvolgen dat ze in hun GTmetrix rapporten zien. In vergelijking met andere ontwikkelaarstools is GTmetrix vrij eenvoudig te gebruiken en kan de beginner het vrij snel oppikken. Het gebruikt een combinatie van Google PageSpeed Insights en YSlow om scores en aanbevelingen te genereren.

GTmetrix analyse-opties

De basisversie van GTmetrix is volledig gratis en je krijgt toegang tot een aantal opties door je aan te melden voor een account. Ze hebben ook premium-abonnementen maar in de post van vandaag zullen we de gratis versie gebruiken. Als je een account hebt kan je een aantal aanvullende analyse-opties specificeren.

De eerste is de mogelijkheid om de locatie te kiezen waar je jouw URL wilt testen. De fysieke locatie die je kiest is eigenlijk heel belangrijk omdat deze betrekking heeft op waar jouw website daadwerkelijk wordt gehost. Hoe minder latentie, hoe sneller uw laadtijden. Momenteel beschikbare locaties zijn onder meer:

Dallas, USA
Hong Kong, China
London, UK
Mumbai, India
Sydney, Australië
São Paulo, Brazilië
Vancouver, Canada

Je kan zelf kiezen welke browser je wilt gebruiken. Je kan testen met Chrome (desktop) en Firefox (desktop). Mobiele versies zijn beschikbaar in hun premium-abonnementen. Ze stellen je ook in staat om de verbindingssnelheid te wijzigen, wat betekent dat je verschillende verbindingstypen kunt simuleren om te zien hoe deze van invloed zijn op het laden van jouw pagina.

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

Aanvullende opties zijn onder meer het stoppen van de test-onload (waar we later op ingaan), het kunnen verzenden van een cookie samen met jouw verzoek, het gebruik van HTTP authenticatie, de mogelijkheid om URL’s op de blokkeer- en toestaan-lijst te zetten, schermresolutie en pixelverhouding van het apparaat, en user-agent overrides.

Analyseren met de GTmetrix Speed Test Tool

Een webpagina bestaat uit verschillende items, zoals HTML, JavaScript, CSS, afbeeldingen en video’s. Elk van deze genereert verzoeken om te renderen wat jij op jouw website ziet. Meestal geldt hoe meer verzoeken je hebt, hoe langzamer de website wordt geladen. Dat is niet altijd het geval, maar het klopt meestal wel.

Hieronder gaan we elke GTmetrix sectie opsplitsen en in meer detail uitleggen wat de informatie betekent, aangezien het betrekking heeft op de algehele prestaties van jouw website en wat je met de aanbevelingen kan doen. Denk eraan om niet te veel geobsedeerd te raken door de scores maar je te richten op het daadwerkelijk sneller maken van jouw site.

GTmetrix samenvatting (prestatiescores en details)

Wanneer je jouw WordPress website door GTmetrix haalt, genereert het een prestatierapport met jouw “GTmetrix Grade” en “Web Vitals”.

De GTmetrix Grade, jouw score dus, wordt berekend op basis van twee statistieken: prestatie Performance) en structuur (Structure).

GTmetrix Performance is de prestatiescore van de Lighthouse site audit tool
GTmetrix Structure is een eigen prestatiestatistiek die de algehele prestaties van een pagina meet.

In 2020 introduceerde Google een gestandaardiseerde set statistieken rond webprestaties en gebruikerservaring, Web Vitals genaamd. Web Vitals bestaan uit een verscheidenheid aan statistieken maar degene waar GTmetrix rekening mee houdt, zijn Largest Contentful Paint (LCP), Total Blocking Time (TBT) en Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) is de hoeveelheid tijd die nodig is om het grootste deel van jouw pagina te laden. Voor sommige sites kan het LCP een grote uitgelichte afbeelding zijn, terwijl het op andere sites meer om hoofdtekst gaat.
Total Blocking Time (TBT) is de hoeveelheid tijd dat een pagina als het ware is geblokkeerd voordat een gebruiker er iets mee kan doen, doordat de pagina nog niet genoeg is geladen. “Render-blocking” van CSS en JS kan een enorme impact hebben op TBT.
Cumulative Layout Shift (CLS) verwijst naar het verschuiven van elementen terwijl een pagina wordt geladen. De lay-out van een pagina met ingesloten tweets kan bijvoorbeeld drastisch verschuiven naarmate de pagina wordt geladen.

In ons voorbeeld gebruiken we ons speciale voorbeelddomein kinstalife.com, dat wordt gehost op Kinsta. In onze eerste snelheidstest registreerde onze site de volgende statistieken.

GTmetrix Grade – B
GTmetrix Performance – 85%
GTmetrix Structure – 83%
LCP – 1.0s
TBT – 0ms
CLS – 0

GTmetrix-snelheidstest voor kinstalife.com.

We hebben toen nog een test gedaan en nu is onze GTmetrix Grade “A”! Waar heeft dat allemaal mee te maken? Je kan het zelf ook zien als je je website meerdere keren door de GTmetrix snelheidstesttool laat lopen. Een van de redenen waarom dit gebeurt, is vanwege caching, zowel DNS caching als servercaching. In de watervalanalyse verderop in dit artikel leggen we uit waarom dit zo is.

De GTmetrix overzichtspagina bevat ook een snelheidsvisualisatie, die een tijdlijn toont met belangrijke gebeurtenissen tijdens het laden van een pagina. In de onderstaande schermafbeelding zie je voor kinstalife.com de TTFB, FCP, LCP, onloadtijd, tijd tot de site interactief wordt en de tijd dat het kost voor de pagina om volledig te laden.

Onderaan de overzichtspagina vind je ook de secties Top Issues en Page Details. Onder Top Issues zie je een lijst met items met hoge prioriteit die moeten worden opgelost, terwijl Page Details uitsplitsingen in percentages en bestandsgrootte van jouw pagina laat zien.

Problemen met GTmetrix en paginadetails.

Performance

De volgende is het GTmetrix tabblad Performance dat een aantal nuttige statistieken toont die afkomstig zijn van de prestatiegegevens van Lighthouse. Naast de LCP, TBT en CLS die op de overzichtspagina worden weergegeven, toont de sectie Performance Metrics ook de Speed Index (SI), de Time to Interactive (TTI) en de First Contentful Paint (FCP).

Prestatiestatistieken van GTmetrix Lighthouse.

Hoewel het gedeelte Performance Metrics je niet precies laat zien wat je precies moet corrigeren, geeft het wel een mooi overzicht van de belangrijkste meetgegevens van gebruikerservaringen die je kan verbeteren.

Verderop op de pagina toont GTmetrix ook een paar meer traditionele “Browser Timing” -statistieken, waaronder Onload Time, Time to First Byte, Fully Loaded Time en meer. In het verleden waren deze traditionele statistieken erg belangrijk. Echter, gezien Google de weg heeft vrij gemaakt met gestandaardiseerde statistieken en Web Vitals raden we aan deze te gebruiken. In de meeste gevallen zal je merken dat optimalisatie voor Web Vitals ook resulteert in goede browsertimingstatistieken.

Structure

In het tabblad GTmetrix “Structure” kan je specifieke problemen bekijken die de prestaties van jouw site beïnvloeden. Deze pagina is erg handig omdat het je bruikbare informatie biedt zoals “eliminate render-blocking resources” en “minify CSS” waarmee je kan om je site te optimaliseren.

We zullen proberen de meest voorkomende en populaire problemen te bespreken waarmee eigenaren van WordPress sites worstelen. Zorg ervoor dat je ook een bladwijzer van dit bericht maakt aangezien we het voortdurend zullen bijwerken. Over het algemeen zal je zien dat je site beter presteert wanneer je de punten op je site verbetert.

Serve Scaled Images

Als het gaat om het werken met afbeeldingen op jouw website, moet je altijd proberen ze op schaal te uploaden. Wat je namelijk wil voorkomen, is dat je de afmetingen van je afbeeldingen door CSS laat wijzigen. Als je dat laatste doet, krijg je de aanbeveling voor het gebruiken van verkleinde afbeeldingen: serve scaled images. Als je WordPress gebruikt, worden jouw afbeeldingen standaard verkleind wanneer je ze uploadt naar de mediabibliotheek. Deze instellingen zijn te vinden onder ‘Instellingen> Media’. Je wilt ervoor zorgen dat de maximale breedte dicht bij de breedte van jouw site ligt. Op deze manier probeert CSS niet om het formaat van jouw afbeelding te verkleinen zodat dat deze erin past. Je kan ze ook automatisch vergroten of verkleinen met een plugin voor beeldoptimalisatie.

Inline Small CSS

Het inlinen van CSS wordt meestal niet aanbevolen omdat dit de algehele downloadgrootte van jouw paginaverzoek vergroot. Als jouw site echter klein is, met minimale verzoeken, kan dit de prestaties verbeteren.

Om CSS gemakkelijk in te lijnen, kan je een gratis plugin zoals Autoptimize gebruiken. Vink hiervoor de “Inline all CSS?” optie aan en zorg er vervolgens voor dat je de aanvullende CSS bestanden die je niet inlijnt, hebt uitgesloten.

Inline Small JavaScript

Net als met het inlinen van kleine CSS, geldt hetzelfde voor inlining van kleine JavaScript. Het wordt meestal niet aanbevolen omdat het de algehele downloadgrootte van jouw paginaverzoek zal vergroten. Als jouw site echter klein is, met weinig verzoeken, kan dit jouw prestaties verbeteren. Nogmaals, je kan de JavaScript instellingen van Autoptimize gebruiken.

Leverage Browser Caching

Gebruikmaken van browsercaching is een veel voorkomende aanbeveling waar mensen mee worstelen. De aanbeveling wordt gegenereerd omdat je niet de juiste HTTP cacheheaders op jouw webserver hebt. Bekijk ons uitgebreide artikel over het oplossen van de “Leverage browser caching” waarschuwing. Je kan dit alleen oplossen voor bronnen die je zelf beheert. Als je dit bijvoorbeeld op advertentienetwerken van derden ziet, kan je niets doen.

Serve Resources From a Consistent URL

Als je de aanbeveling ziet om bronnen te leveren vanuit een consistente URL, is de kans groot dat je identieke bronnen hebt die vanaf dezelfde URL worden geleverd. Dit kan vaak gebeuren als er querystrings bij betrokken zijn. Bekijk hoe je querystrings uit statische bronnen verwijdert. Als ze eenmaal verdwenen zijn hoeft het niet langer twee keer te laden.

Lever bronnen vanuit een consistente URL

Defer Parsing of JavaScript

JavaScript en CSS zijn standaard ingesteld om te “render-blocken”. Dit betekent dat ze kunnen voorkomen dat de webpagina volledig wordt weergegeven totdat ze zijn gedownload en verwerkt door de browser. Het attribuut “defer” vertelt de browser om het downloaden van de bron uit te stellen totdat de HTML parsing is voltooid. Een paar eenvoudige manieren om dit op te lossen is door de gratis Autoptimize of Async JavaScript plugins te gebruiken. Zorg ervoor dat je ons uitgebreid artikel leest over hoe je render-blocking in JavaScript en CSS kan elimineren.

Voor een uitgebreide uitleg, lees: Zo los je de waarschuwing “Defer parsing of JavaScript” op in WordPress (4 methoden).

Minificeren van CSS en JavaScript

Minificatie is in wezen het verwijderen van alle onnodige tekens uit de broncode zonder de functionaliteit ervan te wijzigen. Dit kunnen regeleinden, lege ruimte, inspringingen, enz. zijn. Door dit te doen, kan het bytes aan gegevens besparen en het downloaden, parseren en uitvoeren versnellen.

Nogmaals, de gratis Autoptimize plugin is hier geweldig voor. Zorg ervoor dat de “Optimize JavaScript Code” en “Optimize CSS Code” beide zijn aangevinkt. Als je een grote site hebt, wil je misschien ook spelen met de geavanceerde instellingen eronder omdat sommige de prestaties van je site kunnen schaden. Het inlinen of combineren van CSS en JavaScript op grote sites wordt meestal niet aanbevolen. Dit is waar HTTP/2 het verschil kan maken.

Als je een Kinsta klant bent, kun je gebruikmaken van de codeminificatiefeature die rechtstreeks in het MyKinsta dashboard is ingebouwd. Dit stelt klanten in staat om snel en gemakkelijk automatische CSS en JavaScript minificatie in te schakelen met een simpele klik, waardoor hun sites zonder handmatige inspanning worden versneld.

Optimize Images

Volgens HTTP Archive bestaat het ‘gewicht’ van de gemiddelde webpagina voor 66% uit afbeeldingen. Dus als het gaat om het optimaliseren van je WordPress site, zijn afbeeldingen overduidelijk de eerste plaats waar je moet beginnen! Afbeeldingen zijn wat dit betreft belangrijker dan scripts en lettertypen.

In een perfecte wereld moet elke afbeelding worden gecomprimeerd en geoptimaliseerd voordat deze naar WordPress wordt geüpload. Maar helaas is dat gewoon niet realistisch. Daarom raden we aan om een goede plugin voor afbeeldoptimalisatie te gebruiken. Dit helpt automatisch de afbeeldingen te comprimeren, de afmetingen ervan te wijzigen en ervoor te zorgen dat ze licht van gewicht zijn en snel op jouw site worden geladen. Vergeet vooral niet om ons diepgaande artikel te lezen over hoe je afbeeldingen kan optimaliseren voor gebruik op het internet.

Reduce Initial Server Response Time

Voor WordPress is de belangrijkste boosdoener voor trage initiële serverreactietijden het gebrek aan paginacaching. Zonder paginacaching gebruikt WordPress PHP om dynamisch pagina’s op te bouwen voor elk individueel verzoek, wat betekent dat het snel overbelast kan raken door verzoeken. Als paginacaching is ingeschakeld, kan jouw site vooraf gegenereerde HTML bestanden aanbieden, wat veel sneller en schaalbaarder is dan het gebruik van PHP om aan elk paginaverzoek te voldoen.

Als je gehost wordt op Kinsta, hoef je je geen zorgen te maken over paginacaching want wij zorgen daarvoor met onze Nginx configuratie. Als jouw WordPress host paginacaching niet ondersteunt, kan je een cacheplugin zoals WP Rocket of W3 Total Cache installeren. Om de reactietijd van de server nog verder te verkorten, raden we aan om Cloudflare APO te integreren met jouw WordPress site. Deze innovatieve optimalisatieservice van Cloudflare verspreidt de HTML pagina’s van jouw site over de hele wereld, waardoor de reactietijd van de server wereldwijd kan worden verkort.

Minify HTML

Net als CSS en JavaScript kan ook HTML worden verkleind om onnodige tekens te verwijderen en bytes aan gegevens te besparen om de uitvoeringstijd te versnellen.

De gratis Autoptimize plugin is ook hier geweldig voor. Schakel gewoon de optie “Optimize HTML Code” in.

autoptimize minify html — Autoptimize optimize HTML code

Enable GZIP Compression

GZIP is een bestandsindeling en een softwaretoepassing die wordt gebruikt voor bestandscompressie en decompressie. GZIP compressie is aan de serverzijde ingeschakeld en zorgt voor een verdere verkleining van de grootte van HTML-, stylesheets- en JavaScript-bestanden. Het werkt niet op afbeeldingen omdat deze al op een andere manier zijn gecomprimeerd. Sommige hebben tot 70% reducties gezien als gevolg van compressie. Het is waarschijnlijk een van de gemakkelijkste optimalisaties die je kan maken als het gaat om WordPress. Opmerking: GZIP compressie is standaard ingeschakeld op alle Kinsta servers.

Om GZIP-compressie in Apache in te schakelen, voeg je eenvoudig de volgende code toe aan je .htaccess bestand.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Als je NGINX gebruikt voeg je eenvoudig het volgende toe aan jouw nginx.conf bestand.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Bekijk ook ons uitgebreide artikel over het inschakelen van GZIP compressie.

Minimize Redirects

Door HTTP omleidingen van de ene URL naar de andere te minimaliseren verkorten we extra RTT’s en wachttijd voor gebruikers. Bekijk ons bericht over WordPress redirects waarin we ontdekten dat 2 slechte omleidingen de laadtijden van de site met 58% verhoogden! Kortom, WordPress redirects vertragen jouw site. Daarom is het de moeite waard om de tijd te nemen om het aantal redirects van jouw site te minimaliseren.

Specify a Cache Validator

De “specify a cache validator” aanbeveling verschijnt wanneer er HTTP cachingheaders ontbreken. Deze moeten worden opgenomen in elke respons van de origin server aangezien ze allebei de lengte van de cache valideren en instellen. Als de headers niet worden gevonden, genereert het elke keer een nieuw verzoek voor de bron waardoor de belasting op de server toeneemt. Door gebruik te maken van cachingheaders zorg je ervoor dat volgende verzoeken niet van de server hoeven te worden geladen, waardoor op bandbreedte wordt bespaard en de prestaties voor de gebruiker worden verbeterd. En vergeet niet dat je dit niet kunt oplossen op bronnen van derden die je niet zelf beheert.

Er zijn een aantal verschillende HTTP cachingheaders bij we kunnen gebruiken om deze aanbeveling op te volgen. Bekijk ons uitgebreide artikel over het specificeren van een cachevalidator.

Specify Image Dimensions

Net zoals je CSS je afbeeldingen niet moet laten verkleinen, moet je ook afbeeldingsafmetingen specificeren. Dit betekent dat je de breedte en hoogte in jouw HTML code moet opnemen.

Onjuist

<img src="https://domain.com/images/image1.png">

Juist

<img src="https://domain.com/images/image1.png" width="200" height="100">

Remove Query Strings From Static Resources

Vaak hebben je CSS en JavaScript bestanden een versienummer aan het einde van de URL, zoals domein/style.css?ver=4.6. Sommige servers en proxyservers zijn niet in staat deze queryreeksen te cachen, ook al is er een cache-control:public header aanwezig. Dus door ze te verwijderen, kan je soms je caching verbeteren. Dit kan eenvoudig worden gedaan met code of gratis WordPress plugins.

Bekijk ons uitgebreide artikel over het verwijderen van querystrings uit statische bronnen en vergeet niet dat je dit niet kunt oplossen op bronnen van derden die je niet zelf beheert.

Querystrings uit statische bronnen verwijderen

Specificatie van een variabele: accept-coderingsheader-aanbeveling

Dit is een HTTP header en moet worden opgenomen in elke respons van de origin server omdat het de browser informeert of de client gecomprimeerde versies van de content kan verwerken. Als GZIP-compressie is ingeschakeld, is dit meestal ook opgelost. Maar zorg ervoor dat je ons diepgaande bericht leest over hoe je de specificatie van een variabele: accept-coderingsheader-aanbeveling kan oplossen. En nogmaals, je kan dit alleen oplossen voor bronnen die je zelf beheert.

GTmetrix watervaldiagram

Het GTmetrix watervaldiagram toont alle individuele verzoeken op jouw webpagina (zoals hieronder weergegeven). Je kan vervolgens elk verzoek analyseren om te zien wat de oorzaak is van vertragingen en prestatieproblemen op jouw site. Hieronder kan je een meer diepgaande samenvatting en/of definitie vinden van wat elk van de kleuren betekent voor elk verzoek.

Blocking (bruin)

Wanneer een browser een webpagina laadt, voorkomen JavaScript- en CSS-bronnen meestal dat de webpagina wordt weergegeven totdat ze zijn gedownload en verwerkt door de browser. Deze vertraging wordt weergegeven als een blokkering in de GTmetrix watervaldiagram. Bekijk voor meer informatie ons uitgebreid artikel over het elimineren van render-blocking op JavaScript en CSS.

DNS lookup (blauwgroen)

Je kan DNS lookup zien als een telefoonboek. Er zijn servers die Domain Name Servers worden genoemd en zij bevatten informatie over jouw website en naar welk IP adres bezoekers moeten worden gestuurd. Wanneer je je website voor de eerste keer test met Pingdom, voert deze een nieuwe look-up uit en vraagt de testtool de DNS records op om de benodigde IP informatie te verkrijgen. Dit resulteert vaak in extra opzoektijd.

Wanneer je de website vaker test met Pingdom wordt de DNS in het cachegeheugen opgeslagen omdat de IP informatie nu bekend is en deze dus niet opnieuw opgezocht hoeft te worden. Dit is een van de redenen waarom je misschien ziet dat je website sneller wordt getest nadat je deze meerdere keren door GTmetrix hebt gehaald. Zoals je in de onderstaande schermafbeelding kan zien was de DOC look-uptijd van de tweede DNS test 0ms. Het zal je misschien niet verbazen, maar deze sectie wordt vaak verkeerd geïnterpreteerd. We raden aan om jouw test meerdere keren uit te voeren en het gemiddelde te nemen, tenzij je DNS als onderdeel van jouw rapport wilt hebben, in welk geval je de eerste test kan gebruiken.

Hetzelfde geldt voor jouw assets (JavaScript, CSS, afbeeldingen) als je een CDN gebruikt. Een CDN cache werkt ongeveer hetzelfde als die van een DNS. Zodra het item in de cache is opgeslagen, wordt deze de keren erna veel sneller geladen. Een andere tip voor het versnellen van DNS is het gebruik van DNS prefetching. Hierdoor kan de browser DNS look-ups uitvoeren op een pagina op de achtergrond. Je kan dit doen door enkele regels code toe te voegen aan de header van jouw WordPress site. Zie voorbeelden hieronder.

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

Als je WordPress versie 4.6 of hoger gebruikt wil je mogelijk resource-hints gebruiken. Ontwikkelaars kunnen de filter wp_resource_hints gebruiken om aangepaste domeinen en URL’s toe te voegen voor dns-prefetch, preconnect, prefetch of prerender.

Connecting (groen)

De verbindingstijd in GTmetrix verwijst naar de TCP verbinding of de totale tijd die nodig is om een TCP verbinding te maken. We besparen je de technische details maar dit is in principe slechts een communicatiemethode tussen de host/klant en de server die moet plaatsvinden.

Sending (rood)

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

Waiting (paars)

De wachttijd in Pingdom verwijst naar de tijd tot de eerste byte, ook wel bekend als de TTFB bij sommige andere tools. TTFB is een meting die wordt gebruikt als indicator van de reactietijd van een webserver of een andere netwerkresource. Over het algemeen is alles onder de 100ms acceptabel en een goede TTFB. Als je website de 300-400ms nadert, dan is er mogelijk iets verkeerd ingesteld op je server of is het misschien tijd om te upgraden naar een betere webstack. Zoals je in onze test hieronder kunt zien, was het ongeveer 100 ms, wat geweldig is.

Enkele eenvoudige manieren om je TTFB te verlagen is door ervoor te zorgen dat jouw host de juiste caching heeft en een CDN gebruikt. Bekijk ons uitgebreide artikel over alle manieren om je TTFB op je WordPress site te verminderen.

Receiving (grijs)

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

Event Timings

Elke keer dat je een pagina opvraagt, is er sprake van timings waarin dingen worden weergegeven en geladen.

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

HTTP responsheaders

Je kan ook op een individueel verzoek klikken om de HTTP responsheaders te zien. Dit levert waardevolle informatie op. In het onderstaande scherm kunnen we onmiddellijk zien dat gzip is ingeschakeld op de webserver dat draait over HHVM, het wordt aangeboden vanuit de cache (HIT, zou anders MISS laten zien), de cache-control headers, serverarchitectuur (dit is niet altijd zichtbaar), expires headers, de browser user-agent en meer.

Iets anders om op te letten is dat de GTmetrix tool HTTP/2 ondersteunt, in tegenstelling tot Pingdom, omdat het momenteel Chrome 58+ gebruikt om zijn tests uit te voeren. Chrome heeft HTTP/2 support geïmplementeerd in de versie 49. Houd er dus rekening mee wanneer je kiest welke snelheidstesttool je wilt gebruiken.

Video

Om je te helpen bij het opsporen van visuele storingen en prestatieproblemen van de front-end, bevat de nieuwste versie van GTmetrix een tabblad “Video”. Als de videofunctie is ingeschakeld, neemt GTmetrix automatisch een insluitbare video op die laat zien hoe een pagina wordt geladen voor elke prestatietest. Deze functie is erg handig voor het oplossen van visuele problemen die alleen voorkomen in bepaalde combinaties van browser en schermgrootte.

Historie

In het tabblad History kun je al je eerdere snelheidstests bekijken. Er is een limiet aan het aantal dat wordt opgeslagen in gratis accounts. Je kan ook een URL volgen waarmee je de prestaties in de loop van de tijd kan volgen en eventuele wijzigingen kan zien wanneer deze zich voordoen.

Een echte coole functie is dat je jouw eerdere rapporten kan selecteren en ze naast elkaar kan vergelijken. Dit kan erg handig zijn, vooral wanneer je optimalisaties op jouw site uitvoert om te zien of er verbeteringen zijn. Onthoud dat je soms ook té veel kan optimaliseren.

Casestudy domeinconfiguratie

Nu je zover bent gekomen in dit uitgebreide artikel over GTmetrix, staat je een traktatie te wachten. Het is altijd vervelend als mensen tips en casestudy’s laten zien maar dan niet vertellen hoe ze aan zulke hoge scores zijn gekomen. Hieronder vind je dus de exacte configuratie van ons domein dat we gebruikten in bovenstaande casestudy. Wil je dezelfde opstelling gebruiken? Gebruik onderstaande gegevens gerust!

Architecture

Het casestudiedomein (perfmatters.io) wordt gehost bij Kinsta op het Google Cloud Platform in de VS (Central locatie). Verder maakt Kinsta gebruik van HTTP/2, Nginx en MariaDB, die allemaal bijdragen aan de snelle laadtijden.
De site gebruikt HHVM. PHP 7.3 is nu beschikbaar bij Kinsta, wat zelfs sneller is dan HHVM! Je kan met een druk op de knop overschakelen naar een andere PHP versie.
De site gebruikt geen cacheplugin. Kinsta slaat alles op serverniveau op in de cache, wat de zaken enorm vereenvoudigt en in de meeste gevallen sneller is!

WordPress Plugins

En hier is een lijst met de plugins die op de WordPress site worden gebruikt.

De gratis CDN Enabler plugin wordt gebruikt om KeyCDN te implementeren.
De gratis CAOS plugin wordt gebruikt om Google Analytics lokaal te synchroniseren.
De premium perfmatters plugin wordt gebruikt om unnecessary HTTP requests te verwijderen en dingen zoals Emoji’s en Embeds uit te schakelen.
De premium Gonzalez plugin wordt gebruikt om te voorkomen dat bepaalde scripts worden geladen.
De premium Imagify plugin wordt gebruikt om afbeeldingen te comprimeren.

Aanbevolen tutorials om meer hierover te lezen:

Samenvatting

Als het goed is heb je nu het een en ander geleerd over de speedtest van Pingdom. Je hebt dus een idee hebt gekregen over hoe je de data van de test kan gebruiken om betere beslissingen te maken als het aankomt op prestatie. Een watervalanalyse, zoals wij het noemen, is cruciaal om te weten hoe jouw individuele onderdelen worden geladen. En onthoud, als het gaat om het vergelijken met Pingdom, zijn het verschillende tools en daarom is het beter om bij het ene of het andere te blijven omdat ze onderdelen anders berekenen. Heb je nog andere geweldige GTmetrix tips?

Als je meer uitgebreide artikelen, zoals het artikel hierboven, wil lezen, laat het ons dan weten in de reacties!

Brian Jackson

Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.