oktober 14, 2026

CLS (Cumulative Layout Shift)

Cumulative Layout Shift is een meetwaarde die aangeeft hoeveel elementen op een pagina onverwacht verspringen terwijl de site laadt. Het meet de visuele stabiliteit van een pagina, zodat bezoekers niet per ongeluk op de verkeerde knop klikken omdat de tekst plotseling naar beneden schuift.

Technische werking

De browser begint met het laden van de HTML-code en bouwt een eerste schets van de pagina.
Zware elementen zoals afbeeldingen, advertenties of externe lettertypes laden later in, waardoor de browser de positie van andere elementen moet herberekenen.
Wanneer een element verschuift, berekent de browser de impact fraction: het deel van het oorspronkelijke element dat buiten het viewport raakt.
Daarna wordt de distance fraction bepaald: hoeveel procent van het scherm het verschoven element daadwerkelijk heeft afgelegd.
De vermenigvuldiging van deze twee factoren vormt de layout shift score voor dit specifieke incident, waarbij de totale CLS de som is van alle verschuivingen binnen het session window.
Alle verschuivingen binnen een bepaald tijdsbestek, het session window, worden bij elkaar opgeteld voor de uiteindelijke score.

Belangrijke begrippen

Core Web Vitals: De drie belangrijkste prestatie-indicatoren van Google waar CLS deel van uitmaakt.
Impact fraction: De totale oppervlakte van de pagina die beïnvloed wordt door een verschuiving.
Distance fraction: De afstand die een element aflegt ten opzichte van de oorspronkelijke plek.
Field data: Metingen die gebaseerd zijn op echte bezoekers in plaats van een gesimuleerde testomgeving.
Layout shifts: De individuele momenten waarop een element van positie verandert.

Ontdekken wat we voor uw organisatie kunnen bereiken?

Vul ons contactformulier in en ontvang binnen 24 uur een persoonlijke reactie.

Geen enkele organisatie is hetzelfde, daarom stellen we altijd een op maat gemaakt plan van aanpak op.

Laat onze ervaren consultants u begeleiden naar succes!

Praktijkvoorbeeld

Stel je een productpagina voor op example.nl. Een bezoeker komt binnen en ziet direct een grote koptekst en een beschrijving. Terwijl hij net begint te lezen, laadt er bovenin de pagina plotseling een advertentiebanner van 100 pixels hoog. De koptekst en de hele tekstblokken schieten daardoor in één klap naar beneden. De bezoeker wil net op een bestelknop klikken, maar raakt door de verschuiving plotseling op een andere link.

<!-- Fout: Geen afmetingen, de browser weet niet hoeveel ruimte hij moet reserveren -->
<img src="banner.jpg" alt="Promotie">

<!-- Goed: De browser reserveert direct de juiste plek -->
<img src="banner.jpg" alt="Promotie" width="1200" height="100">

Veelgemaakte fouten

Afbeeldingen zonder breedte en hoogte: De browser ziet pas hoe groot een plaatje is als het volledig geladen is, waardoor alles eronder moet wijken.
Dynamisch laden van content: Het invoegen van een nieuwsbrief-banner of melding bovenaan de pagina nadat de rest al zichtbaar is.
Web fonts die laat laden: Een standaardlettertype wordt vervangen door een zwaarder merklettertype, waardoor de regelafstand verandert en teksten verspringen.
Advertentieblokken zonder vaste hoogte: Ad slots die pas na enkele seconden hun definitieve vorm krijgen en de rest van de layout wegdrukken.

SEO begint bij kwalitatieve content

Verhoog je conversies met onze doelgerichte content!

Het geheim achter een bloeiende SEO-strategie? Kwalitatieve content die het hart van de doelgroep verovert. Met de juiste inhoud die naadloos inspeelt op de behoeften en verlangens van jouw potentiële klanten, til je jouw zichtbaarheid naar een hoger niveau.

Als je een sterke online aanwezigheid wilt opbouwen, is hoogwaardige content de sleutel tot jouw succes.

Toepassing en afwegingen

Je gebruikt deze meetwaarde altijd om de gebruikerservaring te bewaken. Nou, er is één uitzondering: interactieve elementen die direct reageren op een klik van de gebruiker. Als een menu uitklapt nadat iemand erop heeft geklikt, telt dit niet mee als een negatieve shift omdat de actie voorspelbaar is.

Controle en meting

Open de performance tab in de browser-ontwikkelaarstools om te zien welke elementen precies verschuiven tijdens het laden.
Gebruik PageSpeed Insights om de field data van echte gebruikers te analyseren.
Kijk in Google Search Console onder het kopje Core Web Vitals om te zien welke pagina’s op je hele site een slechte score halen.
Test de site op verschillende schermbreedtes, omdat verschuivingen op mobiel vaak heviger zijn dan op desktop.

Zorg dat je voor elk visueel element, van logo’s tot banners, altijd de exacte afmetingen in de code zet of gebruik aspect-ratio CSS. Dit is simpelweg de meest effectieve manier om verspringen te voorkomen.

Open je eigen website en probeer eens heel langzaam te laden met een trage verbinding in de ontwikkelaarstools om te zien wat er verspringt.

Gratis SEO scan van uw website?

Ontdek nu de verborgen potentie van uw website met onze GRATIS SEO scan! Onze geavanceerde tools en deskundige analyse bieden u een gedetailleerd inzicht in de verbeterpunten van uw online aanwezigheid.

Ontvang een uitgebreid rapport met waardevolle optimalisatie-tips die uw website naar nieuwe hoogten zullen stuwen. Neem vandaag nog de eerste stap naar een betere vindbaarheid en meer organisch verkeer. Mis deze kans niet – claim nu uw GRATIS SEO scan en maak uw website klaar voor succes!

Onze Specialisaties

Website development

Search Engine Optimization

Content Marketing

Search Engine Advertising

Symblings Digital Marketing

4.9

Gebaseerd op 14 beoordelingen

Categorieën

Onze SEO technieken

ONTVANG EEN GRATIS SEO ARTIKEL

Ontvang een gratis SEO artikel van 1000-1200 woorden die gegarandeerd jouw zoekposities zullen versterken.

Vraag direct aan

Veelgestelde vragen

Wat is CLS precies?

Cumulative Layout Shift meet hoeveel elementen op je pagina onverwacht verspringen terwijl de site laadt. Het gaat om de visuele stabiliteit. Als tekst of knoppen plotseling verschuiven, is dat irritant voor de bezoeker en kan hij per ongeluk op de verkeerde link klikken.

Waarom verspringt mijn website?

Dat gebeurt meestal omdat de browser niet weet hoeveel ruimte een element nodig heeft. Zware dingen zoals afbeeldingen, advertenties of externe lettertypes laden vaak later in. De browser moet de positie van de rest van de pagina dan opnieuw berekenen, waardoor elementen naar beneden schieten.

Hoe los ik CLS-problemen op?

Geef afbeeldingen en banners altijd een vaste breedte en hoogte in de code. Zo reserveert de browser direct de juiste plek, ook voordat het bestand geladen is. Gebruik daarnaast aspect-ratio CSS om te voorkomen dat elementen verspringen op verschillende schermbreedtes.

Wat veroorzaakt een hoge CLS-score?

Vaak zijn het afbeeldingen zonder afmetingen of advertentieblokken die pas na een paar seconden hun vorm krijgen. Ook het dynamisch laden van content, zoals een nieuwsbrief-banner bovenaan de pagina, zorgt voor flinke verschuivingen. Soms verandert de regelafstand wanneer een zwaar merklettertype laat inlaadt.

Hoe vind ik uit wat er precies verschuift?

Open de performance tab in de browser-ontwikkelaarstools om live te zien welke elementen verspringen. Je kunt ook je eigen site laden met een opzettelijk trage verbinding in diezelfde tools. Zo zie je precies welke blokken de layout wegdrukken terwijl de pagina opbouwt.

Met welke tools kan ik CLS meten?

Gebruik PageSpeed Insights voor de data van echte bezoekers. In Google Search Console zie je onder het kopje Core Web Vitals welke pagina’s op je hele site een slechte score halen. De ontwikkelaarstools in je browser zijn handig voor de technische analyse per element.

Tellen alle verschuivingen mee voor de score?

Nee, interactieve elementen die direct reageren op een klik van de gebruiker tellen niet mee. Als je bijvoorbeeld op een menu klikt en dat klapt uit, is die actie voorspelbaar. Dat wordt niet gezien als een negatieve shift omdat de bezoeker erom vroeg.

Is CLS op mobiel anders dan op desktop?

Ja, verschuivingen zijn op mobiele schermen vaak heviger omdat de ruimte beperkter is. Een kleine verschuiving op een groot scherm valt minder op, maar kan op een telefoon een heel tekstblok naar beneden duwen. Test je site daarom altijd op verschillende schermbreedtes.