Webpagetest.org is waarschijnlijk het beste en meest uitgebreide gratis tool om de laadtijd van je site te meten. Helaas levert het veel zeer complexe gegevens op. Vandaag laat ik je zien wat je moet instellen, hoe je orde brengt in de gegevenschaos en welke parameters je nodig hebt voor een professionele analyse. Want alleen als je weet hoe je websites laden, kun je ze optimaliseren.
Je eigen website moet veilig zijn. En snel. Natuurlijk, want veel hangt af van de laadtijd: het conversiepercentage, de veiligheidsbeleving en de Google ranking van je aanbod. Maar veel mensen komen niet eens zover dat ze de laadtijd van hun eigen website goed kunnen bepalen.
Sommigen weten bijvoorbeeld niet eens welke tools ze kunnen gebruiken om hun website goed te analyseren. Of ze weten niet wat ze moeten instellen om echt goede resultaten te bereiken. Zodat je niet dezelfde fouten maakt, laat ik je vandaag zien hoe je een snel en zinvol overzicht van je website kunt krijgen met (naar onze mening) het beste gratis meetinstrument van allemaal. Zo weet je precies hoe snel je website laadt en of en waar je hem moet optimaliseren.
Om precies te begrijpen hoe de afzonderlijke analysestappen werken, raad ik je aan de datasets te bekijken die op de belangrijke punten aan elkaar gekoppeld zijn, of je eigen website parallel te analyseren. Het is immers niet zo eenvoudig om orde te scheppen in de chaos van de gegevens. Maar als beloning voor de inspanning krijg je een aantal van de beste gegevens die je ooit over je website hebt verzameld. En vooral als je op contractbasis werkt of geld verdient met je WordPress projecten, is de inspanning zeker de moeite waard.
Webpagetest is de beste tool die we kennen
Toegegeven: We prijzen webpagetest.org uitbundig in dit artikel. Misschien te uitbundig, maar niet zonder reden. Omdat webpagetest het enige ons bekende tool is waarmee je op betrouwbare wijze de absolute en waargenomen laadtijd van je website kunt bepalen. En het is helemaal gratis. Geen betalingsbarrière, geen abonnementsmodel, gewoon waardevolle gegevens en een API waarmee je het geheel kunt automatiseren: zo zou het moeten zijn.
Voor de volledigheid moet gezegd worden dat je ook mooie meetresultaten krijgt met Pingdom en GTmetrix. Maar niet zulke goede resultaten als met Webpagetest. Dit betekent natuurlijk niet dat je je resultaten niet kunt en moet onderbouwen met meerdere tests in verschillende tools. En het betekent ook niet dat je niet moet meten met Pingdom of GTmetrix. Ik kan je alleen maar aanraden om in ieder geval eens te kijken naar Webpagetest.
Het is bijna een mantra voor ons geworden: Tools als Google PageSpeed Insights zijn niet voldoende om de laadtijd van je website te meten. Ze bepalen alleen het prestatiepotentieel van je website. Natuurlijk zijn deze gegevens nog steeds waardevol – vanuit het oogpunt van performance en SEO – maar je kunt er eenvoudigweg geen conclusies uit trekken over wat er werkelijk gebeurt als je website wordt opgeroepen.
Maar dat is precies wat je wilt weten. En dat is precies wat je moet weten om te bepalen of een optimalisatiemaatregel doeltreffend is.
Helaas levert Webpagetest niet alleen niet erg fraaie gegevens, maar ook zeer uitgebreide testresultaten. Daarom zal ik je vandaag laten zien hoe je Webpagetest kunt gebruiken en hoe je de resultaten kunt interpreteren.
Webpagetest was oorspronkelijk een AOL-project en alleen bedoeld voor intern gebruik. In 2008 werd het programma echter open source software en wordt nu voornamelijk onderhouden en verder ontwikkeld door Google. De volledige documentatie van Webpagetest is te vinden op GitHub en kan ook lokaal worden gedownload en gebruikt.
Terwijl PageSpeed Insights je laat zien waar het optimalisatiepotentieel van je website ligt, kan Webpagetest veel meer. Het laat niet alleen zien hoe je je website kunt verbeteren, maar ook direct welke effecten je optimalisatiemaatregelen hebben op de laadtijd van je website.
In tegenstelling tot Pingdom en GTmetrix zit er geen bedrijf achter Webpagetest dat een betaalde dienst wil verkopen (ok, behalve Google, maar de dienst wordt tenminste niet direct verkocht). Je zou eerder kunnen zeggen dat Webpagetest deel uitmaakt van Google's plan om het web in het algemeen sneller te maken. Hoe je de inspanningen van Google in deze context ook wilt beoordelen.
4 stappen naar werkelijk zinvolle laadtijdgegevens
Ja, Webpagetest is complexer dan andere tools. Maar laat dat je niet afschrikken! In dit geval is complexiteit goed. Omdat het betekent dat je geweldige gegevens krijgt over je website. En zelfs als je de tool voor het eerst gebruikt, krijg je vrij snel de relevante informatie.
En dat is met de volgende vier stappen:
Stap 1: Testparameters instellen
Stap 2: Een overzicht krijgen
Stap 3: Gedetailleerde analyse
Stap 4: Analyse van de waargenomen laadtijd
Stap 1: Testparameters instellen
Webpagetest biedt zeer fijne instellingen voor het testen van je website. Vier van deze instellingen zijn bijzonder belangrijk om goede meetresultaten te krijgen:
- de server, waarmee getest moet worden
- de browser, waarmee getest moet worden
- de geavanceerde testinstellingen, waar ik zo meteen dieper op in zal gaan.
De server die je kiest voor de test simuleert een website-oproep daar vandaan. Als je de standaard server in de VS selecteert, wordt het testresultaat uitgevoerd voor een pagina-oproep uit Texas. In de meeste gevallen is dit echter niet per se wat je wilt. Daarom is deze instelling erg belangrijk. Het kan het totale resultaat enorm vervormen en moet overeenkomstig worden ingesteld, afhankelijk van de toepassing.
De twee meest voorkomende gebruikssituaties zijn:
- Bepaling van de laadtijd voor een gebruiker uit jouw doelgroep
- Laadtijd vergelijking na een optimalisatie maatregel
Als je wilt weten hoe de laadtijd van je website wordt ervaren, dan moet de locatie van de server zo goed mogelijk overeenkomen met de typische locatie van de oproepen. Voor een Duitse blog betekent dit dat je een server in Duitsland moet kiezen, bijvoorbeeld in Frankfurt.
Als je wilt weten wat de resultaten van een optimalisatiemaatregel zijn, maakt het niet uit welke serverlocatie je gebruikt. Het enige belangrijke is dat je dezelfde serverlocatie moet gebruiken voor de test voor en na de optimalisatie. Anders kun je de meetgegevens niet goed vergelijken. Natuurlijk raad ik ook hier een Europese testserver aan. Dit levert gewoon de meest realistische resultaten op.
De gebruikte browser
Webpagetest biedt vele instelmogelijkheden om bepaalde overdrachtstechnieken en browsers te simuleren. Je kunt bijvoorbeeld definiëren dat de website via een 3G verbinding en Firefox geladen moet worden. Om te beginnen is het echter voldoende om de browser te kiezen die je doelgroep het meest gebruikt.
Informatie hierover kun je bijvoorbeeld vinden in Google Analytics of Piwik. Raidboxes wordt bijvoorbeeld vooral bezocht via Chrome.
Heel belangrijk: De geavanceerde instellingen bepalen hoe goed je meetgegevens uiteindelijk zullen zijn!
Naast de twee parameters die bepalen hoe de test wordt uitgevoerd – dus de serverlocatie en de gebruikte browser – biedt Webpagetest ook de mogelijkheid om in te stellen wat de test aan het eind moet opleveren. In de geavanceerde instellingen kun je bijvoorbeeld bepalen dat alleen bepaalde waarden moeten worden uitgevoerd of dat de meting na een bepaalde tijd automatisch moet stoppen. En hier zijn er twee instellingen die bijzonder belangrijk zijn voor het verkrijgen van redelijk volledige en betrouwbare gegevens: het "Number of Tests to Run" en de "Repeat View".
In principe moet je bij het meten van de laadtijd altijd meer dan één keer meten. Anders loop je het risico dat je uitschieters meet en mogelijk op zoek gaat naar een probleem dat niet bestaat. En geloof me: dat hebben we al een paar keer meegemaakt. Ik raad minstens drie opeenvolgende testen aan.
Je moet er ook aan denken om altijd de gecachete versie van je website te meten. Je kunt dit bereiken door de optie Repeat View te gebruiken.
Zodra je je URL hebt ingevoerd, bijvoorbeeld https://raidboxes.de, en de testparameters hebt ingesteld (d.w.z. de Europese server, de browser, het minimum van 3 herhalingen en de Repeat View), kun je de test starten. Afhankelijk van hoeveel testen er op dat moment lopen, kan de analyse een paar minuten duren.
Het is belangrijk op te merken dat Webpagetest alleen de website test die toegankelijk is via de URL, niet je hele webaanwezigheid. Dit betekent dat je je homepage, alle landingspagina's en, indien relevant, je productoverzicht afzonderlijk moet testen.
In deze handleiding werk ik met de gegevens van de analyse van onze homepage, raidboxes.io.
Stap 2: Een overzicht krijgen
Het eerste wat je ziet is het Performance Summary en het item "Opportunities & Experiments". Hier krijg je een globaal overzicht van het potentieel dat je website in bepaalde aspecten heeft, of dat de website in deze aspecten al goed presteert. Webpagetest geeft je ook soortgelijke resultaten als Google PageSpeed Insights .
(1) Hoe meer groen hoe beter
In het tweede gebied staan de testparameters nogmaals ter controle. Groen duidt op een goede mate van optimalisatie, oranje op bruikbaar optimalisatiepotentieel en rood op dringende noodzaak tot actie.
Hier krijg je alle relevante kerngegevens van de paginalaadtijd voor de gecachete en ongecacheerde versie van je website. De First View wordt niet gecached en de Repeat View wordt gecached. Het belangrijkste hier is: In het overzicht toont Webpagetest slechts de waarden voor één van de drie tests. De tekst tussen haakjes direct naast de labels First View en Repeat View laat zien welke test dit is. Run 2 is dus het resultaat voor de tweede testrun.
Ik zal nu de twee belangrijke parameters uitleggen:
- Eerste byte: Tijd tot de eerste databyte wordt verzonden tussen de client en de webserver. Deze waarde moet, indien mogelijk, onder de 200 milliseconden liggen en is een belangrijke indicatie voor de prestaties van je hosting.
- Start Render: Deze waarde beschrijft de tijd die een website nodig heeft om te laden totdat de inhoud voor het eerst wordt weergegeven. Tot die tijd blijft de website volledig wit voor de gebruiker. Natuurlijk moet ook deze waarde zo laag mogelijk zijn. Deze waarde vormt samen met de totale duur van de visuele pagina-opbouw de beoordelingsnorm voor de waargenomen websitesnelheid. Start Render markeert het begin van het zichtbaar laden van je website.
Voor al deze waarden geldt: hoe kleiner, hoe beter. Als een richtlijn, kun je onthouden:
- de Time to First Byte moet minder dan 200 milliseconden zijn
- Start Render mag niet groter zijn dan 2,5 seconden
- De hele visuele pagina-indeling mag niet langer zijn dan vijf seconden
Natuurlijk zijn deze waarden slechts vuistregels. Het hangt altijd af van je website: Een shopsite met 50 producten – dus 50 of meer afbeeldingen en beschrijvende teksten – laadt natuurlijk langzamer dan een one-pager die alleen uit tekst bestaat.
Daarom kan ik alleen maar adviseren: Test de websites van je directe concurrenten en je rolmodellen. Zo krijg je vergelijkende waarden binnen de sector.
Bereken gemiddelde waarden - Nu is het tijd voor de nitty-gritty
Helaas toont het hierboven toegelichte overzicht slechts de resultaten van een enkele meting. En je onthoudt: enkele, geïsoleerde waarden kunnen je op een dwaalspoor brengen. Daarom heb je voor de test van je website minstens drie opeenvolgende metingen uitgevoerd. En de gemiddelde waarden van deze drie metingen zijn de beste benaderingen voor de laadtijd van je pagina.
En maak je geen zorgen: het creëren van de gemiddelden vergt slechts een druk op de knop:
Voordat je verder gaat, moet je bovenaan zowel het vakje First als Repeat aanvinken.
Nu krijg je een aanvankelijk verwarrende hoeveelheid gegevens van zogenaamde plots. En dit zijn precies de resultaten die je wilt hebben. In principe is dit nieuwe overzicht voor alle waarden gelijk. Dus als je eenmaal begrijpt hoe je ze moet lezen, zijn ze allesbehalve verwarrend.
Zoals je ziet zijn alle drie de gemeten waarden (1-3) hier in een diagram uitgezet. Boven de Plot staat de waarde waarnaar het diagram verwijst. Het getal in de kolom Mean beschrijft nu de gemiddelde waarde van de laadtijd over alle drie de metingen. Deze gemiddelde waarde is de meest waardevolle informatie die je over je website kunt krijgen.
Overigens: Door te klikken op het vakje Repeat kun je hier ook de waarden voor de laadtijd met en zonder caching laten weergeven. En als je de resultaten voor de andere waarden wilt vinden: zoek gewoon naar "First Byte" en "Start Render" met de zoekfunctie van je browser (CTRL+F voor PC's en cmd+f voor Macs).
Tussentijdse conclusie: Veel werk voor bijzonder waardevolle gegevens
Ok, dat was veel input. En het waren veel stappen. Vooral in vergelijking met eenvoudige testmethoden. Maar de inspanning is de moeite waard, want je zag het in de cijfers op de grafieken: twee tests met dezelfde instellingen kunnen soms een hele seconde uit elkaar liggen. Onder bepaalde omstandigheden beslist het toeval of je tijd en geld investeert in de verdere optimalisatie van je website of niet. En zeker als je je geld verdient met WordPress, zij het met je eigen winkel, een webdesignbedrijf of je eigen bureau, moet je de beste gegevensbasis hebben voor zo'n beslissing.
In feite hebben we het einde echter nog niet bereikt. Want nu ken je de belangrijkste prestatieparameters van je website, dus je weet hoe snel je website laadt en of er nog mogelijkheden zijn voor optimalisatie, maar je weet nog niet waar je website precies nog verbeterd kan worden. En dat is precies waar de gedetailleerde analyse voor bedoeld is.
Stap 3: Gedetailleerde analyse
Het overzicht vertelt al veel over je website. Je kunt zien of er op bepaalde gebieden nog ruimte is voor verbetering, hoe snel je website eigenlijk laadt en of hij nog wat sneller zou kunnen laden. Je kunt de oorzaken van de problemen echter nog niet vaststellen. Maar je kunt ze vinden in de gedetailleerde rapporten:
- de watervaldiagrammen
- de potentieelanalyse
De watervaldiagrammen geven een overzicht van elk HTTP-verzoek dat een browser aan de webserver doet. Op het eerste gezicht lijken deze diagrammen erg ingewikkeld en verwarrend. Maar als je weet hoe, kun je met één blik veel details over je website uit een watervaldiagram halen. Hier laten we je zien hoe je watervaldiagrammen correct kunt lezen en hoe je ze kunt gebruiken om je website verder te optimaliseren.
De basisregel is dat een snelle website een kort watervaldiagram heeft met weinig, korte verzoeken. Dit betekent dat vooral de lengte van het diagram en de lengte van de balken in de afzonderlijke lijnen van belang zijn.
In de Performance Review vind je gedetailleerde informatie over hoe goed de prestaties van je website al geoptimaliseerd zijn. Deze gedetailleerde review bevat:
- de Optimalization Checklist, die te vinden is onder het menu onderdeel "Optimalization".
- de gedetailleerde uitsplitsing van de performancetest
In de Optimalization Checklist vind je de afzonderlijke evaluatiecriteria die worden toegepast op elk van de HTTP-verzoeken. Een groen vinkje betekent dat aan de eis is voldaan, een geel driehoekje geeft aan dat er verbetering nodig is, en een rood kruis betekent dat de voorgestelde optimalisatiemaatregel ontbreekt.
Tenslotte vind je een beschrijving van de waarschuwingen en ontbrekende optimaliseringsmaatregelen in de sectie details. Webpagetest beschrijft de nog mogelijke optimalisaties voor elke bron. Voor afbeeldingen, bijvoorbeeld, toont het hoeveel datavolume kan worden opgeslagen.
Je zult wat tijd moeten besteden aan deze gedetailleerde evaluaties, maar met hun hulp kun je een gedetailleerd beeld krijgen van je website en zijn optimalisatiepotentieel.
En omdat het in principe dezelfde info is die PageSpeed Insights uitspuugt, kun je natuurlijk ook gewoon een PageSpeed-analyse parallel laten lopen. Omdat deze test een stuk mooier en beter voorbereid is.
Stap 4: Analyse van de waargenomen laadtijd
In tegenstelling tot alle andere tests die we kennen, is Webpagetest de enige die gratis de waargenomen laadtijd van je website weergeeft. Met de Filmstrip view kun je een video bekijken van het laden van de pagina. Zo kun je precies zien wat er bij het laden te zien is en kun je nog beter beoordelen of en hoe je website geoptimaliseerd moet worden.
De waargenomen laadtijd is waarschijnlijk de belangrijkste parameter van de laadtijd van je pagina. Het beïnvloedt of je website voortijdig wordt verlaten, de conversiekans en de algehele ervaring van je website. Vooral voor shops is de waargenomen snelheid van de website daarom een belangrijk ijkpunt. Natuurlijk moet de waargenomen laadtijd altijd zo laag mogelijk zijn.
Denk naast de filmstripweergave ook aan het volgende:
De filmstripweergave laat je tot op een tiende van een seconde nauwkeurig zien hoe je website eruit ziet en welke processen er op een bepaald moment worden uitgevoerd. Vaak gebeurt er gedurende enkele seconden niets, en dan ziet de website er ineens bijna precies zo uit als in zijn uiteindelijke staat. Dit wekt de indruk dat de website binnen deze tijd klaar is met laden. Of liever, je hebt al het gevoel dat je met de website kunt interacteren.
Dus vooral bij het prioriteren van de zichtbare pagina-inhoud is de Filmstrip View een zeer waardevol hulpmiddel.
Conclusie
Ok, na het lezen van dit artikel zou je nu de juiste instellingen moeten kunnen kiezen voor een webpaginatest. Nu moet je ook weten welke getallen je moet interpreteren en hoe je verkeerde interpretaties door uitschieters kunt voorkomen. Je weet ook waar je gedetailleerde informatie over je website kunt vinden en hoe je de waargenomen laadtijd van je website kunt bepalen en weergeven.
Je kent dus de belangrijke basis om een echt uitgebreid overzicht van je website te krijgen. En je weet waar je de informatie kunt halen waarmee je de meetresultaten met leven kunt vullen en zinvolle conclusies kunt trekken voor je website.
Maar waarom was dat ook alweer belangrijk? Heel eenvoudig: zonder een redelijke meting van de werkelijke toestand van je website kun je niet goed beoordelen hoe je website momenteel laadt. En aan de andere kant mis je informatie om de laadtijd te optimaliseren.
Heb je nog een tip voor het gebruik van Webpagetest? Perfect, schrijf dan een reactie op dit artikel!
