Tip! Gebruik deze 4 tools voor een secure meting van je performance en laadsnelheid
Sarah Koning
1 oktober 2020
Anno 2020 spelen performance en laadsnelheid een belangrijke rol in de gebruiksvriendelijkheid van je site of shop. Ook voor Google worden deze factoren steeds belangrijker. Wil je de performance en laadsnelheid van jouw website of webshop in kaart brengen? We hebben hieronder onze favoriete tools op een rij gezet, inclusief instructies om deze in te zetten én te interpreteren.
1. Google Search Console
Google Search Console is waarschijnlijk niet de eerste tool die je in dit rijtje verwacht. Toch is de gratis tool van Google een snelle eerste stap om de performance en laadsnelheid van je site of shop te achterhalen. De integratie met Search Console is zo gepiept en daarna kun je direct aan de slag met het monitoren van je data.
Web Vitals
Met de introductie van de Web Vitals core update in Google’s algoritme is Google Search Console uitgebreid met een ‘Site-vitaliteit’ tabblad. Deze nieuwe Search Console feature biedt inzicht in je siteprestaties op mobiel en desktop – of specifieker: de prestaties van je url’s.
Binnen dit tabblad klik je door naar ‘Rapport openen’ om het volledige rapport per apparaattype te bekijken. Je ziet hier welke issues en/of verbeterpunten een belangrijke rol spelen in de score van je site of shop. De losse url’s zijn gebundeld per type issue of verbeterpunt met daarbij de status en het aantal url’s waarvoor dit van toepassing is. Door op het issue of verbeterpunt te klikken, komt er een overzicht met voorbeeld url’s en de exacte scores in beeld. Als je hier doorklikt op een specifieke url zie je de vergelijkbare url’s waarvoor dit issue of verbeterpunt ook geldt.
Google Search Console
De issues of verbeterpunten die relevant zijn voor je performance en laadsnelheid zijn de Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS). Deze drie ranking factoren spelen een grote rol in de Web Vitals update die gepland staat voor 2021.
Na de eerste stap
Zoals ik hierboven al schreef is Google Search Console vooral een eerste stap voordat je met het verbeteren van de performance en laadsnelheid aan de slag gaat. Wat ik zelf prettig vind aan de nieuwe Search Console feature is dat alle url’s uit een website of webshop worden geraadpleegd. De meeste tools meten alleen losse url’s, waardoor het veel werk is om inzicht te krijgen in de status van je volledige site of shop.
Als je de site-vitaliteit in beeld hebt gebracht, ben je klaar voor de volgende stap: diepgaander onderzoek naar de precieze oorzaken én mogelijke oplossingen om je performance en laadsnelheid naar een hoger niveau te tillen. Google PageSpeed Insights (PSI) helpt je hierbij.
2. Google PageSpeed Insights
Mijn collega’s en ik merken in de praktijk dat veel van onze opdrachtgevers Google’s PageSpeed Insights (PSI) gebruiken om de laadsnelheid van hun site of shop te meten. PageSpeed Insights is met recht een interessante tool, maar de resultaten zijn niet altijd even representatief. De gratis tool van Google meet namelijk meer dan alleen de laadsnelheid, waardoor de score een vertekend beeld kan geven als je uitsluitend de snelheid van je site of shop wilt meten.
Zo zet je PageSpeed Insights in
Met de data uit Google Search Console heb je een sterk startpunt voor de verdere analyse in PageSpeed Insights. Dat werkt als volgt:
Ga naar Google Search Console en open de data van je website
Klik aan de linkerkant op het tabblad ‘Site-vitaliteit’
Kies voor mobiel of desktop en klik op ‘Rapport openen’
Onder het kopje ‘Details’ zie je de issues, klik hier op één van de issues
Bekijk de voorbeeld url’s van pagina’s waarop dit issue zich voordoet
Kies om te beginnen de url met het hoogste aantal vergelijkbare url’s
Kopieer deze url naar Google PageSpeed Insights
Klik op ‘Analyseren’ om de PageSpeed audit aan te zetten
In PageSpeed Insights zie je vervolgens een uitgebreid rapport met aanvullende data, onderverdeeld in mobiel en desktop – iets wat bij GTmetrix en Pingdom niet het geval is, daar wordt alleen vanaf desktop gemeten. Deze data geeft onder andere meer informatie over de manier waarop de Web Vitals scores zijn opgebouwd. Als je meer informatie nodig hebt over een specifiek issue herhaal je dit stappenplan voor de volgende voorbeeld url’s.
Google PageSpeed Insights
Web Vitals onderdelen
De PageSpeed Insights rapportage begint met een overzicht van de Web Vitals waardes. Je ziet hier precies hoe deze waardes opgebouwd zijn en welke score hieraan toegekend wordt.
In principe kent de Web Vitals update drie belangrijke ranking factoren: de Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS). In de Google PageSpeed Insights rapportage worden deze ranking factoren aangevuld met de First Contentful Paint (FCP), Speed index, Time to Interactive (TTI) en Total Blocking Time (TBT). Hieronder de betekenis per begrip.
Largest Contentful Paint (LCP): Laadsnelheid – Het moment waarop de grootste tekstsectie of afbeelding wordt weergegeven tijdens het laden van de pagina.
First Input Delay (FID): Interactiviteit –De vertraging tussen de eerste interactie van de bezoeker en de daadwerkelijke reactie vanuit de pagina.
Cumulative Layout Shift (CLS): Visuele stabiliteit – De verschuiving van pagina elementen die plaatsvindt tijdens het laden.
Speed index: Snelheidsindex die aangeeft hoe snel de content van een pagina zichtbaar is.
First Contentful Paint (FCP): Het moment waarop de eerste tekst of afbeelding wordt weergegeven tijdens het laden van de pagina.
Time to Interactive (TTI): De tijd totdat de pagina volledig interactief is. Dit begrip wordt vaak gecombineerd met de FID.
Total Blocking Time (TBT): Som van de tijd tussen de FCP en TTI.
Door bovenstaande waardes nauwkeurig te monitoren, breng je duidelijk in kaart waar de verbeterruimte ligt. Voer de PageSpeed Insights audit daarom minimaal uit voor de belangrijkste vijf tot tien pagina’s van je site of shop om verbanden te kunnen leggen. Op basis daarvan kun je de juiste vervolgacties in werking zetten.
Extra data
Google PageSpeed Insights deelt daarnaast gedetailleerde statistieken ter aanvulling op de data hierboven. In het onderdeel ‘Aanbevelingen’ staan suggesties die kunnen bijdragen aan een snellere laadsnelheid met daarbij de geschatte besparing per aanbeveling.
Het onderdeel ‘Diagnostische gegevens’ geeft meer informatie over de prestaties van deze pagina. Ook hier staan verschillende tips en verbeterpunten om de pagina verder te verbeteren. Je kunt iedere regel verder uitklappen om de specifieke url’s en potentiële besparingen te bekijken.
De PageSpeed Insights rapportage wordt afgesloten met een overzicht van de ‘Geslaagde controles’. Dit zijn de punten waar de pagina goed op scoort.
Aandachtspunten
Het komt regelmatig voor dat de scores in PageSpeed Insights verschillen van andere tools. Eén van de mogelijke verklaringen hiervoor is dat Google zelf de meetlocatie kiest en deze niet bekend maakt in de rapportage. Bij andere tools kun je weliswaar niet altijd zelf de meetlocatie kiezen, maar wel terugzien vanaf welke locatie de audit is uitgevoerd. Daarnaast gebruikt PageSpeed Insights een emulated browser. Dit is geen echte browser, zoals Chrome of Firefox, maar een lichter en sneller browser script. GTmetrix en Pingdom gebruiken daarentegen wel echte browsers, waardoor de resultaten van elkaar kunnen verschillen.
3. GTMetrix
De gratis variant van de GTmetrix tool geeft je meer inzicht in de laadsnelheid van een specifieke url. Nadat je de url hebt ingevuld, verschijnt er een uitgebreid rapport in beeld met daarin je scores en verbeterpunten. Per verbeterpunt zie je ook de bijbehorende prioriteit.
De belangrijkste scores in de GTmetrix rapportage zijn de PageSpeed en YSlow score. Met de PageSpeed score wordt de laadsnelheid van je pagina gemeten. De YSlow score wordt opgebouwd door je pagina op basis van 23 factoren te meten. Dit zijn de factoren, of regels, die Yahoo hanteert voor high-performance websites. Iedere Yahoo regel telt op een andere manier mee in het totaal. Je uiteindelijke YSlow score is het gemiddelde van je scores op deze 23 punten.
GTmetrix meet standaard vanuit Vancouver in Canada. Om dit aan te passen, heb je een betaald GTmetrix PRO account nodig.
Back-end optimalisatie
Houd er rekening mee dat sterke PageSpeed en YSlow scores niet garant staan voor een snelle website. De PageSpeed en YSlow scores richten zich namelijk op de front-end van je website: de HTML-, CSS-, Javascript- en mediabestanden. De back-end speelt echter ook een belangrijke rol in de laadsnelheid van je pagina. Denk hierbij bijvoorbeeld aan de server-, hosting- en database instellingen.
Zelf gebruiken mijn collega’s en ik de betaalde variant van GTmetrix: GTmetrix PRO. Met de betaalde versie van de tool heb je de mogelijkheid om zelf een meetlocatie te kiezen. Je hebt hierbij de keuze uit zeven locaties op verschillende continenten. Dankzij GTmetrix PRO monitoren we de websites en webshops van onze opdrachtgevers zonder handmatig een periodieke audit aan te zetten. De data wordt namelijk automatisch verzameld op de ingestelde frequentie. Je stelt eenmalig de meetlocatie en frequentie in en vervolgens doet de tool de rest.
Wat ik zelf een groot voordeel vind, is de mogelijkheid om de historie per project te bekijken. Met handmatige audits via PageSpeed Insights of Pingdom Website Speed Test is het aan jezelf om de data van verschillende audits te vergelijken. GTmetrix PRO laat daarentegen overzichtelijke grafieken zien met het verloop per meetfactor.
We worden daarnaast proactief op de hoogte gesteld als de laadsnelheid onder een bepaalde drempelwaarde komt. Per project stellen we een passende drempelwaarde in, zodat we via de mail een melding ontvangen als de website of webshop langzamer is dan de ingestelde laadsnelheid. We kunnen hierdoor direct actie ondernemen. Er zijn meer dan vijftien verschillende factoren waar je via GTmetrix PRO een drempelwaarde voor kunt instellen, waaronder de First Contentful Paint, Time to First Bite en paginagrootte.
4. Pingdom Website Speed Test
Pingdom Website Speed Test is een toegankelijke tool om de laadsnelheid van een specifieke url te meten en om te analyseren wat een pagina precies langzamer of zwaarder maakt. Je voert simpelweg de url in, kiest de meetlocatie en klikt op ‘Start test’. Binnen enkele minuten krijg je een volledig rapport in beeld met daarin onder andere je totaalscore, de paginagrootte, de laadtijd en het aantal HTTP requests.
Highlights
De belangrijkste punten uit de Pingdom Website Speed Test worden bovenaan de pagina getoond in overzichtelijke highlights. Dit zijn:
Performance grade: Een cijfer van 0 – 100 waarin je site of shop wordt vergeleken met de benchmark. Hoe hoger het cijfer, hoe beter de score van je pagina.
Page size: De paginagrootte van de door jou ingevulde url. Een pagina van minder dan 500 KB is goed, alles daarboven heeft negatieve invloed op de laadsnelheid.
Load time: De laadtijd van de door jou ingevulde url. Zorg ervoor dat deze onder de 1,5 seconden blijft.
Requests: Het gaat hier om HTTP requests, dit is het aantal verzoeken waar je pagina aan moet voldoen voordat deze geladen wordt. Streef naar maximaal 50 HTTPS requests.
Direct onder de highlights staan de mogelijke verbeterpunten om de performance van je pagina te optimaliseren. De verschillende tips zijn uitklapbaar om meer informatie te tonen.
Pingdom Website Speed Test
Gedetailleerde weergave
Als je verder naar beneden scrollt in de Website Speed Test zie je vier tabellen met daarin gedetailleerde informatie over de contentgrootte per contenttype, het aantal requests per contenttype, de contentgrootte per domein en het aantal requests per domein. Op basis van deze informatie kun je achterhalen waar de zwaartepunten van je site of shop liggen.
Ook de HTTP requests hebben een eigen tabel. In deze tabel zie je per pagina onderdeel hoeveel ruimte dit onderdeel in beslag neemt. In niet-geoptimaliseerde sites of shops zie je hier bijvoorbeeld zware afbeeldingen en/of grote codebestanden terug.
Eén van de voordelen van Pingdom is dat je zelf de meetlocatie kunt instellen in de gratis versie van de tool – iets wat bij veel tools niet het geval is. Wereldwijd heeft Pingdom zeven meetlocaties om je websitedata te testen. Vanuit Nederland zijn de meetlocaties in Londen en Frankfurt de dichtstbijzijnde.
Het gebruik van de Pingdom Website Speed Test is gratis.
In het kort
Er zijn dus meerdere manieren om de performance en laadsnelheid van je site of shop te meten en iedere tool is hierin verschillend. Het is daarom belangrijk om je er bewust van te zijn wat je precies meet, hoe je deze data kunt interpreteren en hoe je de resultaten vervolgens in de praktijk brengt. Voor het optimale resultaat van je performance en laadsnelheid analyse combineer je de verschillende tools uit deze blog.
Reacties zijn gesloten.