Het mag geen verrassing meer zijn dat Google enorm veel waarde hecht aan de gebruikerservaring van zijn gebruikers. Dit beperkt zich dan ook niet tot enkel de gebruikerservaring binnen het eigen platform, maar ook de gebruikerservaring op de websites waar de zoekmachine bezoekers naartoe stuurt.
Afgelopen jaar heeft Google aangekondigd belangrijke wijzigingen te gaan doorvoeren aan het algoritme, waarbij nieuwe ranking-factoren zullen worden toegevoegd, genaamd Google’s Core Web Vitals. Deze zullen onderdeel zijn van de Page Experience update (verwacht in juni 2021). Je raadt het al: de Core Web Vitals hebben alles te maken met de gebruikerservaring van jouw website.
In dit blog nemen we je mee in wat de Core Web Vitals inhouden, wanneer ze van toepassing zullen worden en vooral: waar moet je nú mee beginnen om je voor te bereiden op de update?
Wat zijn de Google Core Web Vitals?
Volgens Google gaat de user experience van een bezoeker gepaard met drie metrics. De Core Web Vitals van Google zijn dan ook de volgende:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Alle drie de factoren worden beoordeeld aan de hand van een schaal: ‘Slecht’, ‘Moet worden verbeterd’ of ‘Goed’. Zo weet je direct wat Google van jouw pagina vindt op het gebied van deze metrics. Super handig natuurlijk, maar wanneer doe je het dan precies goed? Dat leggen we per metric hieronder verder uit!
Largest Contentful Paint (LCP)
De Largest Contentful Paint meet de laadsnelheid van een pagina. Om precies te zijn geeft de LCP aan hoe lang het duurt voordat het grootste content-element op een pagina geladen is. Hierbij gaan ze er vanuit dat het grootste content-element hoogstwaarschijnlijk ook het belangrijkste element van de pagina is. Dit kan een stuk tekst zijn, maar bijvoorbeeld ook een belangrijke afbeelding.
Hieronder zie je een voorbeeld van het inladen van het grootste content-element op onze pagina over het Digital Growth Canvas. Het moment dat de header-afbeelding geladen is, is het moment dat de LCP voltooid is.
Wat is een goede score voor LCP?
In de richtlijnen van Google staat dat voor een goede score op de LCP de laadtijd van het grootste content-element onder de 2,5 seconden moet zijn. Tussen 2,5 seconden en 4 seconden zijn er optimalisaties nodig om de gebruikerservaring te verbeteren. Een laadtijd langer dan 4 seconden wordt beoordeeld als ‘Slecht’ en zal dan ook vaak als gevolg hebben dat een bezoeker meteen weer weggaat. En dat is natuurlijk het laatste wat we willen.
First Input Delay (FID)
Bij de First Input Delay wordt gekeken naar de vertraging tussen het moment dat de gebruiker interactie heeft met de pagina (klikt op een link of button) en de tijd dat de pagina op deze interactie reageert. Het gaat hierbij enkel om de eerste interactie die een bezoeker heeft met de pagina. Zoomen en scrollen wordt niet meegerekend bij de FID.
De FID is een belangrijke metric voor gebruikerservaring, omdat een bezoeker na het klikken bevestiging wil hebben dat er iets gebeurt met de pagina. Wanneer het erg lang duurt voordat de pagina lijkt te reageren op een klik, raakt een bezoeker gefrustreerd en verlaat hoogstwaarschijnlijk de website.
In het voorbeeld hieronder is de FID voltooid op het moment dat we zien dat de nieuwe pagina (die achter de button hangt) geladen wordt.
Wat is een goede score voor FID?
In de richtlijnen van Google staat dat voor een goede score op de FID de vertraging maximaal 100ms mag duren. Dit komt voort vanuit de gedachte van o.a. Google en Jakob Nielsen dat 0,1 seconden de limiet is om een gebruiker het idee te geven dat het systeem heeft gereageerd op zijn interactie.
Heb je een FID van tussen 100ms en 300ms? Dan zul je de score ‘Moet worden verbeterd’ krijgen. Duurt het langer dan 300 ms, dan krijg je van Google de beoordeling ‘Slecht’.
Cumulative Layout Shift (CLS)
De laatste Core Web Vital (en waarschijnlijk de meest herkenbare) is de Cumulatieve Layout Shift. De CLS van een pagina meet in welke mate de layout van een pagina verschuift tijdens het laden. Een pagina wordt namelijk niet in één keer geladen, maar dit gebeurt in verschillende delen. Het zegt dan ook iets over de visuele stabiliteit van een pagina bij het inladen van de verschillende elementen.
Onderstaande video vertelt je eigenlijk alles al over de CLS en waarom Google dit meeneemt in de Google Core Web Vitals:
Herken je deze frustratie al? Hierboven zie je dus hoe cruciaal een stabiele layout van een pagina is voor de gebruikerservaring van je bezoekers.
Wat is een goede score voor CLS?
Wat belangrijk is om mee te nemen bij de score van CLS, is dat (de naam zegt het al) het een ‘cumulatieve’ berekening is: het totaal van alle afzonderlijke indelingsverschuivingsscores.
Layout Shift Score
De ‘layout shift score’ wordt berekend door onderstaande formule:
layout shift score = impact fraction * distance fraction
De impact fraction meet welk gedeelte van het scherm (boven de vouw) beïnvloed wordt door de verschuiving. In onderstaand voorbeeld zie je in het rode kader het totale beïnvloedde gebied op het scherm door de verschuiving. In dit geval gaat het om 75% van het scherm, waardoor de impact fraction 0.75 bedraagt.
De distance fraction meet de horizontale of verticale afstand die een content-element verschuift. In hetzelfde voorbeeld hierboven, zie je dat de content op het zichtbare gedeelte van de pagina 25% naar beneden schuift. De distance fraction is dus 0.25.
De layout shift score van dit element is dus:
layout shift score = 0.75 * 0.25 = 0.1875
Voor een goede score vanuit Google voor CLS mag het totaal van alle layout shifts op een pagina maximaal 0.1 zijn. Heb je een score tussen de 0.1 en 0.25, dan krijg je de beoordeling ‘Moet worden verbeterd’. Een CLS groter dan 0.25 krijgt de beoordeling ‘Slecht’.
Nu je weet wat de nieuwe ranking-factoren inhouden en welke scores je moet behalen om te voldoen aan de vereisten, gaan we je meenemen in hoe je hier daadwerkelijk mee aan de slag kan gaan.
Een goede score op Google’s Core Web Vitals? Hier moet je nú mee aan de slag!
Hoe weet ik nu hoe mijn website scoort op de nieuwe Core Web Vitals? Geen paniek, je hoeft ze gelukkig niet zelf te berekenen! Google heeft ons hier de juiste handvaten voor gegeven om direct mee aan de slag te gaan!
Site-vitaliteit rapport in Google Search Console
Om de beoordelingen van Google op de factoren van de Core Web Vitals te achterhalen, kan je het beste gebruik maken van het rapport ‘Site-vitaliteit’ in Google Search Console. Dit rapport geeft aan de hand van daadwerkelijke gebruiksgegevens (of ‘praktijkgegevens’) een score voor URL-groepen (groepen van vergelijkbare pagina’s) op de website. Dit rapport wordt opgesplitst in een rapport voor ‘Mobiel’ en een rapport voor ‘Desktop’.
Een voorbeeld van het Site-vitaliteit rapport (Mobiel) vanuit Google Search Console:
In het overzicht hierboven is direct al te zien waar de verbeterpunten liggen voor de website. De hoogste prioriteit zal natuurlijk liggen bij de optimalisaties op de factoren waar je nu de score ‘Slecht’ behaald. Ga hier dus ook zo snel mogelijk mee aan de slag!
Nu we weten welke factoren de grootste knelpunten zijn op dit moment, is het tijd om te achterhalen waardoor we dan een lage score krijgen. Dit kun je doen door verschillende URL’s uit de aangegeven URL-groepen te testen met behulp van Pagespeed Insights, Google Chrome Lighthouse en Webpagetest.org.
Binnen Pagespeed Insights krijg je dan ook meteen een beoordeling op de Core Web Vitals voor de geteste pagina te zien:
Zo zie je nogmaals per pagina waarop je dient te verbeteren! Vervolgens zie je onder ‘Aanbevelingen’ en ‘Diagnostische gegevens’ ook de zaken die nu de grootste vertragingen of layout-verschuivingen veroorzaken!
Als het goed is, zie je ook een verband tussen deze aanbevelingen bij de URL’s in verschillende URL-groepen. Met behulp van de verdiepingen vanuit Lighthouse en Webpagetest.org kan verder onderzocht worden welke elementen op de website aangepast dienen te worden om de scores op de Core Web Vitals te verbeteren.
Welke metrics beïnvloeden de scores van de Core Web Vitals?
De Largest Contentful Paint (LCP) wordt met name beïnvloed door:
- Lange reactietijd van de server
- JavaScript en CSS die de weergave blokkeren
- Laadtijd van bronnen
- Client-side rendering
De First Input Delay wordt met name beïnvloed door een zware Javascript-uitvoering. Door te optimaliseren hoe JavaScript wordt verwerkt en uitgevoerd, wordt de FID direct verminderd. Om dit te optimaliseren:
- Verdeel lange taken
- Optimaliseer pagina’s op interactie-gereedheid
- Gebruik een webwerker
- Verkort de JavaScript-uitvoeringstijd
De meest voorkomende oorzaken van een slechte CLS zijn:
- Afbeeldingen zonder afmetingen
- Advertenties, insluitingen en iframes zonder afmetingen
- Dynamisch geïnjecteerde inhoud
- Webfonts veroorzaken FOIT (flash of invisible text) / FOUT (flash of unstyled text)
- Acties die wachten op een netwerk reactie voordat DOM wordt bijgewerkt
En nu zelf aan de slag!
Na het lezen van dit blog zou je alles moeten weten over Core Web Vitals, maar nog belangrijker: waar moet je nú mee beginnen om je voor te bereiden op de update?
Meer over Joris
Binnen de online marketing vinden er dag in, dag uit ontwikkelingen plaats. Dat vind ik zo mooi aan het vak!
Joris Krauweel
Former Lead SEO
