Begin 2021 kwam Google met een nieuwe update waarin gebruikerservaring van webpagina’s centraal stond. Kort gezegd zijn er drie belangrijke Core Web Vitals waaraan webpagina’s moeten voldoen en die een belangrijke rol spelen in de organische zichtbaarheid. Doel van deze update is om webpagina’s zo relevant en gebruiksvriendelijk te maken voor bezoekers. In deze blog bespreken we de drie belangrijkste Web Vitals en geven we tips hoe je een WordPress website kunt optimaliseren op elk van deze drie factoren.
Inhoud
Largest Contentful Paint
We beginnen meteen met een Core Web Vital die voor veel vertraging zorgt bij een groot aantal websites. LCP is een meting die aangeeft in seconden hoe lang het duurt voordat de grootste content, tekst of beeld, wordt geladen. Veel bezoekers komen binnen op de homepage en dit is vaak de plek waar grote afbeeldingen, sliders en dynamische content worden getoond. Wat is dan een goede LCP score? Als je site onder de 2,5 seconden presteert dan is het goed. Alles boven vier is te hoog, wat storend kan zijn voor de bezoeker en mogelijk negatieve gevolgen voor organische posities.
LCP is relatief eenvoudig op te lossen, omdat je alleen naar de betreffende pagina hoeft te kijken en het grootste element hoeft te verkleinen of blokkerende elementen te verwijderen. Websites worden ‘mobile first’ geïndexeerd, dus houd bij het aanpassen van LCP rekening met de mobiele versie van je site.
First Input Delay
FID meet de tijd in milliseconden vanaf de eerste interactie van een bezoeker tot het moment dat de browser in staat is te reageren op die interactie. Scrollen en inzoomen worden hierin niet opgenomen. Heel simpel verwoord, hoe lang duurt het als je ergens op klikt en de functionaliteit volledig beschikbaar is.
Wat is dan een goede FID? Alles onder de 100 milliseconden is goed. Tussen de 100 en 300 geldt als een waarschuwing en vergt de nodige aanpassingen. Alles boven de 300 milliseconden is slecht en zou direct opgepakt moeten worden!
Cumulative Layout Shift
CLS kunnen we heel makkelijk beschrijven; de mate van verspringende of verschuivende elementen. Als iets plotseling verspringt op een pagina dan dit al snel tot frustratie leiden bij de bezoeker. Dit is met name dodelijk in het bestelproces!
Net als voorgaande Web Vitals wordt CLS uitgedrukt in een score, maar één die wat lastiger te bevatten is. Als je site 0,1 scoort (bij 75% van de bezoekers) dan zit je goed. Tussen de 0,1 en 0,25 geldt wederom als een waarschuwing en wordt aangeraden om te optimaliseren. Alles boven de 0,25 is slecht en moet dringend opgelost worden.
Hoe krijg je inzicht in Core Web Vitals?
We kunnen ons voorstellen dat termen als LCP, FID en CLS overweldigend zijn en dat je niet weet waar je moet beginnen met optimalisatie. Gelukkig zijn er veel manieren om te zien of jouw site wel of niet scoort op deze factoren. Hieronder volgen onze meest gebruikte:
Search Console
Search Console is voor elke marketeer en hopelijk elke website eigenaar bekend terrein. Dit is een gratis tool van Google waarin je inzicht hebt in de organische resultaten van jouw site. Hier upload je bijvoorbeeld ook de sitemap van je website. Je ziet in Search Console een overzicht van slecht presterende url’s, voor zowel mobiel als desktop:
Google Pagespeed Insights
Google Pagespeed Insights is net als Search Console een gratis tool van Google. Je hoeft alleen de url van je website in te voeren en direct zie je hoe jouw site scoort op alle web vitals. Ook hierbij geldt weer dat er onderscheid wordt gemaakt tussen mobiel en desktop. Vanwege mobiel first indexing is het aan te raden eerst te focussen op de mobiele resultaten.
Chrome DevTools
Als je veel in Chrome werkt dan is deze tab je waarschijnlijk wel bekend. Je kunt via Weergave > Ontwikkelaar > Lighthouse een rapport aanmaken. De resultaten zijn min of meer vergelijkbaar met die van de Pagespeed Insights.
GT metrix
Deze tool is geen onderdeel van Google, wat fijn is want je wilt bij het analyseren van web vitals objectieve feedback krijgen. GT Metrix heeft daarnaast mooie, duidelijke visualisatie van de ingeladen objecten. Samen met de duidelijke optimalisatie adviezen maakt dit onze favoriete tool voor het beoordelen van Web Vitals. Uiteraard adviseren we alle bovenstaande middelen te raadplegen om zo een duidelijk beeld van de situatie te komen.
Hoe optimaliseer je jouw website voor Core Web Vitals?
Alle losse factoren van Core Web Vitals hebben hun eigen optimalisatie mogelijkheden. Over het algemeen is er een aantal standaard optimalisaties die je kunt doorvoeren om de scores per Web Vital te verbeteren. Deze hebben we voor je op een rijtje gezet:
Lazy load
Lazy load is een techniek waarbij afbeeldingen of andere media pas worden geladen als ze zichtbaar worden voor de gebruiker. Dit kan de laadtijd van een website aanzienlijk verbeteren, omdat het aantal geladen elementen wordt beperkt tot wat echt nodig is.
Above the fold
Above the fold verwijst naar de content die zichtbaar is zonder dat de gebruiker hoeft te scrollen. Het is belangrijk om ervoor te zorgen dat de belangrijkste content boven de vouw wordt weergegeven, zodat de gebruiker niet hoeft te wachten op het laden van de rest van de pagina voordat hij of zij kan beginnen met het consumeren van de content.
Afbeeldingen comprimeren
Het comprimeren van afbeeldingen kan de laadtijd van een website verbeteren door het aantal bytes dat moet worden geladen te verminderen. Dit kan worden gedaan door het gebruik van tools om afbeeldingen te comprimeren zonder kwaliteitsverlies.
Gebruik CDN
Een content delivery network (CDN) is een netwerk van servers op verschillende locaties die gebruikt worden om content sneller te leveren aan gebruikers. Door gebruik te maken van een CDN, kan de laadtijd van een website verbeteren omdat de content dichter bij de gebruiker wordt geleverd vanuit een server in de buurt.
DOM
De Document Object Model (DOM) is een programmatic representation van een HTML of XML document. Het geeft webontwikkelaars de mogelijkheid om programma’s te schrijven die toegang hebben tot en het document kunnen wijzigen. Een efficiënte implementatie van de DOM kan de laadtijd en prestaties van een website verbeteren.
Caching
Caching is het proces waarbij data tijdelijk wordt opgeslagen om toekomstige toegang te versnellen. Door gebruik te maken van caching, kan de laadtijd van een website worden verbeterd omdat de server de data niet opnieuw hoeft op te halen uit de database of vanuit een andere bron.
Overbodig javascript en (inline) css
Het verwijderen van overbodig javascript en css kan de laadtijd van een website verbeteren door het aantal bytes dat moet worden geladen te verminderen. Dit kan worden gedaan door het verwijderen van code die niet langer wordt gebruikt of door het samenvoegen van verschillende bestanden in één enkel bestand.
Server response tijd
De server response tijd is de tijd die verstrijkt tussen het moment dat een gebruiker een verzoek doet aan een server en het moment dat de server begint met het verzenden van de response. Een lange server response tijd kan de laadtijd van een website vertragen en de gebruikerservaring negatief beïnvloeden. Om de server response tijd te verkorten, kunnen verschillende maatregelen worden genomen, zoals het optimaliseren van de database, het gebruik van caching en het verminderen van het aantal verzoeken dat de server moet verwerken.
Overmatig gebruik plugins
Het overmatig gebruik van plugins op een website kan de laadtijd en prestaties negatief beïnvloeden. Plugins kunnen handig zijn om bepaalde functionaliteiten toe te voegen aan een website, maar het is belangrijk om ervoor te zorgen dat alleen de plugins worden gebruikt die echt nodig zijn.
Aanpassing mobile template
Het is belangrijk om ervoor te zorgen dat een website goed werkt op mobiele apparaten. Dit kan worden bereikt door het gebruik van een responsive design of door het aanpassen van een aparte mobile template. Bij het aanpassen van een mobile template is het belangrijk om ervoor te zorgen dat klikbare elementen niet te dicht bij elkaar staan, zodat gebruikers niet per ongeluk op het verkeerde element klikken.
Hardcoded pixels migreren naar Google Tagmanager
In plaats van hardcoded pixels te gebruiken om de afmetingen van elementen op een website te definiëren, kan het gebruik van een tool zoals Google Tag Manager (GTM) de flexibiliteit en schaalbaarheid van een website verbeteren. GTM maakt het mogelijk om afmetingen en andere elementen op een website dynamisch te wijzigen zonder dat de code opnieuw hoeft te worden gepubliceerd.
Zoals je hebt kunnen lezen, komt er veel bij kijken om je website goed te laten presteren op de drie Core Web Vitals. We raden aan hier serieus naar te kijken omdat het direct invloed heeft op de organische prestaties van je site. Daarnaast is het altijd zinvol om periodiek een technische crawl van je website te doen voor betere SEO resultaten. Heb je hulp nodig bij bovenstaande? Neem dan vrijblijvend contact op met RoQQit.
