Via diverse kanalen zagen we afgelopen week een aantal reacties dat mensen hard bezig waren geweest met het optimaliseren van hun website maar dat hun score opeens heel slecht was. Waarom? GTmetrix heeft in november 2020 de grootste verandering tot nu toe ondergaan, waarbij de oude PageSpeed ​​/ YSlow- bibliotheken zijn vervangen door het nieuwe Lighthouse, de standaard van Google om prestaties van een website te meten. Nu GTmetrix is gebaseerd op Lighthouse, is het nieuwe GTmetrix-rapport opnieuw ontworpen om de Lighthouse-gegevens en -statistieken te integreren. Het blijft een fantastische tool om je WordPress website speedtest te optimaliseren.

Wat is er veranderd in GTmetrix? Er is een nieuw scoresysteem geïmplementeerd, waardoor een geheel nieuwe GTmetrix-uitslag ontstaat , naast nieuwe prestatie- en structuurscores. In het nieuwe GTmetrix-rapport zijn ook nieuwe tabbladen, visualisaties, grafieken en diepere inzichten toegevoegd.

In dit artikel leggen we in detail alle wijzigingen aan het nieuwe GTmetrix-rapport uit, gebaseerd op de originele blog van de eigenaren engt  hoe het zich verhoudt tot de oude PageSpeed ​​/ YSlow-rapporten, die we hierna Legacy Reports zullen noemen.

  1. Waarom een website speedtest met GTmetrix?
  2. Details over beoordeling en score in GTmetrix
  3. Wat is de GTmetrix-grade?
  4. Prestatiescore in GTmetrix
  5. Verschil tussen verschillende testresultaten
  6. Structuurscore in GTmetrix
  7. Aangepaste GTmetrix-audits
  8. Core Web Vitals van Google in GTmetrix
  9. Nieuwe tabbladen in GTmetrix
  10. Het tabblad Samenvatting in GTmetrix
  11. Het tabblad Prestaties in GTmetrix
  12. Kleurcodering en context
  13. Uitleg over de waterfall in GTmetrix.com
  14. Uitleg over het video tabblad in GTmetrix.com
  15. Uitleg over het history tabblad in GTmetrix.com
  16. Verschil tussen oude en nieuwe GTmetrix
  17. Extra tips om je website snelheid te optimaliseren met GTmetrix
  18. Heb je een Pro-account van GTmetrix nodig?
  19. Conclusie

Waarom een website speedtest met GTmetrix?

Zoals je misschien weet zijn wij dagelijks wel te vinden op de digitale snelweg. Bij Lamper Design houden we ons naast het bouwen van WordPress websites & WooCommerce webshops en website onderhoud, ook veel bezig met het optimaliseren van WordPress websites. Vaak doen wij de technische optimalisatie voor een optimale websitesnelheid en steeds vaker nemen we daar ook de conversieoptimalisatie van een website of webshop in mee omdat het een het ander meestal niet uitsluit.

GTmetrix website speedtest Lamper Design

GTmetrix website speedtest Lamper Design

Wij zijn graag kritisch op onze eigen resultaten.Wij kunnen ons voorstellen dat als je aannemer bent en door de wijde wereld rijdt, dat je oog hebt voor alle prachtige bouwwerken die je onderweg tegenkomt. Hetzelfde geldt voor een hovenier die naar nieuw aangelegde tuinen kijkt. Dit scharen wij onder beroepsdeformatie. En als je kritisch bent, zoals wij zijn, dan zie je altijd verbeterpunten. Niet alleen in het werk van anderen maar juist ook in dat van je eigen bedrijf.

Nu hebben wij een voordeel ten opzichte van eerder genoemde beroepsgroepen. Of eigenlijk twee voordelen. Wij hoeven de deur niet uit om het werk van andere webdesignbureau’s te bekijken en daarnaast hoeven we ook niet heel hard te zoeken, aangezien het vaak of door de collega’s of door de klanten zelf gepromoot wordt op sociale media.

Hoe vaak zie jij het? “Wij hebben een nieuwe website!” En dan nu naar onze nare gewoonte. Wij doen dan eigenlijk altijd maar 1 ding: wij kopiëren de URL en plakken deze in ieder geval in GTmetrix en meestal ook in Google Pagespeed Insights. Hieruit halen wij in principe binnen enkele seconden wat deze website waard is en hoeveel zorg er besteed is aan de technische optimalisatie. Als je nog meer insights wilt zien dan kun je deze vier tools gebruiken om een website te testen.

Design van een website is niet alles

Te vaak zien wij allemaal lovende reacties over een prachtig design. Begrijp ons niet verkeerd, het design van een website is zeker belangrijk, maar in onze beleving is dit gelijk aan, of misschien zelfs ondergeschikt aan de functionaliteit en snelheid die een WordPress website te bieden heeft. Kijk bijvoorbeeld eens naar de webshops van Amazon. Vind je die het toppunt van design?

Tot zover het meest negatieve stuk van deze blog. We gaan vanaf nu in een positieve streep recht omhoog. We gaan je nu uitleggen hoe je de scores van GTmetrix moet interpreteren en verbeteren om de snelheid van je WordPress website naar een hoger nivevau te brengen. Nog te vaak zien wij vragen over deze scores in bijvoorbeeld onze eigen Facebookgroep WordPress Support NL-BE. Als je weet wat je moet doen om de scores te verbeteren, kun je direct zelf aan de slag.

Details over beoordeling en score in GTmetrix

Het scoresysteem dat wordt gebruikt in het nieuwe GTmetrix-rapport is gebaseerd op het Lighthouse-scoresysteem. Het is echter aangevuld met de eigen expertise en gepatenteerde formules om de unieke GTmetrix-score te leveren waar gebruikers op vertrouwen.

GTmetrix grades website speedtest

GTmetrix grades websites speedtest

Als je de URL van je website ingevoerd hebt, krijg je direct de testresultaten te zien, uitgedrukt in één letter en twee procentuele getallen. Deze uitslag is de nieuwe GTmetrix Grade – een berekend cijfer afgeleid van de nieuwe prestatie- en structuurscores , die de oude PageSpeed ​​en YSlow Scores (Legacy Reports) vervangen.
Is een A-score onhaalbaar? Zeker niet, maar dit is erg afhankelijk van de complexiteit van je website. Het is onder andere afhankelijk van het aantal en soort plugins, het gebruikte WordPress thema op jouw website en waar je website gehost wordt.
Facebook likebox vertraagt je website
Er is een behoorlijk aantal zaken dat je laadtijd kan vertragen. Een Facebook Likebox bijvoorbeeld, is een vertrager. Maak je gebruik van JetPack? Test je website eens met en zonder JetPack actief. Als laatste voorbeeld: iedere blogger of webshop eigenaar wil natuurlijk een koppeling met Pinterest. Hiervoor moet een tag geladen worden. Test je website eens met en zonder deze tag.
Verder in deze blog leggen we je uit hoe je GTmetrix kunt lezen en dan weet je dus ook wat je moet aanpassen om de scores te verbeteren.

Wat is de GTmetrix-grade?

De GTmetrix Grade combineert hoe snel een webpagina presteert (in termen van laden, interactiviteit en visuele stabiliteit) en hoe goed deze is gebouwd voor optimale prestaties. Dit cijfer geeft beter de algemene webpagina-ervaring weer, omdat het zowel de front-end-structuur als de feitelijke prestaties die door de gebruiker worden ervaren meet.

GTmetrix Grade uitleg

GTmetrix Grade

De GTmetrix-score is een gewogen gemiddelde van de twee nieuwe procentuele scores:

  • De prestatiescore (70%)
  • De structuurscore (30%)

De GTmetrix-grade is gebaseerd op een eenvoudige formule, die momenteel een 70/30 weging toekent aan de prestatie- en structuurscores.

GTmetrix Grade en Performance & Structure Scores worden continu gecontroleerd en aangepast; ze zullen in de loop van de tijd evolueren als er meer prestatiegegevens ontvangen en geanalyseerd zijn.

GTmetrix performance score

GTmetrix performance score

Prestatiescore

De prestatiescore is in wezen de Lighthouse-prestatiescore, zoals vastgelegd door GTmetrix-tests, met hun eigen browser, hardwarespecificaties en gespecificeerde analyseopties (AdBlock, verbindingssnelheden, enz.).
De prestatiescore vertelt hoe goed je pagina presteert vanuit gebruikersperspectief. Deze score bestaat uit 6 belangrijke statistieken met de volgende weging:

Elke statistiek wordt gemeten en berekend als een score, vervolgens vergeleken met een minimale drempel, en het totale resultaat (met de juiste weging) vormt de uiteindelijke prestatiescore.

De volledige details van je prestatiescore worden vermeld op het tabblad Prestaties van het GTmetrix-rapport.

Waarom is er verschil tussen GTmetrix prestatiescore en de scores uit Google PageSpeed ​​Insights of web.dev?

Hoewel de officiële Google-tools ook worden aangestuurd door Lighthouse, gebruiken ze hun eigen hardware en testmethoden om de prestatiescore te genereren.

Hier zijn een paar belangrijke verschillen waardoor de scores kunnen variëren:

  • Geografische verschillen
    Het is onbekend of Google tests uitvoert op servers op basis van hun geografische regio. Met GTmetrix kun je zelf bepalen uit welke testregio je een pagina van jouw website wilt analyseren.
  • Hardwareverschillen
    GTmetrix en Google zullen waarschijnlijk verschillende CPU-/geheugenaanduidingen hebben voor tests, wat de metrische gegevens zal beïnvloeden.
  • Netwerkverschillen
    Verschillen in netwerkverbindingen en varianties kunnen bijdragen aan veranderingen in individuele statistieken.
  • Andere Google-magie
    Google heeft mogelijk aanvullende overwegingen bij het berekenen van de prestatiescore (bijv. Lantaarn voor CPU/netwerkbeperking ).

Hoewel de GTmetrix Performance Score en de door Google gegenereerde Performance scores niet direct vergelijkbaar zijn, zouden ze theoretisch gezien wel gelijk moeten zijn.

Meer informatie over de GTmetrix Performance Score verhouding tot andere op Lighthouse gebaseerde tools.

Structuurscore

De structuurscore is een eigen gepatenteerde beoordeling van Lighthouse Opportunity- en Diagnostic-audits.

GTmetrix structuur score

GTmetrix structuur score

De structuurscore vertelt je hoe goed een webpagina is opgebouwd voor optimale prestaties. Deze audits worden uitgevoerd en puntwaarden worden hieraan toegewezen op basis van verschillende factoren, waaronder potentiële besparingen en belang. Bekijk hier een volledige lijst van deze structuuraudits.
Net als bij de PageSpeed- en YSlow-scores in het Legacy-rapport, weerspiegelt je structuurscore hoe goed je site is gebouwd voor optimale prestaties.

Aangepaste GTmetrix-audits

Naast de standaard Lighthouse audits heeeft GTmetrix ook eigen custom audits opgenomen die ze relevant achten voor webprestaties. Deze aangepaste GTmetrix-audits omvatten:

  • Schakel Keep-Alive in
    • Dit wordt alleen geactiveerd op pagina’s die HTTP / 1.1 gebruiken zonder dat de Keep-Alive ON-instructie wordt gedetecteerd.
    • Als wordt gedetecteerd dat je pagina HTTP / 2 gebruikt, heeft deze audit geen invloed op jou.
  • Combineer afbeeldingen met behulp van CSS-sprites
      • Als je pagina meerdere kleine, spritebare afbeeldingen bevat, wordt deze audit geactiveerd.
      • Houd er rekening mee dat deze audit verschillende drempels heeft, afhankelijk van of je pagina HTTP/1.1 of HTTP/2 gebruikt.

De voordelen van CDN’s zijn in eerdere artikelen besproken en bij GTmetrix hebben ze nog steeds het gevoel dat ze een belangrijke rol spelen bij het leveren van een wereldwijd consistent snelle website.

Hoewel het niet zo bestraffend is als het ooit was in Legacy Reports, zal GTmetrix doorgaan met het markeren van statische bronnen die op een CDN kunnen worden geserveerd voor een betere wereldwijde levering.

Het vermijden van CSS @importwaar mogelijk is nog steeds een aanbevolen praktijk, omdat alle importrichtlijnen die de browser tegenkomt (zonder het deferattribuut) onmiddellijk zullen worden gedownload, verwerkt en uitgevoerd.

Dit kan de weergave van de rest van een webpagina blokkeren.Vermijd CSS @import en Gebruik een Content Delivery Network (CDN)

GTmetrix website speedtest verbeteren

GTmetrix website speedtest resultaten

Hebben structuurscores invloed op de algemene prestatiescores? Nee, de structuurscores hebben geen directe invloed op de prestatiescores. Het verbeteren van de structuurscore kan over het algemeen wel de paginaprestaties verbeteren. Dit moet resulteren in betere prestatiescores en bij uitbreiding ook een betere GTmetrix-graad.
Zie de structuuraudits in het nieuwe GTmetrix-rapport als de instructiehandleiding voor betere webprestaties, en de Performance Score-statistieken als de stopwatch van je werkelijke webprestaties.

Het aanpakken van de structuuraudits kan dienen als een goed startpunt om de laadtijd van pagina’s binnen je WordPress website in het algemeen te verbeteren. Bovendien zijn sommige van de audits gecorreleerd en dus kan het oplossen van één audit gevolgen hebben voor andere.

Core Web Vitals van Google in GTmetrix

Google heeft Web Vitals vastgesteld als de belangrijkste statistieken om je op te concentreren voor een ​​snelle website-ervaring.

Web Vitals Google in GTmetrix

Core Web Vitals Google in GTmetrix

Meer uitleg over de Web Vitals vind je in onze kennisbank door hieronder op de titel te klikken:

Als je bij deze statistieken goede resultaten ziet, is dat een goede indicatie dat je een snelle en (wat Google noemt) een geweldige ervaring aan je bezoekers levert.

Web Core Vitals zijn een geweldige manier om een webpagina te benchmarken, aangezien ze zich richten op een kleine set van belangrijke statistieken die de meeste invloed hebben op de perceptie van prestaties; je vindt Web Vitals centraalin het nieuwe GTmetrix Report, naast je GTmetrix Grade en Performance / Structure Scores.

Lees meer over Web Vitals bij GTmetrix.

Nieuwe tabbladen Samenvatting, Prestaties en Structuur in GTmetrix 

Deze nieuwe release in november 2020 levert een geüpgraded GTmetrix-rapport met nieuwe tabbladen op. We nemen elk van de onderstaande tabbladen door:

Het tabblad Samenvatting in GTmetrix

Nieuw bij GTmetrix Reports is het tabblad Samenvatting, hier vind je een complete momentopname van de prestaties, structuur en laadgedrag van de door jou geteste pagina.

Beschouw dit tabblad als het primaire actiecentrum, aangezien de informatie hier alleen al voldoende kan zijn om belangrijke aanwijzingen te geven bij het verbeteren van de prestaties van een WordPress website. Hier ligt de basis van deze website speedtest.

GTmetrix samenvatting tab

GTmetrix samenvatting tab

Bovenaan het tabblad Samenvatting staat de nieuwe Snelheidsvisualisatie, het met intervallen vastgelegde laden van je pagina, met vlaggen die je verschillende Prestatiescore-statistieken markeren terwijl de pagina wordt geladen.

Dit geeft je meer context over de statistieken in relatie tot wat de bezoekers daadwerkelijk ervaren

GTmetrix snelheid visualisatie

GTmetrix snelheid visualisatie

Vervolgens zie je de belangrijkste structuurproblemen die het meest bijdragen aan de prestaties van een pagina in de sectie Belangrijkste problemen .

Concentreer u eerst op deze structuuraudits, aangezien deze de meeste invloed hebben op uw paginaprestaties.

Concentreer je op deze structuuraudits, aangezien deze de meeste invloed hebben op de paginaprestaties.

Als je jezelf als eerste concentreert op het verbeteren van deze audits, kan dit een trapsgewijs effect hebben op de andere structuuraudits en je algehele GTmetrix-cijfer en prestatie-/structuurscores drastisch verbeteren. Daarmee zorg je dus voor een betere en snellere WordPress website. Dat is je uiteindelijke doel.

Naarmate je de hier getoonde audits verbetert, zul je merken dat nieuwe audits verschijnen in de sectie ‘Belangrijkste problemen’ wanneer je opnieuw test; hierdoor kun je optimalisatie-inspanningen prioriteren op basis van hun impact op de prestaties van de website.

Hieronder zie je als voorbeeld de ‘Belangrijkste problemen’. Je vindt hier ook een nieuwe Pagina Details grafiek, die laat zien wat voor soort verzoeken er voor de pagina gedaan worden, net als het totale aantal verzoeken en bytegrootte.

GTmetrix pagina details samenvatting

GTmetrix pagina details samenvatting

Dit is handig om in één oogopslag te zien of je webpagina veel JavaScript, CSS, afbeeldingen, enz. bevat. Als je met de muisaanwijzer over een segment gaat, zie je aanvullende informatie over dat verzoektype als geheel.

GTmetrix pagina details samenvatting details

GTmetrix pagina details samenvatting details

Wat is de ideale laadtijd voor een website of webshop, zonder de realiteit uit het oog te verliezen? Wij zetten in op tussen de 1 en 2 seconden. Mocht je dit halen, dan ben je niet de snelste, maar zeker niet de langzaamste. Het kan altijd beter, maar dit is alvast een goed streven om jezelf als doel te stellen. Zorg in ieder geval voor de allerbeste caching voor WordPress website.

Dan de volgende vraag: wat is de ideale paginagrootte? Ik kan je alleen vertellen dat wij altijd proberen onder of rond de 1MB uit te komen. Dit is zeker haalbaar, ook met veel foto’s op de pagina. Een kanttekening bij de total page size is dat dit de grootte van de geteste pagina betreft. Je kunt een supersnelle geoptimaliseerde homepagina in je WooCommerce webshop hebben en een categoriepagina van 12MB. De tip die we je willen meegeven is: staar je niet blind op de homepagina.

Voor het aantal requests is geen ideaal getal te benoemen. Houd dit zo laag mogelijk. Hoe doe je dat? Kijk kritisch naar je plugins en stel jezelf twee vragen:

  1. Heb ik de plugins nodig die geïnstalleerd zijn of kan ik ook zonder?
  2. Heb ik de functionaliteit nodig, heb ik dan ook een plugin hiervoor nodig of zijn er andere oplossingen zoals bijvoorbeeld een stukje code?

Ten slotte vind je nog een sectie Meer van GTmetrix , waar er optimalisatietips en advies gegeven worden op basis van de pagina-analyse.

Meer tips van GTmetrix

Tips van GTmetrix

Afhankelijk van wat er gedetecteerd is tijdens het testen van de website, kunnen er tips en begeleiding geboden worden over het platform (bijv. WordPress, Shopify, etc.), beeldoptimalisatie, serverprestaties, CDN-gebruik, etc.

Het tabblad Prestaties in GTmetrix

Het tabblad Timings is verwijderd en vervangen door het nieuwe tabblad Prestaties, dat jou in detail de prestatiescore-statistieken laat zien.

GTmetrix performance tab

GTmetrix performance tab

Op het eerdere tabblad Timings zag je de fases van het laden van je website. Wanneer is alle content geladen, hoe lang duurt het voor alle CSS geladen is, enzovoort. Voor een deel hangt dit samen met je hosting. Vooral bijvoorbeeld de TTFB (Time To First Byte) is te beïnvloeden door een goede hosting te nemen voor jouw website. Dit is ook van toepassing in deze nieuwe performance-tab, hier vind je globaal in ieder geval deze waardes.

Elke statistiek is voorzien van een korte beschrijving (zodat je in één oogopslag weet wat het betekent) en heeft een kleurcode, afhankelijk van hoe de pagina het in die statistiek heeft gedaan.

GTmetrix performance metrics hide details

GTmetrix performance metrics details

Er is door GTmetrix hun best gedaan om wat meer context te geven over hoe de statistiek presteerde, met duidelijkere bewoording die de impact van die statistiek op de paginaprestaties weerspiegelt.

Kleurcodering en context

Afhankelijk van hoe de statistiek heeft gepresteerd, zie je de volgende kleuren en berichten:

GTmetrix kleurcoderingen

GTmetrix kleurcoderingen

Onder de statistieken van de prestatiescore zie je de browsertiming , dezelfde die in de oude versie van GTmetrix ook terug te vinden was in de Legacy GTmetrix-rapporten.

GTmetrix browser timings

Browsertimings (dwz timings van het vorige tabblad Timings in Legacy GTmetrix-rapporten) zijn opgenomen in het tabblad Prestaties.

Browsertimings hebben geen directe invloed op de prestatiescore, ze kunnen echter wel waardevolle aanvullende inzichten geven over de prestaties van de pagina en zijn het bekijken waard.

Het tabblad Structuur

De Structure Tab is de opvolger van de PageSpeed en YSlow tabs en bevat al je structuurgebaseerde Lighthouse audits en best practices voor optimale webprestaties. Een belangrijk tabblad dus om de website speed te optimaliseren. De informatie die hier te vinden is kan je daadwerkelijk helpen aan een snellere website.

Het nieuwe GTmetrix-structuurtabblad.

GTmetrix structuur tabblad

Je ziet hier de vertrouwde tabelgebaseerde lay-out met alle structuuraudits, georganiseerd op basis van hoe goed je zich eraan hebt gehouden, met de slechtst presterende audits bovenaan. De eerste winst bij het optimaliseren van je website vind je dus helemaal bovenaan deze tabel.

Nieuw bij GTmetrix is Impact voor audits – een eigen beoordeling die bestaat uit mogelijke besparingen, impact op statistieken en andere overwegingen. De impact geeft in wezen aan hoeveel de specifieke audit van invloed was op de prestatiescore.

Effecten worden berekend op basis van analysebevindingen en vervolgens in een van de volgende drempels geplaatst:

GTmetrix structuur audit impact

GTmetrix structuur audit impact

De totale impact van elke audit wordt berekend om de structuurscore van de totale pagina te vormen. Als je op een audit klikt, wordt deze uitgevouwen en worden de verzoeken uitgevouwen die hebben bijgedragen aan de impact van de audit.

Render blocking resources GTmetrix

Render blocking resources GTmetrix

Andere tabbladen

De rest van de GTmetrix-rapporttabbladen blijven over het algemeen gelijk aan eerdere versies van GTmetrix met enkele wijzigingen:

  • Waterval Tab
    • De GTmetrix Waterfall Chart verandert niet in deze release en geeft een uitstekende aanvulling op de Lighthouse-gegevens. Meer uitleg over de waterfall tab vind je in de volgende alinea.
  • Tabblad Video
    • De filmstrip die eerder op het tabblad Video stond, is verwijderd en vervangen door de snelheidsvisualisatie op de overzichtspagina.
    • Hoewel de videospeler niet gewijzigd is, moet je er rekening mee houden dat in de legenda van de videospeler de nieuwe Lighthouse-mijlpalen nog niet zijn geïmplementeerd (binnenkort beschikbaar).
  • Tabblad Geschiedenis
    • Veranderingen in het tabblad Geschiedenis omvatten de toevoeging van nieuwe grafieken voor metrische prestatiescores en de vervanging van de PageSpeed- en YSlow-grafieken door de GTmetrix- grafiek voor cijfer-/prestaties- en structuurscores .

Je kunt nog steeds de PageSpeed ​​/ YSlow-prestatiegeschiedenis bekijken als je een eerder gegenereerd Legacy GTmetrix-rapport bekijkt.

Uitleg over de waterfall in GTmetrix.com

In de waterfall van GTMetrix vind je in watervalvorm alles wat op de voor- en achtergrond geladen wordt op je website. Er zijn twee functies waar dit erg handig voor is.