Cumulative Layout Shift (Core Web Vitals Guide)

Google is begonnen met het uitrollen van een reeks nieuwe ranking factoren die de gebruikerservaring van een websitepagina meten. Deze factoren noemen ze de Core Web Vitals. In een serie van 3 blogs leggen we elk onderdeel van de Core Web Vitals uit: Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS).

Wat is Cumulative Layout Shift (CLS)?

Deze ranking factor meet de stabiliteit van een websitepagina. Als er tijdens het laden van de pagina elementen boven de fold onverwacht verschuiven, krijg je een slechte CLS score.

Denk bijvoorbeeld aan een banner die traag geladen wordt en daardoor de meeste content al zichtbaar is, maar zodra de banner dan geladen is, duwt deze de content eronder naar beneden.

Om een goede gebruikerservaring te bieden, moeten websites ernaar streven naar een CLS lager dan 0,1.

Hoe meet je de CLS?

Het meten van de individuele factoren van de Core Web Vitals is eenvoudig. Met PageSpeed Insights van Google krijg je inzichtelijk hoe jouw websitepagina scoort:

1. Ga naar https://www.webpagetest.org/
2. Vul de websitepagina URL in
3. Druk op de knop ‘Analyseren’

Nadat de pagina geanalyseerd is, krijg je alle scores te zien van de Core Web Vitals. Als je wat naar onderen scrollt krijg je ook aanbevelingen te zien waarmee je de scores kan verbeteren.

Hoe verbeter je de CLS score?

De score voor CLS kan je verbeteren door ervoor te zorgen dat elementen een bepaalde grootte toegewezen krijgen. Zo weet elk element van te voren waar die komt te staan en zullen er geen onverwachte verschuivingen onstaan.

1. Gebruik de width en height attributen voor afbeeldingen
2. Geef bij gebruik van advertenties de omliggende wrapper de dimensies mee van de banner die gebruikt wordt
3. Mocht je CLS ervaren op een pagina, kijk dan via PageSpeed Insights welk element de boosdoener is, om dit element vervolgens een width en height te geven.

Mocht je dieper in de materie willen duiken, dan raden we je aan om de pagina van Google te bekijken met alle mogelijke verbeteringen: Optimize Cumulative Layout Shift

Hulp nodig met Core Web Vitals?

We kunnen het ons goed voorstellen dat je niet de kennis of vaardigheden hebt om deze optimalisaties toe te passen. Je kan daar bijvoorbeeld een webmaster voor inhuren. Mocht je een WordPress website hebben, dan kan je ook contact opnemen met Argeweb Webdesign Service. Dan kunnen wij verbeteringen toepassen, zodat je website goed scoort voor Google’s Core Web Vitals.