Deze twee WebPagetest functies kende u nog niet - maar u zou ze regelmatig moeten gebruiken

Jan Hornung Laatst bijgewerkt op 21.10.2020
6 Min.
Websites vergelijken met Webpagetest

Webpagetest.org is waarschijnlijk het beste gratis hulpmiddel om de laadtijd van uw pagina te meten. Omdat WebPagetest onvergelijkbaar krachtiger is dan de directe concurrentie. En dat is vooral te danken aan twee functies: De mogelijkheid om websites te vergelijken en de vergelijking op lange termijn.

Dit artikel maakt deel uit van een reeks over het meten en evalueren van de laadtijd van uw webpagina's. In de vorige artikelen hebben we laten zien:

Vandaag laat ik je twee functies van Webpagetest zien die je waarschijnlijk nog niet kende. Want het instrument is vooral geschikt voor prestatievergelijkingen en een voortdurende evaluatie van de laadtijd van uw pagina.

Dus vandaag ga ik je laten zien

Andere belangrijke parameters - Snelheidsindex, DOM-elementen en kosten

Naast de standaardwaarden - zoals Start Render, Document Complete, etc. - biedt Webpagetest ook andere nuttige kerngegevens waarmee u de efficiëntie van uw site kunt beoordelen. Deze waarden zijn belangrijk om de resultaten van het instrument correct te kunnen interpreteren.

Voorbeeldresultaat van een webpaginatest met de belangrijke uitgebreide karakteristieke waarden
Voorbeeldresultaat van een webpaginatest. De snelheidsindex, het aantal DOM-elementen en het aantal verzoeken zijn drie belangrijke indicatoren voor de algemene prestaties van uw site.

DOM Elementen: Een DOM-element is, ruwweg, een HTML-bouwsteen. Hoe minder van deze elementen uw browser moet laden, hoe slanker en sneller uw pagina is. Het aantal DOM-elementen is echter slechts een indicatie van de laadtijd van de pagina. Door wijzigingen aan te brengen in Plugins, maar vooral in Theme, kan het aantal DOM-elementen merkbaar worden verminderd.

Uittreksel uit de broncode van een RAIDBOXES blog post
Elk element van de HTML-body dat tussen haakjes staat, is een DOM-element.

Verzoeken: Deze waarde beschrijft het aantal afzonderlijke HTTP-verzoeken dat uw browser aan de webserver moet doen. Afzonderlijke elementen zoals CSS-bestanden, JavaScript-bestanden of afbeeldingen worden opgevraagd via een HTTP-verzoek. Theoretisch, hoe minder verzoeken, hoe beter. Het watervaldiagram van uw pagina geeft u trouwens altijd het beste overzicht van de HTTP-verzoeken die worden geladen.

In de praktijk speelt het specifieke aantal HTTP-verzoeken echter niet zo'n grote rol. Tenminste niet als uw site SSL-gecodeerd is en draait op een server met HTTP/2. Omdat dan meerdere verzoeken tegelijk kunnen worden uitgevoerd en geladen.

Snelheidsindex: Deze index wordt berekend door Webpagetest en is een indicator van de waargenomen laadtijd van een pagina. De waarde beschrijft een milliseconde-waarde - lage waarden zijn beter dan hoge - die aangeeft hoe snel en efficiënt de zichtbare inhoud van uw pagina wordt geladen. In principe bepaalt Webpagetest de gebruikerservaring via screenshots van uw pagina en meet deze met een tijdswaarde. Voor het geval dat je geïnteresseerd bent: Webpagetest heeft ook een vergelijking voor deze.

Berekeningsgrondslag van de snelheidsindex
De snelheidsindex van Webpagetest wordt weergegeven en berekend als een gebied. Hoe sneller de inhoud van uw pagina wordt geladen, hoe kleiner het gebied en dus de snelheidsindex. Als u geïnteresseerd bent in de details: Webpagetest geeft hier alle informatie over de berekening van de snelheidsindex.

De snelheidsindex is het meest geschikt voor vergelijkingen. Als een optimalisatiemaatregel tot een aanzienlijke verlaging van de index leidt, was deze over het algemeen succesvol en wordt de pagina als sneller ervaren. Als uw plaats een beduidend kleinere Snelheidsindex dan de concurrentie heeft, dan kunt u veronderstellen dat uw plaats bezoekers een betere het doorbladeren ervaring aanbiedt.

Kostprijs: Deze waarde is meer een "nice-to-have". Het geeft aan hoe duur uw pagina is wanneer deze wordt geladen via mobiele netwerken. De gegevens zijn afkomstig van whatdoesmysitecost.com en is een gemiddelde waarde voor alle hier vermelde landentarieven. Met behulp van deze functie kunt u de kosten van het eenmalig mobiel laden van uw site bekijken. Ik denk dat deze waarde in de meeste gevallen niet echt relevant is voor optimalisatie. Corrigeer me als ik het mis heb.

De belangrijkste functie van Webpagetest: Vergelijk direct meerdere websites

Als je de laadtijd van je pagina meet, dan heeft dat meestal twee redenen: Ofwel hebt u een wijziging aangebracht en wilt u weten welke invloed die heeft op de laadtijd, ofwel wilt u uw site vergelijken met anderen.

Natuurlijk heb je een vergelijkingswaarde nodig voor zo'n verklaring. En dat is precies waarom de"Visuele Vergelijking" functie in het leven is geroepen. Omdat je daarmee direct de laadtijd en het laadgedrag van verschillende URL's kunt vergelijken.

Met de functie Visuele vergelijking kunt u websites rechtstreeks met elkaar vergelijken.
U vindt de vergelijkingsfunctie direct rechts van de standaardanalyse van Webpagetest.

Met deze functie kunt u bijvoorbeeld:

  • uw eigen pagina's vergelijken met die van de concurrentie
  • kijk wat de verandering van hoster heeft opgeleverd
  • test twee of meer subpagina's met elkaar
  • controleer hoe snel subpagina's laden in vergelijking met de startpagina

Voor de directe vergelijking hoeft u alleen de pagina's een naam te geven, de URL's in te voegen en de test uit te voeren met de vooraf ingestelde parameters.

Voor testdoeleinden vergelijken we twee van onze productpagina's met elkaar. Het resultaat laat u toe de pagina's te vergelijken aan de hand van verschillende metriek. De meest beschrijvende staat helemaal aan het begin van het resultatendocument: de filmstripweergave. Hier kunt u zien wanneer de bezoeker ziet dat uw pagina klaar is met laden (de relevante metriek heet Visueel compleet).

De referentiewaarde kan ook worden gewijzigd, zodat ook andere karakteristieke waarden, zoals Volledig geladen en Document voltooid, kunnen worden weergegeven.

Resultaat, als je twee websites vergelijkt op Webpagetest
De meest beschrijvende metriek wordt meteen aan het begin gepresenteerd: The Filmstrip View. U kunt dit nog steeds configureren via de instellingen rechtsonder. De watervaldiagrammen kunnen heen en weer worden geschakeld met de schuifbalk links boven de diagrammen.

Hieronder vindt u vier staafdiagrammen die laten zien hoe de geteste pagina's presteren wat betreft de waargenomen laadtijd, de belangrijkste laadtijdpunten, het aantal HTTP-verzoeken en de grootte van de pagina.

Met deze statistieken kunt u in één oogopslag zien welke van de geteste pagina's sneller laadt, slanker is, en een betere ervaring biedt voor de bezoeker.

Voor Google gebruikers biedt Webpagetest ook de mogelijkheid van lange termijn vergelijkingen

Als u inlogt op Webpagetest met uw Google-account, dan worden de individuele tests geregistreerd. Dit geeft u de mogelijkheid om alle tests van het afgelopen jaar te bekijken en met elkaar te vergelijken.

Vergelijkingen op lange termijn in Webpagetest om verschillende versies van een website te vergelijken
Onze webpagina test geschiedenis van de afgelopen zeven dagen. Telkens wanneer u inlogt met uw Google-account, worden uw tests opgeslagen en kunnen ze achteraf worden bekeken.

Dit overzicht is uiterst praktisch vanwege twee functies: U kunt de historische testgegevens oproepen door op de URL te klikken. Dat betekent dat u de volledige resultaten van alle tests van het afgelopen jaar kunt zien.

En u kunt afzonderlijke tests markeren en met elkaar vergelijken om een snel overzicht te krijgen van de ontwikkeling van uw pagina's.

Conclusie: Webpagetest is veel krachtiger dan andere gratis tools

De directe vergelijking van verschillende pagina's is zeker de meest krachtige functie van Webpagetest. Het stelt u in staat uw site te bekijken in relatie tot de concurrentie, rolmodellen of benchmarks in de sector. De resultaten die u krijgt zijn - naar webpagetest normen - ook goed voorbereid en gemakkelijk te begrijpen.

Met de tijdreeksanalyse kunt u ook een volledig beeld krijgen van de ontwikkeling van de laadtijd van uw pagina. Zo kunt u precies zien welke optimaliseringsmaatregelen of wijzigingen uw pagina, de laadtijd en de gebruikerservaring hebben beïnvloed.

Met deze twee functies bent u in staat om alle relevante wijzigingen op uw pagina's vast te leggen en, nog belangrijker, te analyseren.

Weet je nog een handige functie van Webpagetest die we vergeten waren? Dan kijken we uit naar uw commentaar!

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.