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.

 

GTmetrix waterfall

GTmetrix.com waterfall

404 errors op je website?

Een heel simpele regel is: elke 404 error vertraagt je website. Of dit nu zichtbaar is voor je bezoekers of niet. Dus los deze op. Kijk naar de rode regels in de waterfall en kijk welk bestand er mist. Pas dit aan. Heel soms is het beter een fake 1kb bestand te laten laden dan een 404 error.

Grootte van je afbeeldingen

Eerder schreven wij een blog over het optimaliseren van je afbeeldingen. Hiervoor is de waterfall erg handig, hier zie je exact welke bestandsgrootte er geladen wordt en zo pik je de grootste afbeeldingen er dus uit. Downloaden, optimaliseren en weer uploaden. Weer een melding weggewerkt. Check; de website speedtest helpt jou naar de beste WordPress website.

Uitleg over het Video tabblad

Zelf gebruiken wij deze optie niet heel vaak omdat de eerdere tabbladen meestal al voldoende informatie geven over de bottlenecks. Maar het is zeker een goed hulpmiddel.

Je neemt een video op van het laden van je website en soms kom je dan tot verrassende inzichten. Een foto die net iets langer duurt dan de rest, een stuk tekst dat traag verschijnt, dat soort zaken kun je opsporen met de gemaakte video.

Uitleg over het History tabblad

Ons beste volledig advies aan jou is: wees nooit tevreden met de snelheid van je website. Plan tijd in om regelmatig deze scans te draaien en actief aan de slag te gaan met het optimaliseren en daarmee bezig te blijven.

Ook bij ons gebeurt het helaas regelmatig dat er een niet helemaal geoptimaliseerde afbeelding wordt geüpload en wij hier later pas achter komen.

En daarom is het handig dat je ook de historie kunt bekijken als je een account maakt bij GTmetrix. Hier kun je vaak veel uit afleiden en een logische verklaring vinden voor een bepaalde vertraging die er eerder niet was.

Verschil tussen oude en nieuwe GTmetrix

Is er veel verschil tussen de oude en de nieuwe GTmetrix.com? Voor het grootste deel niet. De op Lighthouse gebaseerde statistieken die worden gebruikt om het nieuwe rapport te genereren, zijn wel fundamenteel anders dan de eerdere PageSpeed- en YSlow-aanbevelingen. Hoewel beide rapporten een aantal opties delen, mogen ze geen een-op-een-vergelijking zijn.

Aangezien de testmethodologie en meetgegevens zijn veranderd, moet je de nieuwe door Lighthouse aangedreven GTmetrix-rapporten beschouwen als een nieuwe benchmark voor je website speedtesten.

Het Legacy-rapport bevatte aanbevelingen op basis van hoe goed ze zich aan de best practices van PageSpeed/YSlow hielden; ze concentreerden zich alleen op de structuur of hoe goed een webpagina was gebouwd voor snelheid.

GTmetrix oud vs nieuw

GTmetrix oud vs nieuw

Het nieuwe GTmetrix-rapport richt zich echter op zowel prestaties als structuur, dus hoe goed een pagina daadwerkelijk heeft gepresteerd (laden, interactiviteit, visuele stabiliteit) voor een gebruiker, en ook hoe goed een pagina is gebouwd voor prestaties.

Al met al stelt het nieuwe GTmetrix-rapport een geheel nieuwe standaard voor webprestaties voor jouw website of WooCommerce webshop, aangezien het zich richt op de gebruikerservaring van uw pagina.

Extra tips om je website snelheid te optimaliseren met GTmetrix.

Serve scaled images

In de 2020 versie van GTmetrix is deze melding iets minder goed te vinden. Als je naar het tabblad Structure gaat vind je hier standaard alleen de top issues. Klik daarom rechts op ‘view all audits’ en je ziet alle opmerkingen die er zijn voor jouw website. Hier vind je waarschijnlijk ook de Serve Scaled images mocht deze melding van toepassing zijn op jouw website.

Deze melding loont in ieder geval de moeite om te bekijken. Vaak zijn afbeeldingen bijvoorbeeld op 800 x 600 geüpload, maar worden ze getoond op 200 x 150 pixels. Hier is dus een enorme winst te behalen door de foto’s te uploaden op het juiste formaat. Werkt dit altijd zo? Helaas niet.

Er zijn WordPress thema’s die afbeeldingen responsive inladen en dus verschillende formaten nodig hebben. Dit is niet eenvoudig op te lossen. Het hier door ons beschreven Enfold thema of het Avada thema bijvoorbeeld, doen dit op sommige posities.

Optimize images

Ook deze optie is in 2020 verplaatst naar het tabblad structuur en vaak pas zichtbaar na het aanklikken van ‘view all audits’. Als hier veel opties staan dan worden wij stiekem een beetje blij. Dit betekent namelijk dat er veel te verbeteren is met relatief weinig inspanning. Ondanks dat je de foto’s voor het web vanuit Photoshop opslaat met een stevige compressie van bijvoorbeeld 70%, krijg je alsnog deze melding.

Hoe los je het op? Dat is relatief simpel. Er staat namelijk een geoptimaliseerde link achter het ‘verkeerde’ bestand. Klik op de link, sla het bestand op (vergeet niet de extra toegevoegde tekst na de _ te verwijderen) en upload het bestand weer naar de aangegeven folder via FTP. Met deze beschreven methode is deze melding in het geheel weg te werken.

Wil je jouw afbeeldingen nog verder optimaliseren? Maak dan gebruik van webP afbeeldingen. Dit is een modern bestandsformaat dat door de meeste browsers ondersteund wordt. De Litespeed Cache plugin kan bijvoorbeeld automatisch webP images maken, ook WPRocket biedt mogelijkheden om WebP afbeeldingen te verwerken. En het kan bijvoorbeeld ook met de Shortpixel plugin.

Leverage browser caching

Wat wil dit zeggen? De bestanden die hier getoond worden hebben geen verlooptijd meegekregen. Een gecacht onderdeel van je website krijgt een bepaalde tijd mee dat het getoond moet worden. Na die tijd moet het opnieuw opgehaald worden.

Zie je hier bijvoorbeeld .jpg bestanden staan dan betekent dit simpelweg dat je caching niet goed ingesteld staat. Wil je echt een goede caching instellen? Wij gebruiken praktisch altijd de cache plugin LS Cache voor Litespeed caching, je leest hier meer over caching.

Enable Gzip compression

Krijg je een melding over Gzip? Controleer eerst bij je host of dit überhaupt actief is op de server. Veel low-budget providers hebben dit niet standaard aan staan of bieden hier helemaal geen mogelijkheid voor. Ook hiervoor geldt weer dat als het op de server actief is, je dit door middel van in het vorige punt genoemde caching plugins kunt inregelen.

Wil je weten of Gzip op jouw server aan staat? Test het hier online.

Minify CSS (en JavaScript)

Hoe beter je alle bestanden van je website geminified hebt hoe sneller deze zal laden. Ga dus actief aan de slag met het testen van verschillende caching plugins. Hier is echt geen pasklaar antwoord op te geven, het is afhankelijk van diverse factoren op de website. En 100% wegkrijgen is bij deze melding vaak niet mogelijk.

Houd er rekening mee dat zeker het samenvoegen van JavaScript bestanden tot vreemde problemen op je website kan leiden. Testen, testen, testen zal uiteindelijk het ideale resultaat opleveren.

Add expires headers

Eerder in deze blog hadden we het hier al over. Als je deze melding ziet betekent dit dat je caching niet goed ingesteld staat. Dat is een makkelijk antwoord. Ook deze melding zul je niet altijd volledig op kunnen lossen, vaak zijn er plugins die niet te cachen zijn omdat ze dan niet meer werken.

Een tip die we hierin nog kunnen geven is maak gebruik van CAOS Host Google Analytics Locally. Het probleem van het Google Analytics-script is dat dit altijd extern opgehaald moet worden. Met deze plugin plaats je het lokaal op jouw server zodat het gecacht kan worden.

Compress components with Gzip

De oplossing voor deze melding over Gzip? Check of je server Gzip ondersteunt op https://www.giftofspeed.com/gzip-test/ en activeer/configureer de juiste caching.

Configure entity tags (ETags)

Mocht je cache plugin dit niet op kunnen lossen, dan is het eenvoudiger om een stukje code aan de .htaccess op je server toe te voegen:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>

Avoid URL Redirects

Regelmatig testen wij websites en zien we dat deze melding naar voren komt. Vaak zijn dit websites waar de automatische doorstuur van www naar non-www of van http naar https niet goed ingeregeld is.

Wil je zeker weten dat je de juiste code in je .htaccess bestand hebt staan? Genereer deze zelf op http://www.aleydasolis.com/htaccess-redirects-generator/. Nog beter is om de redirects via de server te laten verlopen, dit zal een beter en sneller resultaat hebben dan via .htaccess.

Betaald account voor GTmetrix nodig?

Een vraag die wij regelmatig krijgen dat is: “Heb ik een betaald account nodig bij GTmetrix om het beste uit mijn testen te halen?” Het korte antwoord hierop: nee. Alleen is hier wel een aantal haken en ogen. Maak in ieder geval een gratis account zodat je kunt testen vanuit Londen, dit is de dichtstbijzijnde optie vanuit Nederland als je geen betaald pro account hebt. Een test uit de standaard locatie van Vancouver geeft altijd vertekend beeld omdat je bezoekers daar niet vandaan komen.

Waarom zou je een pro account nemen? Hier kunnen wij een aantal redenen voor aandragen. Zelf denken wij vooral dat als je een onlinemarketingbureau of een webdesignbureau hebt en je hier echt dagelijks mee bezig bent, dat je dan niet om een nieuw pro account heen kunt. Wat krijg je? Kort samengevat het volgende:

  • Meer dagelijkse testen, afhankelijk van je account;
  • Monitoren van meerdere pagina’s;
  • Geavanceerde analyse-opties;
  • Testen voor mobiele apparaten;
  • Meer locaties om te testen waaronder Amsterdam.

Zeker de laatste twee opties heb je eigenlijk simpelweg nodig om een zuiver beeld te creëren van de prestaties van jouw website of webshop.

Conclusie

Hoe mooi alle online speedtesten voor je website ook zijn, staar je absoluut niet blind op de scores die je ziet. Ook wij hebben regelmatig websites die simpelweg met de huidige hosting en het aantal en soort plugins niet supersnel zullen worden. Daarnaast is het zo dat iedere WordPress website die wij bekijken en testen verbeterpunten heeft.

De aanpassing in GTmetrix is echter wel een belangrijke stap vooruit. Waarom? In de loop van 2021 zullen de Core Web Vitals voor een deel de positie van jouw website in Google gaan bepalen. Meer hierover kun je o.a. lezen in deze blog van Moz over Core Web Vitals. Meer tips voor GTmetrix vind je hier in de kennisbank.

In deze blog werd een aantal keren caching genoemd door ons. Dit is een belangrijk onderdeel van een snelle website. Let wel op dat je bijvoorbeeld in een WooCommerce webshop altijd de winkelmand en afrekenpagina uitsluit van caching.

Houd er ook rekening mee dat de testen niet vanuit Nederland uitgevoerd worden. Hopelijk heb je wel een provider gekozen die een server in Nederland heeft staan. Als je een gratis account bij GTmetrix aanmaakt, heb je de mogelijkheid om als locatie voor Londen te kiezen. Doe dit altijd voor het best vergelijkbare beeld van jouw website. Houd er dus wel rekening dat dit wel milliseconden extra vertraging oplevert. Geen ernstig feit maar wel iets om rekening mee te houden.

Naast GTmetrix zijn er nog meer testen die allemaal verschillende onderdelen van je website beoordelen. Ook hier geldt: streef naar het hoogst haalbare maar verwacht geen onmogelijke dingen. Als voorbeeld: de eigen test van Google Pagespeed Insights geeft meestal aan dat Google Analytics de website vertraagt. Dat is op zich heel bijzonder aangezien het beide tools van Google zijn.

Een vertrager die wij regelmatig tegenkomen is de Facebook Pixel. Deze kun je ook niet optimaliseren, aangezien dit soort zaken niet gecacht kan worden. Gebruik deze dus alleen als je weet wat je ermee moet en vooral als je er ook daadwerkelijk gebruik van maakt. Hetzelfde geldt voor tools als Hotjar, Leadinfo en andere tools die extern data opslaan of ophalen. Caching plugins als LS Cache en WP Rocket bieden wel mogelijkheden om dit soort zaken af te vangen en pas te laden als een pagina helemaal geladen is. Maar kijk simpelweg of je dit echt nodig hebt en laat het weg als dit niet het geval is.

Dit artikel is voor een deel met toestemming gebaseerd op het originele artikel van GTmetrix.com.

Heb jij met behulp van de bovenstaande blog jouw website geoptimaliseerd? Laat de resultaten weten in een reactie onder deze blog.