Cumulative Layout Shift (CLS): Uitleg & Tips 2026

Heb je ook weleens op een knop willen klikken, maar net voordat je vinger het scherm raakte, verschoof alles? Alsof je website even de hokey pokey danst. Frustrerend, toch? Dit fenomeen heet Cumulative Layout Shift (CLS) en is niet alleen irritant voor gebruikers maar ook schadelijk voor je website-prestaties. In dit artikel ontdek je wat CLS precies is en hoe je deze layout shifts kunt voorkomen.

Belangrijkste inzichten over Cumulative Layout Shift (CLS)

CLS meet hoeveel je pagina verschuift tijdens het laden. Het is een cruciaal onderdeel van je gebruikerservaring en Google-ranking.

✅ CLS is een Core Web Vital die de visuele stabiliteit van een pagina meet door onverwachte layoutverschuivingen tijdens de levenscyclus van de pagina te kwantificeren.

✅ Een goede CLS-score ligt op 0,1 of lager, gemeten op het 75e percentiel van pageladen voor zowel mobiel als desktop.

✅ De grootste boosdoeners zijn afbeeldingen zonder afmetingen, dynamisch geladen advertenties en fonts die tijdens het laden wisselen.

✅ CLS beïnvloedt zowel je gebruikerservaring als je SEO-rankings, wat direct doorwerkt in conversies en bouncerates.

✅ Verbeteringen in CLS kunnen leiden tot hogere conversieratio’s omdat gebruikers minder vaak per ongeluk op de verkeerde knop klikken.

Wat is Cumulative Layout Shift en waarom is het belangrijk?

Cumulative Layout Shift (CLS) is een metriek die meet hoe stabiel een pagina laadt. Wanneer elementen tijdens het laden van positie veranderen, ervaren gebruikers frustratie. Ze willen bijvoorbeeld op ‘Bestellen’ klikken, maar opeens verschijnt er een banner en klikken ze op een advertentie.

CLS maakt onderdeel uit van de Core Web Vitals, de metrics die Google gebruikt om de kwaliteit van je website te beoordelen. Google gebruikt CLS in Search om pagina-ervaring te beoordelen, en een lage score helpt indirect bij betere rankings en zichtbaarheid.

Een slechte CLS-score leidt tot misclicks, gefrustreerde bezoekers en lagere conversies. Voor webshops is dit extra pijnlijk: stel je voor dat bezoekers net willen afrekenen, maar de ‘Betalen’-knop verschuift naar beneden op het moment dat ze willen klikken.

Hoe wordt CLS precies gemeten?

CLS wordt berekend op basis van twee factoren: de impact fraction (hoeveel van het scherm beweegt) en de distance fraction (hoe ver het element beweegt). De formule is simpel: impact fraction × distance fraction.

Een voorbeeld: als een afbeelding 50% van het scherm beslaat en 25% naar beneden verschuift, dan is je layout shift score 0,50 × 0,25 = 0,125. Google telt alle verschuivingen bij elkaar op tijdens de levenscyclus van de pagina.

Je kunt CLS meten met tools zoals PageSpeed Insights, Chrome DevTools en Lighthouse. Deze tools tonen zowel labdata (gesimuleerde omgeving) als velddata (echte gebruikers) om een compleet beeld te geven.

CLS als onderdeel van Core Web Vitals

CLS is één van de drie pilaren binnen de Core Web Vitals, naast Largest Contentful Paint (LCP) en Interaction to Next Paint (INP). Samen vormen deze metrics het fundament van gebruikerservaring in de ogen van Google.

Google beschouwt je site pas als ‘goed’ wanneer 75% van de page loads een CLS onder de 0,1 haalt. Daarnaast moet je LCP onder de 2,5 seconden blijven en je INP onder de 200 milliseconden. Voldoe je aan deze eisen? Dan kan je website rekenen op een positieve waardering in de ranking factoren van Google.

De oorzaken van layout shifts op je website

Layout shifts ontstaan wanneer elementen te laat laden of plotseling van grootte veranderen. De meest voorkomende veroorzakers zijn afbeeldingen, advertenties, fonts en dynamisch toegevoegde content zoals cookiebanners.

Waarom gebeurt dit? Simpel: als je browser een element rendert zonder vooraf te weten hoe groot het wordt, reserveert hij geen ruimte. Op het moment dat het element inlaadt, moet alle content eronder wijken. Dat zorgt voor die vervelende verschuiving.

Veelvoorkomende CLS-problemen

Afbeeldingen en video’s zonder vastgestelde afmetingen staan bovenaan de lijst van CLS-boosdoeners. Wanneer je geen width en height attributen instelt, weet de browser niet hoeveel ruimte hij moet reserveren.

Advertenties en embeds die dynamisch laden zijn ook berucht. Ze verschijnen vaak pas nadat de rest van de pagina al geladen is, en duwen dan alle content naar beneden. Hetzelfde geldt voor cookiebanners en pop-ups die zonder reservering van ruimte worden ingevoegd.

Webfonts zorgen voor FOIT (Flash of Invisible Text) of FOUT (Flash of Unstyled Text). Bij FOIT blijft tekst onzichtbaar tot het font geladen is, bij FOUT springt de tekst van een fallback-font naar het definitieve font. Beide effecten kunnen layout shifts veroorzaken, vooral wanneer de fonts verschillende afmetingen hebben.

Hoe verbeter je je CLS-score? Praktische oplossingen

De beste manier om CLS te verbeteren is simpel: reserveer altijd ruimte voor elementen die later laden. Dit voorkomt dat je content onverwacht verschuift. Hieronder vind je concrete stappen om jouw CLS-score direct te verlagen.

Afbeeldingen en media optimaliseren

Stel bij elke afbeelding en video de width en height attributen in. Dit geeft de browser direct de informatie die hij nodig heeft om ruimte te reserveren, nog voordat de afbeelding geladen is.

Gebruik moderne CSS-technieken zoals de aspect-ratio property om responsive afbeeldingen stabiel te houden. Dit zorgt ervoor dat de verhoudingen kloppen op elk scherm, zonder dat je voor elke viewport aparte afmetingen hoeft in te stellen.

Let ook op bij lazy loading. Implementeer lazy loading correct door ruimte te reserveren met een placeholder of door de afmetingen vooraf in te stellen. Anders laadt de afbeelding pas in wanneer de gebruiker erlangs scrollt, wat alsnog een verschuiving veroorzaakt.

Fonts, advertenties en dynamische content verbeteren

Voor webfonts kun je preload gebruiken in combinatie met de font-display eigenschap. Hiermee laad je kritieke fonts eerder en bepaal je hoe de browser omgaat met niet-geladen fonts (bijvoorbeeld door een fallback te tonen).

Reserveer voor advertenties en embeds altijd een vaste container met minimale afmetingen. Zo voorkom je dat een advertentie plotseling de pagina omhoog duwt. Plaats dynamische content zoals cookiebanners bij voorkeur beneden de vouw of met een overlay, zodat bestaande content niet hoeft te verschuiven.

CLS meten en monitoren: Tools en technieken

Je kunt CLS meten met verschillende tools. PageSpeed Insights en Lighthouse geven je inzicht in zowel labdata als velddata. Labdata simuleert een gecontroleerde omgeving, terwijl velddata laat zien hoe échte gebruikers je site ervaren.

Chrome DevTools biedt een handige Performance-tab waar je layout shifts visueel kunt zien. WebPageTest geeft gedetailleerde rapportages en toont precies welke elementen voor verschuivingen zorgen. Voor continue monitoring kun je real user monitoring (RUM) inzetten, zodat je problemen direct opmerkt wanneer ze ontstaan.

Meet CLS altijd op zowel mobiel als desktop, want de scores kunnen flink verschillen. Mobiele gebruikers hebben vaak een tragere verbinding, waardoor fonts en afbeeldingen later laden. Test ook op eerste bezoek én herhaalde bezoeken, want caching kan de CLS-score sterk beïnvloeden.

Tips over Cumulative Layout Shift (CLS) voor jou

💡 Start met de grootste layout shifts
Focus op de elementen die de grootste impact hebben. Gebruik tools zoals PageSpeed Insights om te zien welke onderdelen het meest bijdragen aan je CLS-score, en pak die eerst aan.

💡 Maak CLS-optimalisatie onderdeel van je development workflow
Zorg dat ontwikkelaars standaard afmetingen instellen voor afbeeldingen en ruimte reserveren voor dynamische content. Dit voorkomt dat CLS-problemen steeds opnieuw ontstaan bij updates.

💡 Test op verschillende apparaten en verbindingssnelheden
CLS-scores kunnen sterk variëren tussen 4G en WiFi, en tussen mobiel en desktop. Test daarom altijd in realistische omstandigheden om een compleet beeld te krijgen. Vergeet ook niet om te controleren bij een eerste bezoek versus herhaalde bezoeken door caching-effecten.

Wil je weten waar jouw website kansen laat liggen op het gebied van CLS en andere technische SEO-aspecten? Veel ondernemers kiezen ervoor om SEO uit te besteden aan een specialist, zodat ze zich kunnen richten op hun kernactiviteiten. Vraag een gratis KansenCheck aan bij Menno Spruit en ontdek concrete verbeterpunten en praktisch advies om je Core Web Vitals te optimaliseren. Je krijgt direct inzicht in waar jouw site nu staat en welke stappen het meeste impact hebben. Ook kun je gebruikmaken van handige tools zoals de schema markup validator om je technische SEO verder aan te scherpen.