Cumulative Layout Shift is een metric die meet hoeveel elementen op een pagina onverwacht verschuiven terwijl de inhoud laadt. Een lage score betekent een stabiele pagina, een betere gebruikerservaring en minder kans op misclicks of frustratie. Je verbetert dit vooral door ruimte te reserveren voor afbeeldingen, video’s, advertenties en andere dynamische onderdelen. In dit artikel zie je hoe je Cumulative Layout Shift meet, welke oorzaken het vaakst voorkomen en welke praktische oplossingen direct effect hebben.
- Een goede CLS-score is 0,1 of lager.
- De grootste oorzaken zijn media zonder afmetingen, advertenties, embeds, webfonts en late JavaScript-injecties.
- Gebruik zowel labtests als echte gebruikersdata om problemen goed te beoordelen.
- De snelste winst zit meestal in vaste afmetingen, aspect-ratio en stabiele placeholders.
- Doorlopend monitoren voorkomt dat nieuwe releases opnieuw voor layout shift zorgen.
Hieronder lees je stap voor stap wat deze metric betekent, waarom visuele stabiliteit belangrijk is voor SEO en conversie, en hoe je problemen structureel oplost.
Wat is Cumulative Layout Shift?
Korte definitie
Cumulative Layout Shift is een Core Web Vitals-metric die meet hoeveel zichtbare elementen onverwacht van positie veranderen tijdens het laden van een webpagina.
Hoe wordt CLS berekend?
De score is gebaseerd op twee onderdelen: hoeveel van het scherm wordt geraakt door een verschuiving en hoe ver die verschuiving plaatsvindt. Google combineert deze signalen binnen zogeheten session windows. Hoe groter de opmaakverschuiving en hoe zichtbaarder die is, hoe hoger de score uitvalt. Een lage uitkomst betekent dus meer visuele stabiliteit.
Belangrijk: een pagina kan technisch snel laden en toch onrustig aanvoelen. Web performance gaat daarom niet alleen over snelheid, maar ook over voorspelbaar gedrag tijdens het laden.
Wat is een goede CLS-score?
Google hanteert de volgende grenswaarden voor deze metric:
| CLS-score | Beoordeling |
|---|---|
| 0,1 of lager | Goed |
| 0,1 tot 0,25 | Verbetering nodig |
| Hoger dan 0,25 | Slecht |
Waarom Cumulative Layout Shift belangrijk is voor UX en SEO
Impact op conversies en gebruikersvertrouwen
Wanneer een knop, formulier of productkaart verschuift op het moment dat iemand wil klikken, ontstaat direct irritatie. Dat leidt tot foutieve klikken, onderbroken interacties en minder vertrouwen in de pagina. Vooral op mobiel is een layout verschuiving extra opvallend, omdat de viewport kleiner is en elke beweging meer impact heeft.
Voor commerciële pagina’s werkt dit direct door in de resultaten. Een onrustige pagina voelt minder professioneel, waardoor bezoekers eerder afhaken. Een stabiele interface ondersteunt juist een prettige gebruikerservaring en verhoogt de kans dat iemand doorklikt of converteert.
Relatie met Core Web Vitals en ranking
Deze metric is onderdeel van de Core Web Vitals, samen met andere signalen rond laadsnelheid en interactie. Google gebruikt deze signalen om pagina-ervaring te beoordelen. Dat betekent niet dat één slechte score je rankings direct laat instorten, maar wel dat een zwakke pagina-ervaring je concurrentiepositie kan verzwakken.
Werk je aan technische SEO, dan hoort het verbeteren van CLS daar standaard bij. Een stabiele pagina ondersteunt niet alleen SEO, maar ook gebruiksgemak, vertrouwen en conversie.
Hoe meet je CLS? tools en methodes
Field versus lab metrics
Bij het meten van layout shift is het verschil tussen lab- en field-metrics essentieel. Labdata komt uit een gecontroleerde testomgeving. Daarmee spoor je problemen op tijdens ontwikkeling of audits. Fielddata komt van echte bezoekers op echte apparaten, netwerken en schermformaten. Dat geeft het meest realistische beeld van de ervaring in de praktijk.
Beide zijn nodig. Labtests helpen je reproduceren en debuggen. Echte gebruikersdata laat zien of een probleem structureel voorkomt. Voor SEO en rapportage is vooral de praktijkdata belangrijk.
Tools: PageSpeed Insights, Lighthouse, Chrome DevTools
Een logische eerste stap is PageSpeed Insights. Hiermee zie je snel of je pagina goed scoort en welke onderdelen mogelijk voor verschuiving zorgen. Het combineert gesimuleerde testresultaten met data van echte gebruikers wanneer die beschikbaar is.
Gebruik daarna Google Lighthouse voor lokale analyses of een technische audit. Daarmee kun je paginatemplates vergelijken en sneller patronen herkennen.
Voor developers is Chrome DevTools vaak het meest praktisch. In het Performance-panel kun je verschuivende elementen terugzien en analyseren op het moment dat ze optreden. Zo wordt duidelijk welk blok, script of embed verantwoordelijk is.
Heb je meerdere templates of veel URL’s, kijk dan ook in Google Search Console. Daar signaleer je op schaal welke paginagroepen binnen Core Web Vitals problemen hebben.
Real User Monitoring met web-vitals
Wil je betrouwbaar meten wat bezoekers echt meemaken, dan heb je Real User Monitoring nodig. De web-vitals library maakt dat relatief eenvoudig. Onderstaand voorbeeld stuurt de score door naar de dataLayer, zodat je die kunt koppelen aan analytics of dashboards.
import { onCLS } from 'web-vitals';
onCLS((metric) => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'web_vital_cls',
cls_value: metric.value,
cls_id: metric.id,
page_path: window.location.pathname
});
});Zo kun je trends per pagina, device of template volgen en regressies sneller signaleren.
Veelvoorkomende oorzaken van hoge CLS
De meeste problemen met visuele stabiliteit komen voort uit een beperkt aantal technische patronen. Dit zijn de belangrijkste oorzaken.
Afbeeldingen zonder vaste afmetingen
Als een browser niet weet hoeveel ruimte een afbeelding inneemt, moet die ruimte later alsnog worden toegevoegd. Daardoor schuift omliggende content. Dit is een klassieke oorzaak van opmaakverschuiving.
Video’s, iframes en embeds zonder gereserveerde ruimte
YouTube-video’s, kaarten, reviews, formulieren en andere embedded content krijgen vaak pas later hun definitieve hoogte. Zonder container met vaste verhouding ontstaat gemakkelijk een layout shift.
Advertenties en third-party content
Advertentieblokken, chatwidgets, consent-tools en andere externe scripts laden vaak asynchroon. Als het formaat afwijkt van wat de layout verwacht, duwen ze content weg. Juist deze blokken veroorzaken vaak een hoge CLS-score op commerciële sites.
Webfonts en tekstverspringing
Wanneer tekst eerst in een fallback-font verschijnt en daarna wisselt naar een ander lettertype met andere afmetingen, kan de teksthoogte veranderen. Daardoor verschuiven alinea’s, knoppen of koppen.
Late injectie van content via JavaScript
Denk aan sticky bars, meldingen, personalisatieblokken of extra call-to-actions die pas na de eerste render in de DOM worden geplaatst. Als daarvoor geen plek is gereserveerd, verschuift bestaande content.
Animaties die de layout beïnvloeden
Animaties op properties zoals width, height, top, left en margin veranderen de opbouw van de pagina. Dat is minder stabiel dan animeren via transform of opacity.
Praktische oplossingen
Reserveer ruimte voor media — HTML/CSS voorbeelden
De snelste manier om CLS verbeteren aan te pakken, is ruimte reserveren voor alle media. Geef afbeeldingen daarom altijd breedte en hoogte mee in de HTML.
<img src="/images/team.jpg" width="1200" height="800" alt="Voorbeeld van Cumulative Layout Shift op een webpagina">Bij responsive layouts blijft dit gewoon werken, omdat de browser de verhouding al kent voordat de afbeelding volledig geladen is.
Gebruik je liever CSS, reserveer dan ruimte met aspect-ratio:
.media {
aspect-ratio: 3 / 2;
width: 100%;
display: block;
}Hetzelfde principe geldt voor video’s, embeds en iframes. Zorg altijd dat de container vooraf een voorspelbare hoogte heeft.
Ads en third-party content — best practices
Geef advertentieblokken een vaste maat of ten minste een minimale hoogte. Laat een slot niet groeien nadat de pagina al zichtbaar is.
.ad-slot {
width: 300px;
min-height: 250px;
}Gebruik waar mogelijk vaste advertentieformaten. Als een advertentie niet wordt gevuld, behoud dan de gereserveerde ruimte. Dat is beter voor de ervaring dan een blok dat plots verschijnt of verdwijnt.
Voor third-party content gelden dezelfde regels: werk met placeholders, vaste containers en voorspelbare formaten.
Webfonts optimaliseren — preload en font-display
Laad belangrijke lettertypes vroeg en geef de browser duidelijke instructies. Dit helpt om tekstverspringing te beperken en maakt de rendering voorspelbaarder.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}Kies daarnaast een fallback-font dat qua letterbreedte en x-height lijkt op het uiteindelijke webfont. Dat verkleint de kans op layout verschuiving.
Lazy loading zonder layout-shift
Lazy loading is nuttig voor web performance, maar alleen als de benodigde ruimte vooraf is vastgelegd. Zonder afmetingen verschijnt content pas later en veroorzaakt dat alsnog verschuiving. Combineer lazy loading dus altijd met breedte, hoogte of een vaste verhouding.
Voorkom late DOM-wijzigingen en layout-affecterende animaties
Voeg geen nieuwe blokken boven bestaande content toe nadat de eerste render al zichtbaar is. Plaats banners, meldingen en formulieren in een vooraf gereserveerde zone of toon ze als overlay buiten de normale document flow.
Gebruik voor animaties vooral transform en opacity. Daarmee behoud je een stabielere layout en verklein je de kans op visuele onrust.
Monitoring en regressiebewaking
Implementatie Web Vitals RUM
Een eenmalige optimalisatie is niet genoeg. Templates veranderen, scripts worden toegevoegd en plugins kunnen gedrag beïnvloeden. Daarom is continue monitoring essentieel. Met onderstaande implementatie stuur je de metric naar een eigen endpoint.
import { onCLS } from 'web-vitals';
onCLS((metric) => {
fetch('/analytics/web-vitals', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'CLS',
value: metric.value,
id: metric.id,
page: window.location.pathname
})
});
});Zo kun je per template, landingspagina of device analyseren waar problemen ontstaan en hoe sterk een release de score beïnvloedt.
Alerts en dashboards
Maak dashboards per paginatype en stel alerts in zodra een grenswaarde wordt overschreden. Koppel deze meldingen aan releases of deploys, zodat je snel ziet welke wijziging een regressie veroorzaakt. Voor grotere sites is dit een belangrijk onderdeel van kwaliteitsbewaking.
Quick-fix checklist
Gebruik deze checklist om snel de grootste knelpunten aan te pakken:
- Geef alle afbeeldingen vaste breedte- en hoogte-attributen mee.
- Gebruik aspect-ratio voor responsive media, video’s en embeds.
- Reserveer vaste ruimte voor advertenties, widgets en iframes.
- Preload belangrijke fonts en gebruik font-display: swap.
- Voorkom dat JavaScript laat nieuwe content boven bestaande blokken plaatst.
- Gebruik placeholders voor lazy-loaded onderdelen.
- Animeer met transform en opacity in plaats van layout-eigenschappen.
- Controleer pagina’s met Lighthouse, DevTools en PageSpeed Insights.
- Meet echte gebruikersdata met de web-vitals library.
- Stel alerts in om nieuwe problemen snel te detecteren.
Controleer je CLS-score of vraag een Website performance audit aan als je structureel wilt verbeteren.
Case study / voorbeeld
Een landingspagina had een hero-afbeelding zonder afmetingen, een reviewwidget zonder placeholder en een sticky promotiebalk die pas na enkele seconden werd ingeladen. De pagina voelde snel, maar bezoekers zagen meerdere verschuivingen tijdens het laden. De gemeten CLS-score lag rond 0,38.
Na analyse zijn drie aanpassingen gedaan:
- De hero-afbeelding kreeg vaste width- en height-attributen.
- De reviewwidget kreeg een container met een vaste minimale hoogte.
- De sticky balk werd als overlay geladen in plaats van in de normale flow.
Daarnaast is het primaire lettertype vooraf geladen en is een beter passend fallback-font ingesteld. Het resultaat: de score daalde van 0,38 naar 0,03. De pagina oogde rustiger, knoppen bleven op hun plek en de gebruikerservaring verbeterde direct.
Veelgestelde vragen
Het is een metric die meet hoeveel zichtbare elementen onverwacht verschuiven terwijl een pagina laadt. Hoe lager de score, hoe stabieler de pagina aanvoelt.
Een goede score is 0,1 of lager. Tussen 0,1 en 0,25 is verbetering nodig. Alles boven 0,25 geldt als slecht.
Je meet dit met PageSpeed Insights, Lighthouse, Chrome DevTools en Real User Monitoring via de web-vitals library.
De meest voorkomende oorzaken zijn afbeeldingen zonder afmetingen, advertenties zonder vaste ruimte, embeds, fontwissels en JavaScript dat laat content toevoegt.
Geef afbeeldingen altijd width en height mee of gebruik CSS met aspect-ratio. Zo reserveert de browser vooraf de juiste ruimte.
Alleen als je ook ruimte reserveert. Anders verschijnt de content later en kan de pagina alsnog verschuiven.
Werk met vaste advertentieformaten of containers met min-height. Laat de gereserveerde ruimte staan, ook als een advertentie niet wordt gevuld.
Gebruik de web-vitals library en stuur de gegevens naar analytics, een dataLayer of een eigen endpoint. Daarmee meet je wat echte bezoekers ervaren.
Verbeter jouw CLS-score
Wil je weten hoe jouw pagina’s scoren? Controleer je CLS-score en ontdek direct waar de grootste winst zit.
Wil je sneller verbeteren? Vraag een Website performance audit aan of bekijk de CLS-checklist als praktische basis voor developers, marketeers en site-eigenaren.
