Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is de Core Web Vital die meet hoe stabiel een pagina blijft terwijl ze laadt. Het cijfer toont hoeveel zichtbare elementen onverwacht verschuiven. Hoe lager, hoe beter.

Je kent het gevoel: je wil op een link tikken, er laadt plots een banner boven en je tikt op iets anders. Dat is een layout shift.

Wat is een goede CLS-score?

De drempels volgens Google (web.dev):

Je meet op het 75e percentiel van de paginaweergaven, apart voor mobiel en desktop. Minstens 75 procent van je bezoeken moet dus onder 0,1 blijven.

Hoe wordt CLS berekend?

Elke verschuiving krijgt een score: de impactfractie maal de afstandsfractie.

• Impactfractie: welk deel van het scherm de verschuivende elementen innemen, voor en na de verschuiving samen.
• Afstandsfractie: hoe ver het element opschuift, gedeeld door de grootste schermafmeting.

Verschuivingen die minder dan een seconde na elkaar komen, vormen samen een venster van maximaal vijf seconden. CLS is de score van het slechtste venster.

Verschuivingen binnen 500 milliseconden na een klik, tik of toetsaanslag tellen niet mee. Die verwacht de bezoeker.

Een voorbeeld

Voorbeeld: een Antwerpse B2B-webshop toont bovenaan een promotiebalk die pas na een halve seconde laadt. De hele productlijst schuift omlaag.

Stel dat die lijst de helft van het scherm vult en 20 procent van de schermhoogte zakt. Voor en na samen beslaat ze dan 70 procent van het scherm. De score is 0,7 maal 0,2, of 0,14. Dat zit al boven de grens van 0,1.

Waarom het telt voor SEO

CLS is een van de drie Core Web Vitals, naast LCP en INP. Google neemt ze mee in de paginabeleving.

Relevantie en inhoud wegen zwaarder. Toch kost een verspringende pagina je vooral klanten: misklikken, frustratie en afgebroken formulieren.

Hoe verbeter je CLS?

1. Geef afbeeldingen en video’s een vaste breedte en hoogte, of een aspect-ratio in CSS.
2. Reserveer ruimte voor advertenties, embeds en banners die later laden.
3. Voeg geen inhoud boven bestaande inhoud in, tenzij de bezoeker erom vraagt.
4. Laat een cookiebanner over de pagina zweven in plaats van de pagina omlaag te duwen.
5. Kies een fallback-lettertype dat qua grootte op je webfont lijkt.
6. Animeer met transform in plaats van breedte, hoogte of positie te veranderen.

Meet in het rapport Core Web Vitals van Search Console of in PageSpeed Insights. Labtools zoals Lighthouse meten alleen tijdens het laden. Ze tonen vaak een lagere CLS dan echte bezoekers ervaren.

Een stabiele, snelle site vanaf de start? Zie Website laten maken. Lees ook over LCP, de laadsnelheid.

Veelgestelde vragen

Waarom is mijn CLS in Search Console slechter dan in Lighthouse?

Search Console toont echte bezoekers over de hele levensduur van de pagina, inclusief scrollen. Lighthouse meet alleen het laden in een testomgeving.