Wat is Cumulative Layout Shift (CLS) en hoe los je het op

Wat is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) vertegenwoordigt het "visuele stabiliteit" gedeelte van de Core Web Vitals. De Cumulative Layout Shift (CLS) meet de bewegingen van de pagina naarmate content wordt gerenderd of nieuwe content op de pagina wordt getoond. Het berekent een score op basis van hoeveel van de pagina onverwacht beweegt en hoe ver deze beweegt. Deze verschuivingen van content zijn erg storend, waardoor je de plaats kwijtraakt in een artikel dat je bent gaan lezen of, nog erger, waardoor je op de verkeerde knop klikt!

Wat is een goede Cumulative Layout Shift (CLS) score?

Een goede CLS-score is alles tussen 0 en 0,1. Als je CLS-score tussen 0,1 en 0,25 ligt, is er ruimte voor verbetering. Elke CLS-score boven 0,25 wordt als slecht beschouwd. Om te slagen voor de Core Web Vitals voor de Cumulative Layout Shift, moet ten minste 75% van je bezoekers een "goede" CLS-score hebben.

Belang van CLS voor webprestaties en user experience

Cumulative Layout Shift (CLS) is gekoppeld aan zowel webprestaties als user experience omdat het direct invloed heeft op hoe stabiel en voorspelbaar een webpagina aanvoelt tijdens het laden. Dit is waarom het ertoe doet:

• UX, betrokkenheid en merkperceptie: Onverwachte layout-verschuivingen verstoren de flow van de gebruiker, waardoor het moeilijker wordt om informatie te vinden, op knoppen te klikken en op de beoogde manier met de pagina te interacteren. Deze frustratie kan leiden tot slechte ervaringen waarbij gebruikers de website volledig verlaten. De user experience van een website weerspiegelt het merk erachter. Frequente layout-verschuivingen kunnen de indruk wekken van een slecht ontworpen of onderhouden website, de betrokkenheid van de gebruiker verstoren en leiden tot verminderde interactie en mogelijk hogere bouncepercentages.
• Toegankelijkheid: Layout-verschuivingen kunnen bijzonder storend zijn voor gebruikers met een beperking die afhankelijk zijn van ondersteunende technologieën of schermlezers. Een stabiele layout zorgt ervoor dat iedereen effectief kan navigeren en interacteren met de website.
• SEO en zoekranking: De Core Web Vitals zijn een kleine maar belangrijke rankingfactor in Google. Google, samen met andere zoekmachines, geeft prioriteit aan websites die een goede user experience bieden. CLS is een van de Core Web Vitals-statistieken die Google in overweging neemt bij het rangschikken van websites. Optimaliseren voor CLS kan je website een concurrentievoordeel geven in zoekresultaten.

Hoe wordt CLS gemeten?

De CLS van een pagina kan worden gemeten met de Layout Instability API. Het volgende is een eenvoudig gebruik van deze API:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Het berekenen van de CLS

De CLS wordt berekend met een eenvoudige, maar elegante formule:

CLS = sum(impact-fraction * distance-fraction)

De impactfractie meet hoeveel van de zichtbare content van de pagina is verschoven. De afstandsfunctie meet hoe ver de content is verschoven. Als bijvoorbeeld 50% van de pagina (hoeveel) 25% (hoe ver) van de viewport van de pagina is verschoven, is de CLS-score = 0,50 * 0,25 = 0,125.

Verwachte vs. onverwachte layout-verschuivingen

Niet alle layout-verschuivingen zijn slecht, alleen degene die je niet verwacht. Wanneer je bijvoorbeeld op een "laad meer items"-link klikt, verwacht je dat er meer items op de pagina verschijnen en dat de content van de pagina verschuift.

Daarom zullen alleen onverwachte layout-verschuivingen bijdragen aan de CLS. Als een gebruiker bijvoorbeeld op een knop klikt en als reactie daarop nieuwe content aan de pagina wordt toegevoegd (bijvoorbeeld een dropdownmenu), wordt de layout-verschuiving uitgesloten van de CLS. Om precies te zijn: layout-verschuivingen die plaatsvinden binnen 500 milliseconden na gebruikersinvoer worden uitgesloten van berekeningen.

Layout-verschuiving sessies

Toen CLS voor het eerst werd geïntroduceerd, werden sommige sites ten onrechte afgestraft met een slechte CLS-score. Een pagina die bijvoorbeeld infinite scrolling implementeert, zou de impact van de nieuw toegevoegde content voor elke nieuwe scroll aan de totale CLS-score hebben toegevoegd. Daarom wordt de CLS nu berekend in sessies. Elke sessie heeft een maximale duur van 5 seconden en een opening van 1 seconde tussen layout-verschuivingen. De sessie met de grootste CLS-score wordt de definitieve CLS-score.

Als bijvoorbeeld tijdens de eerste sessie de CLS-score 0,095 is, de CLS in de volgende sessie 0,15 is, en voor de laatste sessie de CLS-score 0 is, wordt de definitieve CLS-score de hoogste van de drie: 0,15.

CLS en de Core Web Vitals

Cumulative Layout Shift (CLS) is een belangrijke, gebruikersgerichte statistiek voor het meten van visuele stabiliteit. De Cumulative Layout Shift (CLS) maakt deel uit van de Core Web Vitals, samen met de Largest Contentful Paint (LCP) en Interaction to Next Paint (INP). Samen meten deze drie statistieken de laadprestaties, interactiviteit en visuele stabiliteit.

Veelvoorkomende CLS-oorzaken

De oorsprong van alle layout-verschuivingen is in wezen hetzelfde. Op een gegeven moment nam een element dat boven een ander element was geplaatst meer of minder ruimte in dan voorheen. Dit is meestal te wijten aan een of meer van deze oorzaken:

Afbeeldingen, video's en iframes zonder dimensies

Media zonder afmetingen is de belangrijkste oorzaak van CLS op het web. Volgens de 2025 Web Almanac heeft 62% van de mobiele pagina's ten minste één afbeelding zonder expliciete afmetingen. Voor de complete gids over afbeeldingen, video's en iframes zonder afmetingen, de width: auto CSS-valstrik, art direction, responsive image mismatches, lazy loading en placeholder-afbeeldingen, zie Hoe afbeeldingen en media layout-verschuivingen veroorzaken.

Web font swaps

Webfonts worden gedownload van het internet terwijl de pagina wordt gerenderd met een fallback font. Wanneer het webfont arriveert, veroorzaakt het verschil in grootte tussen het fallback font en het uiteindelijke font een layout-verschuiving. Slechts 11% van de pagina's preload webfonts, wat betekent dat de overgrote meerderheid van het web kwetsbaar is voor font-swap CLS.

De oplossing omvat twee technieken: het fallback font laten overeenkomen met het webfont met behulp van @font-face metric overrides (size-adjust, ascent-override), en het versnellen van de levering van fonts door self-hosting en het preladen van kritieke fonts. Zie de fix-and-identify gids voor codevoorbeelden.

CSS-animaties en transities

CSS-animaties die layout-triggerende eigenschappen gebruiken zoals top, left, width en height dwingen de browser om de layout bij elk frame opnieuw te berekenen, wat CLS produceert. Volgens de Web Almanac heeft 39% van de mobiele pagina's niet-gecomposited animaties die bijdragen aan CLS. De oplossing is om in plaats daarvan transform en opacity te gebruiken, die op de GPU-compositor draaien en nooit een layout triggeren. Voor de volledige walkthrough, zie layout-verschuiving veroorzaakt door CSS-transities.

Advertenties, embeds en dynamisch geïnjecteerde content

Advertenties laden laat en duwen content naar beneden. Cookie-toestemmingsbanners verschijnen en verschuiven de pagina. AJAX-verzoeken injecteren nieuwe content zonder ruimte te reserveren. Dit is allemaal hetzelfde probleem: er verschijnt iets op de pagina waarvan de browser niets wist op het moment van renderen. De oplossing is altijd om ruimte te reserveren met min-height en de container te isoleren met contain: layout style. Voor embeds van derden, zoals YouTube en Google Maps, elimineert het facade-patroon CLS volledig.

Scroll-getriggerde layout-verschuivingen

Dit is de CLS-oorzaak die Lighthouse nooit zal opvangen. Headers die zich verbergen bij het scrollen, parallax-effecten en krimpende navigatiebalken animeren vaak top of height, en scrollen is geen uitsluitende input in de Layout Instability specificatie. Elke layout-verschuiving die wordt getriggerd door scrollen telt mee voor je CLS-score. De oplossing: gebruik transform: translateY() voor elke scroll-getriggerde animatie. Zie hoe scroll-getriggerde animaties CLS veroorzaken voor de volledige walkthrough.

Het vinden en oplossen van CLS-problemen

Het diagnosticeren van CLS volgt dezelfde field-data-first methodologie als de andere Core Web Vitals. Begin met Google Search Console of een RUM-tool zoals CoreDash om te bevestigen welke pagina's worden beïnvloed en welke elementen verschuiven. Gebruik vervolgens Chrome DevTools of de Core Web Vitals Visualizer extensie om het probleem lokaal te reproduceren en de oorzaak te identificeren.

Voor het volledige stapsgewijze diagnoseproces, tool walkthroughs, codefixes voor elke oorzaak en een quick-fix checklist, zie onze toegewijde gids: Vind en Los Cumulative Layout Shift (CLS) Problemen Op.

Case study: Rakuten 24 en de zakelijke impact van CLS

Rakuten 24, een groot Japans e-commerceplatform, voerde een gedetailleerde studie uit naar de impact van Cumulative Layout Shift op hun zakelijke statistieken. Door CLS te verminderen op hun product- en categoriepagina's bereikte Rakuten 24 opmerkelijke resultaten:

• 53,37% toename in omzet per bezoeker voor gebruikers die een lage CLS ervoeren vergeleken met degenen met een hoge CLS.
• 33,13% toename in conversieratio voor dezelfde verbeterde CLS-cohort.
• 15,20% afname in bouncepercentage onder bezoekers met stabiele pagina-ervaringen.

Deze cijfers tonen aan dat CLS niet slechts een technische statistiek is. Visuele instabiliteit kost bedrijven direct omzet door gebruikers te frustreren tijdens hun browse- en aankoopreis. Wanneer elementen onverwacht verschuiven, verliezen gebruikers vertrouwen, klikken ze mis en verlaten ze hun sessies. De Rakuten 24-studie bevestigt dat investeren in CLS-optimalisatie een meetbaar rendement op investering heeft, met name voor e-commerce sites waar elke interactie telt.

Wat echte CLS-data laat zien

CoreDash-data toont aan dat CLS de best presterende Core Web Vital is, waarbij 92,8% van de paginaweergaven op corewebvitals.io een "goede" score behaalt en er vrijwel geen verschil is tussen mobiel en desktop. Zowel desktop (92,8% goed) als mobiel (92,7% goed) behalen bijna perfecte CLS-scores, met een p75 van 0 op beide apparaattypes.

Dit staat in contrast met statistieken zoals LCP en INP, waar mobiele prestaties aanzienlijk slechter zijn dan op desktop. CLS is uniek beter op mobiel dan op desktop over het bredere web, wat het tegenovergestelde is van elke andere Core Web Vital.

Wereldwijd, volgens de 2025 Web Almanac, is het beeld minder optimistisch:

• 72% van de websites behaalt over het algemeen goede CLS-scores, terwijl 11% een slechte CLS heeft.
• 62% van de mobiele pagina's heeft ten minste één afbeelding zonder afmetingen (gedaald van 66% in 2024, maar nog steeds een belangrijke CLS-bijdrager).
• 39% van de mobiele pagina's heeft niet-gecomposited animaties die bijdragen aan CLS.
• Slechts 11% van de pagina's preload webfonts, wat betekent dat de overgrote meerderheid van de sites kwetsbaar is voor font-swap layout-verschuivingen.

CLS heeft wereldwijd een gestage jaar-op-jaar verbetering laten zien, maar de data onthult dat afbeeldingen zonder afmetingen en niet-gecomposited animaties de twee meest voorkomende oorzaken blijven. Het aanpakken van alleen deze twee problemen zou layout-verschuivingen voor een groot deel van het web elimineren.

Gerelateerde gidsen

Deze hubpagina behandelt Cumulative Layout Shift op hoog niveau. Voor gedetailleerde, praktische begeleiding bij het vinden en oplossen van CLS-problemen, verken deze toegewijde gidsen:

• Vind en Los CLS-Problemen Op: De complete stapsgewijze diagnosegids met tool walkthroughs, codefixes voor elke oorzaak en een quick-fix checklist.
• Hoe Afbeeldingen en Media Layout-Verschuivingen Veroorzaken: De definitieve gids over CLS door afbeeldingen zonder afmetingen, video's, iframes, art direction, responsive images, lazy loading en placeholders.
• Los layout-verschuivingen op veroorzaakt door auto-sizing afbeeldingen: Een complete walkthrough voor het toevoegen van de juiste afmetingen aan afbeeldingen en responsieve containers.
• Los layout-verschuivingen op veroorzaakt door CSS-transities: Identificeer en vervang layout-triggerende CSS-animaties door gecomposited alternatieven.
• Scroll-getriggerde animaties en CLS: De CLS-oorzaak die Lighthouse niet kan opvangen, en hoe dit op te lossen.
• Self-host Google Fonts: Verminder font-loading CLS door fonts te self-hosten met de juiste font-display en preloading strategieën.
• Zorg dat tekst zichtbaar blijft tijdens het laden van een webfont: Configureer font-display en font metric overrides om font-swap layout-verschuivingen te elimineren.
• Bouw een chatwidget met perfecte Core Web Vitals: Een case study over het implementeren van widgets van derden zonder CLS, INP of LCP-regressies te introduceren.

Voor een compleet overzicht van alle Core Web Vitals-statistieken en optimalisatiestrategieën, bezoek het Core Web Vitals-overzicht of gebruik de Ultieme Core Web Vitals Checklist om je site te auditen.