Performance · CLS · 6 min lezen

CLS — Cumulative Layout Shift

De metriek die niemand snapt totdat hij rood is. Wat 'em irritant maakt voor bezoekers en wat Google er aan rekent — plus de drie fixes die 90% van de MKB-sites onder de 0.1 trekken.

TL;DR CLS meet hoeveel content rondspringt tijdens het laden. Doel: onder 0.1. Drie hoofdoorzaken op MKB-sites: (1) afbeeldingen zonder width/height, (2) fonts die laat laden en groter zijn dan fallback, (3) cookie-banners die content omlaag duwen. Fix is meestal CSS-werk, geen rebuild. Realistisch: van CLS 0.3 naar 0.05 in 2-4 uur werk.

Wat is CLS eigenlijk?

Cumulative Layout Shift meet hoe visueel "stabiel" je pagina is tijdens het laden. Stel: je opent een artikel, je begint te lezen, en dan ploft er ineens een banner boven de tekst die alles 200 pixels naar beneden duwt. Of een afbeelding die laat laadt en plotseling ruimte vraagt. Of een knop die verspringt net als je 'em wilde klikken. Dat zijn layout shifts.

CLS-score = som van alle visuele instabiliteit van de pagina, gewogen op hoeveel content er verschuift en over welke afstand. Onder 0.1 = goed. Boven 0.25 = je bezoekers irriteren zich aantoonbaar.

Waarom CLS belangrijk is

Twee redenen:

Op een hoveniers-site in onze portfolio met CLS 0.34 zagen we 28% van de mobiele bezoekers de "back"-knop indrukken binnen 5 seconden. Na CLS-fix naar 0.04 zakte dat naar 9%.

De drie hoofdoorzaken bij MKB-sites

1. Afbeeldingen zonder dimensie-attribuut

Browser weet niet hoeveel ruimte een afbeelding gaat innemen tot hij geladen is. Dus reserveert hij 0 pixels, en als de foto eindelijk laadt schuift alles eronder naar beneden. Fix: geef altijd width en height mee in de HTML:

<img src="foto.webp"
  width="1200" height="800"
  alt="..." />

De waarden hoeven niet de display-pixels te zijn — ze zijn voor de verhouding. CSS kan daarna nog steeds width: 100% zetten. Browser reserveert nu een vakje met de juiste ratio.

2. Fonts die laat laden (FOIT/FOUT)

Webfont-bestand is 80-120 KB. Browser laat eerst system-font zien, swapt dan naar webfont zodra die geladen is. Probleem: webfont heeft andere x-height en letter-spacing, dus tekst herfloeit. Dat geeft CLS.

Fixes:

3. Cookie-banners en pop-ups die content duwen

Veel cookie-banners worden via JavaScript laat ingevoegd, bovenaan de pagina, met position: relative. Resultaat: zodra hij verschijnt schuift alles eronder omlaag. CLS-score schiet naar 0.3-0.5.

Twee oplossingen:

Andere veelvoorkomende CLS-bronnen

CLS meten en debuggen

Drie tools:

Tip: surf 30 seconden op je eigen homepage met de Web Vitals extension open, scroll naar beneden, klik wat menu's. Als CLS oploopt boven 0.1, weet je dat shifts plaatsvinden ná initial paint.

Wanneer CLS lastig te fixen is

Bij sommige sites zit CLS structureel in de codebase: gebouwd met een framework dat hydration-shifts veroorzaakt, of een thema waar elementen JavaScript-gerendered worden ná de eerste paint. Dan helpt CSS-werk maar beperkt. Op modern Webflow of Astro zit CLS standaard onder 0.05. Op WordPress-sites met page-builders is 0.1-0.2 het haalbare optimum.

Voor MKB die structureel onder de 0.1 wil komen: rebuild op modern platform. DesignCheck garandeert CLS onder 0.05 bij elk rebuild-pakket (prijzen). Vraag een audit aan via DesignCheck Mijdrecht als je niet zeker bent of fix of rebuild beter is.

Wat dit oplevert

Een CLS-fix van 0.3 naar 0.05 levert typisch op:

Vul de verliescalculator in om te zien wat dat in euro's betekent voor jouw bezoekersaantallen.

CLS-audit — gratis

Wij meten CLS op je homepage + 3 hoofdpagina's, identificeren de shift-veroorzakers en sturen het fix-pad binnen 48 uur.

Audit aanvragen →

De wiskunde achter CLS — wat de score precies meet

Veel mensen denken dat CLS een tijdsmeting is. Dat klopt niet. CLS is een ruimtelijke meting, vermenigvuldigd met de afstand waarover content beweegt. De formule die Google gebruikt heet de layout shift score: impact fraction × distance fraction. De impact fraction is het percentage van de viewport dat door bewegende elementen werd geraakt. De distance fraction is hoe ver die elementen bewogen, gedeeld door de viewport-hoogte.

Voorbeeld. Je viewport is 1000 pixels hoog. Een banner duwt 50% van de zichtbare content 100 pixels naar beneden. Impact fraction = 0,5. Distance fraction = 100 / 1000 = 0,1. Layout shift score voor die ene beweging = 0,5 × 0,1 = 0,05. Heb je drie zulke shifts in één session-window, dan tikt je CLS op tot 0,15 en zit je in de matige zone.

Sinds 2021 telt Google niet meer de som van alle shifts gedurende het hele bezoek. Hij pakt het ergste window van maximaal 5 seconden, met maximaal 1 seconde tussen losse shifts. Dat heet de session-window benadering. Reden: anders straft je een lange-leessessie onevenredig zwaar af. Een Single Page Application met 50 paginawisselingen zou anders altijd verliezen.

Voor MKB-sites is dit nuttige kennis omdat het bepaalt welke fixes prioriteit krijgen. Een shift bovenaan de pagina raakt vrijwel altijd het hele viewport en weegt zwaarder dan een shift onder de fold. Begin altijd bovenin met optimaliseren.

Veelgemaakte fouten met font-loading en hoe je ze omzeilt

Fonts veroorzaken een specifiek soort CLS die lastig te debuggen is omdat het pas merkbaar wordt op trage verbindingen. Je homepage opent op je MacBook met glasvezel en alles ziet er perfect uit. Dezelfde pagina op een vier jaar oude Android over 4G in een trein? CLS van 0,25 omdat de webfont 800 ms te laat binnenkomt en de tekst die je net las verspringt drie regels naar beneden.

De juiste aanpak bestaat uit vier lagen die je gestapeld inzet:

  1. Preconnect naar je font-host. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> opent de TCP-verbinding al tijdens HTML-parsing.
  2. Preload de primaire variant. Eén woff2-bestand voor de body-tekst krijgt <link rel="preload" as="font" type="font/woff2" crossorigin>. Display-fonts hoeven dit niet.
  3. font-display swap met fallback-tuning. Gebruik size-adjust, ascent-override, descent-override en line-gap-override in een @font-face block die wijst naar de system-font. Tools zoals Fontaine of de Vercel font-fallback generator berekenen de waardes.
  4. Subset je font. Een Inter-bestand van 120 KB krimpt naar 28 KB als je alleen Latin-1 en het gewicht 400/600 includeert. Subsetten halveert de tijd tot eerste paint van de tekst.

Een rebuild op moderne stack lost deze laag automatisch op. Astro, Next.js 15 en Nuxt 3 hebben ingebouwde font-optimalisatie die fallback-metrics berekent en woff2-subsets genereert. De CLS-bijdrage van fonts zakt van 0,08 naar onder 0,01 zonder extra werk.

Embedded content — iframes, video's en third-party widgets

De minst voorspelbare CLS-bron op MKB-sites is third-party content. Je hebt een YouTube-embed, een Google Maps iframe, een Trustpilot-widget en een afsprakentool van een externe provider. Stuk voor stuk gedragen ze zich onvoorspelbaar omdat hun assets buiten je controle vallen.

Drie regels die voor élk embedded element gelden:

Op de live-site van Keurmeesters (NL energielabel-bureau, eerste betalende klant van DesignCheck) hebben we deze patterns toegepast samen met directe BAG-API integratie. Resultaat: Lighthouse 96/100/100/100 op mobiel, CLS in het veld onder 0,02. Dat is geen lab-curve, dat is wat echte bezoekers ervaren over 28 dagen.

Stappenplan — van CLS-meting naar onder 0,1 in twee middagen

  1. Open PageSpeed Insights op je vier belangrijkste pagina's: home, dienst-overzicht, één dienst-detail, contact. Noteer de field-CLS én de lab-CLS.
  2. Installeer de Web Vitals Chrome-extension. Zet 'em op debug-mode. Surf 60 seconden over elke pagina. De extension toont per shift welk element bewoog.
  3. Zoek alle <img> tags zonder width/height in je HTML. Voeg dimensies toe op basis van de originele bestandsgrootte. Hoeft niet exact qua pixels — alleen de verhouding telt.
  4. Doe hetzelfde voor <video>, <iframe> en SVG die als afbeelding wordt gebruikt.
  5. Vervang inline cookie-banners door fixed-position overlays. Banner-vendor heeft meestal een instelling hiervoor — anders override 'em met eigen CSS.
  6. Voeg preconnect en preload toe voor je primaire font. Check of font-display: swap aan staat in je @font-face declaraties.
  7. Genereer fallback-metrics voor je hoofdfont. Plak de @font-face fallback-block in je stylesheet.
  8. Subset je font-bestanden naar alleen Latin en de gebruikte gewichten. Tool: fonttools of pyftsubset.
  9. Vervang YouTube-embeds door facade-thumbnails die pas bij klik laden.
  10. Vervang inline ads of dynamic banners door containers met vaste min-height.
  11. Check of je sticky header gebruikt — als hij na scroll-event van static naar fixed switcht, fix met permanent sticky.
  12. Laat je carousel slides direct in HTML staan, niet JS-injected. Hide-by-default met CSS, niet display:none op load.
  13. Run Lighthouse opnieuw. Vergelijk lab-CLS met de uitgangswaarde.
  14. Wacht 28 dagen, check field-CLS in PageSpeed Insights. Veld volgt lab met vertraging — de meetperiode is een rolling window.
  15. Stel een budget in: elke nieuwe pagina moet onder 0,05 blijven. Voeg Lighthouse-CI toe aan je deploy-flow als dit een terugkerend probleem is.

Wanneer een rebuild slimmer is dan een fix

Op WordPress-sites met page-builders zoals Elementor of Divi zit CLS structureel ingebakken. De builder rendert elementen in JavaScript ná de eerste paint. Dat zorgt ervoor dat de pagina drie keer hertekent voor je 'em ziet staan. Je kunt 2-3 dagen werk steken in plugins, caching-lagen en handmatige CSS overrides — en alsnog niet onder 0,15 komen.

De rekensom valt vaak uit in het voordeel van rebuilden. Een complete website-rebuild met DesignCheck-pakket starter (€1.995), groei (€3.995) of premium (€6.995) levert standaard CLS onder 0,05, LCP onder 1,8 s en INP onder 100 ms op. Bij Keurmeesters zijn we van een legacy-WordPress met CLS 0,42 naar een Astro-build met CLS 0,01 gegaan, in negen werkdagen.

Twijfel je tussen fix of rebuild? Vraag de gratis audit aan. We meten je viertal kernpagina's en geven binnen 48 uur een concreet pad: of CSS-werk volstaat, of dat een nieuw fundament de enige route is. Wereldwijd beschikbaar voor remote-projecten, op locatie binnen De Ronde Venen en omliggende gemeenten.

De vuistregel die we hanteren: kost de fix meer dan acht uur, en blijf je daarna boven 0,1 vastzitten op je belangrijkste pagina's, dan is een rebuild goedkoper op één-jaars-horizon. Je betaalt de rebuild één keer, je houdt 'em vijf jaar mee, en je verliest geen conversie meer aan een ranking-penalty die elk kwartaal terugkomt. Een trage site kost via gemiste bezoekers vaak meer per maand dan de eenmalige investering van een nieuwe build.

Tot slot één technisch detail dat veel mensen missen: contain: layout en contain-intrinsic-size in CSS kunnen op moderne browsers helpen om secties los te koppelen van elkaar. Een blogfeed onderaan je homepage die laat laadt mag dan nog steeds shiften — die shift telt niet meer mee voor het hele document, alleen voor die container. De impact fraction daalt drastisch. Voor componenten die je niet zelf controleert (third-party embeds in een specifieke div) is dit een snelle redding zonder dat je de embed zelf hoeft te herschrijven.

Hoe je CLS bewaakt na livegang

De gemiddelde MKB-site dryft na zes maanden zonder onderhoud terug naar zijn oorspronkelijke CLS. Reden: redacteuren plaatsen afbeeldingen via een CMS-veld dat geen dimensie-validatie heeft. Marketeers voegen een nieuwe trustpilot-widget toe zonder reservespace. Iemand zet een nieuw cookie-platform live met andere defaults. Drift gebeurt sluipend.

Drie maatregelen die drift voorkomen:

Klanten op een DesignCheck-rebuild krijgen deze monitoring standaard mee in elk pakket. Je hoeft niet zelf te bewaken — je krijgt elk kwartaal een health-rapport met de Core Web Vitals naast bouncerate en conversie.

Wat doe je vandaag?

Pak één pagina — je homepage of je drukstbezochte dienst-pagina. Open PageSpeed Insights, draai de mobiele test, scroll naar de Diagnostics-sectie en zoek "Avoid large layout shifts". Klik 'em open en lees welk element het zwaarst weegt. Negen van de tien keer is het één van deze drie: een hero-afbeelding zonder width/height, een cookie-banner die inline laadt, of een webfont zonder fallback-metrics. Eén van die drie kun je vanavond fixen, getest hebben, en gedeployed hebben in onder een uur. Doe die ene fix. Meet morgen opnieuw. De CLS-getallen liegen niet.

Gerelateerde gidsen

FAQ — CLS

Wat is een goede CLS-score?
Onder 0.1 = goed. 0.1-0.25 = matig. Boven 0.25 = slecht. Voor MKB-sites is 0.05 haalbaar als je alle afbeeldingen dimensies geeft.
Tellen layout shifts na een klik ook mee?
Nee. Sinds 2021 negeert CLS layout shifts die binnen 500ms na een gebruikersinteractie plaatsvinden. Alleen ongevraagde shifts tellen mee.
Cookie-banners — telt dat mee?
Ja, als hij content naar beneden duwt. Fix: laat de banner als overlay verschijnen (position fixed), niet inline. Of reserveer ruimte vooraf.
Geldt CLS ook voor footer-elementen die nooit zichtbaar zijn?
Nee. Google meet alleen shifts binnen de viewport van bezoekers. Als je footer 2000px naar beneden ploft maar niemand scrollt zo ver, telt het niet mee.
Hoe verschilt CLS in het lab van CLS in het veld?
Lab-data (Lighthouse) meet één laadbeurt op een schone machine. Field-data (CrUX) verzamelt 28 dagen aan echte bezoekers. Veldscores liggen vaak hoger omdat trage verbindingen, oude telefoons en cookie-banners shifts veroorzaken die in het lab nooit gebeuren.
Wat is een goede aspect-ratio aanpak voor responsieve afbeeldingen?
Gebruik altijd width en height attributen die de echte ratio van het bronbestand weergeven. CSS aspect-ratio fungeert als backup. De browser berekent de gereserveerde hoogte op basis van de container-breedte zodra de HTML wordt geparsed, lang voor de eerste pixel binnenkomt.
Kan een sticky header CLS veroorzaken?
Ja, als hij van static naar fixed verspringt na scroll-detectie via JS. De page-content schuift dan onder hem door. Fix: gebruik vanaf het begin position sticky of position fixed met een placeholder div in de flow.

Door Lorenzo Ruisi — DesignCheck. Laatst bijgewerkt 16 mei 2026.

Zit jouw CLS onder de 0.1?

De gratis audit meet 'em en geeft het fix-pad binnen 48 uur.

Site checken →