Binnenkort een nieuwe Google ranking factor: Core Web Vitals

In 2021 komt Google met een nieuwe update voor het algoritme, waarmee de techniek van een website meer gewicht krijgt bij het bepalen van je positie in Google (er zijn inmiddels meer dan 200 van deze factoren). Techniek is natuurlijk een groot woord, specifiek gaat het dan ook om de Core Web Vitals, een verzamelnaam met diverse aspecten gericht op de gebruikerservaring van je website: Largest Contentful Paint, First Input Delay en Cumulative Layout Shift. In deze blog leggen we uit wat de Core Web Vitals zijn en hoe je deze kunt verbeteren.

Largest Contentful Paint

Het laden van een webpagina duurt altijd even, eerst wordt de HTML ingeladen, dan de CSS en zo gaat het rijtje door. Met Largest Contentful Paint wordt er gekeken wanneer het grootste blok van de website is ingeladen. Denk bijvoorbeeld aan een plaatje in de header waar de browser even over doet. Hoe langer de browser erover doet om het grootste blok in te laden, des te langer je bezoeker moet wachten op een geladen website. Het is dus van belang dat dit binnen een acceptabele range zit.

De Web Core Vitals bevatten ook richtlijnen voor de scores, voor Largest Contentful Paint wordt er afgerekend op 2.5 seconden en op 4 seconden. Zit je binnen de 2.5 seconden, dan zit je in de goede range. Zit je tussen de 2.5 seconden en 4 seconden? Dan is er ruimte voor verbetering. Zit je boven de 4 seconden? Werk aan de winkel!

First Input Delay

Een website inladen is één ding, maar dat houdt niet direct in dat deze gelijk te gebruiken is door de bezoeker. Denk bijvoorbeeld aan het aanklikken van een menu of het plaatsen van een product in het winkelmandje. Des te eerder de pagina interactief is, des te beter dit is voor je First Input Delay score. Ook hier zijn er weer twee ranges waar je rekening mee moet houden: is je website binnen 100 ms interactief? Dan hoef je je nergens zorgen om te maken. Doe je er echter langer over dan 300 ms? Tijd om aan de bak te gaan!

Cumulative Layout Shift

Je kent het vast wel: je landt op een pagina, wilt ergens op klikken en… ja hoor, je klikt precies op een banner of link omdat deze op het laatste moment werd ingeladen en daardoor de structuur van de pagina wijzigde. Erg frustrerend, zeker omdat je vaak direct naar een andere pagina wordt gestuurd. Dit noemen we de Cumulative Layout Shift. Elke verspringing van website elementen wordt in deze score verzameld, waarbij het belangrijk is dat je website onder een score van 0.1 blijft. Bij een score van 0.25 of hoger is verbetering nodig.

Scores inzichtelijk maken

Nu we weten wat de Core Web Vitals in houden, rest de vraag hoe je ze meet en wat je eraan kunt doen om je scores te verbeteren.

Het meten van de drie aspecten kan via zowel PageSpeed Insights, waarbij je elke pagina individueel kunt toetsen, als via Google Search Console (voorheen Webmaster Tools), waar je direct kunt zien waar je website te laag op scoort en welke pagina’s dit zijn.

Als voorbeeld nemen we de website van Envoker via de PageSpeed Insights tool:

Zoals je kunt zien is de PageSpeed score van 93 hoog, maar wat betreft de Web Core Vitals is er nog ruimte voor verbetering. Zowel de Largest Contentful Paint als First Input Delay scoren goed, maar voor de Cumulative Layout Shift is er nog werk aan de winkel.

Hoewel er 47% van de pagina’s hoger scoren dan 0.25 en er zeker verbetering in zit, is dit geen reden voor paniek. De pagina’s laden namelijk ontzettend snel, waardoor deze gemeten verspringing in de praktijk niet merkbaar is.

Met name voor gebruikerservaring is de prioriteit daarom niet hoog, maar gezien dit onderdeel van de ranking factors wordt, wel belangrijk om te zijner tijd bij te sturen.

Zo verbeter je je scores

Het verbeteren van de Core Web Vitals is altijd al belangrijk geweest, omdat dit simpelweg de gebruikerservaring van je website ten goede komt. Nu het een ranking factor wordt is dit belang nog dringender geworden.

1. Maak gebruik van goede hosting + CDN

Allereest is het belangrijk dat de fundering van je website goed is. Je kunt optimaliseren wat je wilt, maar als je website op een trage server staat dan is het dweilen met de kraan open. Zorg er dus voor dat je website wordt gehost op goede infrastructuur. Het inladen van plaatjes via een Content Delivery Network (CDN) zal ook een positief effect hebben op de laadtijden, doordat de web server wordt ontlast.

2. Maak gebruik van Lazy Loading

Met lazy loading zorg je ervoor dat plaatjes pas worden ingeladen wanneer iemand ook daadwerkelijk naar beneden scrolt. Zeker wanneer je website veel plaatjes bevat kan dit een significante impact hebben op de scores en daarmee de gebruikerservaring.

3. Verklein je CSS

Door spaties e.d. te verwijderen uit je CSS wordt de code leesbaarder gemaakt voor de browser, waardoor deze sneller omgezet kan worden het daadwerkelijke design. Ironisch genoeg wordt de CSS wel minder goed leesbaar voor mensen ?.

4. Javascript

Zorg ervoor dat javascript kan laden zonder dat dit de hele pagina ophoudt, vaak is dit namelijk een van de redenen dat pagina’s er te lang over doen om interactief te worden. Ook het gebruik van javascript van derde partijen (Hotjar bijvoorbeeld) kan roet in het eten gooien. Is Hotjar klaar met het verzamelen van data en wordt de tool even niet gebruikt? Haal dan ook gelijk de code van de website af.

Bovenstaande suggesties zijn breed en toepasbaar voor zo’n beetje elke website. Elke website is weer anders en daarmee ook de issues die er zijn en hoe deze opgelost dienen te worden. Uiteraard kun je op ons rekenen om dergelijke issues boven tafel te halen, zodat ze vervolgens opgelost kunnen worden. Nu nog alleen belangrijk voor de gebruikerservaring, maar vanaf 2021 dus ook voor je positie in Google!