Wat is CLS (Cumulative Layout Shift)? Uitleg en norm

CLS staat voor Cumulative Layout Shift en meet hoeveel de zichtbare elementen op je pagina onverwacht verspringen terwijl ze laadt. Je kent het gevoel: je wil op een knop tikken, er schiet plots een afbeelding in, en je klikt op het verkeerde. Dat visuele geschuif is precies wat CLS vastlegt. Het is een van de drie Core Web Vitals van Google en daarmee een signaal dat meeweegt in je SEO. In dit artikel lees je wat CLS precies is, wat een goede score is en hoe je layout shifts oplost.

Wat is CLS precies?

CLS is een score die de visuele stabiliteit van je pagina meet. Elke keer dat een zichtbaar element van plaats verspringt zonder dat de bezoeker een actie deed, telt dat mee als een layout shift. De score combineert twee zaken: hoeveel van het scherm verschuift en over welke afstand.

Belangrijk: CLS is cumulatief, wat betekent dat alle onverwachte verschuivingen tijdens de sessie worden opgeteld. Eén grote sprong of veel kleine sprongen leiden allebei tot een hoge, en dus slechte, score.

CLS hoort bij de Core Web Vitals, de set gebruikersgerichte prestatiescores waarmee Google meet hoe soepel een pagina aanvoelt. De andere twee zijn LCP (laadsnelheid van het grootste element) en INP (reactiesnelheid op interactie). Waar LCP en INP over tijd gaan, gaat CLS puur over stabiliteit: staat wat je ziet ook stil?

Wat is een goede CLS-score?

Google hanteert duidelijke drempels. Volgens web.dev geldt:

• Goed: 0,1 of lager
• Voor verbetering vatbaar: tussen 0,1 en 0,25
• Slecht: hoger dan 0,25

Die score wordt gemeten op het 75e percentiel van je paginaweergaven, verdeeld over mobiel en desktop. Met andere woorden: minstens 75 procent van je bezoekers moet een CLS van 0,1 of lager ervaren voordat je pagina als “goed” telt. Je meet dus niet één ideale test, maar de realiteit van je echte bezoekers.

Wat veroorzaakt een hoge CLS?

Layout shifts hebben bijna altijd dezelfde oorzaken. De grootste boosdoeners:

• Afbeeldingen zonder afmetingen. Als de browser niet weet hoe groot een afbeelding wordt, reserveert hij geen ruimte en schuift alles opzij zodra ze inlaadt.
• Advertenties, embeds en iframes. Blokken die pas later verschijnen duwen je content naar beneden.
• Laat ingeladen lettertypes. Een tekst die van standaardfont naar je eigen font springt, verschuift de layout.
• Dynamisch ingevoegde content. Cookiebanners, meldingen of “gerelateerde artikelen” die boven bestaande content verschijnen.

Veel hiervan overlapt met beeldoptimalisatie: wie zijn afbeeldingen netjes met vaste breedte en hoogte inlaadt, lost meteen een groot deel van zijn CLS op.

Onderstaande tabel zet de vier meest voorkomende oorzaken naast elkaar met wat er misgaat en de fix die wij in de praktijk als eerste inzetten.

Dit soort technische stabiliteit hoort thuis onder technische SEO: het gaat niet over meer content, maar over een pagina die zich voorspelbaar gedraagt.

Hoe verbeter je je CLS?

De oplossingen zijn technisch maar concreet:

• Geef afbeeldingen en video’s altijd een vaste breedte en hoogte (of een aspect-ratio), zodat de browser ruimte reserveert.
• Reserveer ruimte voor advertenties en embeds met een vast containerformaat.
• Laad lettertypes slim in zodat er geen zichtbare fontwissel gebeurt.
• Voeg dynamische content onder de vouw toe, niet bovenaan waar het bestaande elementen wegduwt.

Een bredere aanpak van je snelheid en stabiliteit vind je in Core Web Vitals verbeteren. CLS is daar vaak het makkelijkst te fixen, omdat de oorzaken meestal in een handvol elementen zitten.

Een concreet B2B-voorbeeld

Stel: een softwarebedrijf heeft een landingspagina voor een demo-aanvraag. Bovenaan staat een grote hero-afbeelding zonder vaste afmetingen, en het contactformulier staat eronder. Op mobiel laadt de tekst eerst, de bezoeker begint het formulier te lezen, en dan schiet de hero-afbeelding alsnog in. Alles onder de afbeelding zakt een stuk naar beneden. Wie net op het eerste invoerveld wilde tikken, raakt in plaats daarvan een verkeerde knop of scrolt de draad kwijt.

In de praktijk zien we dat zulke shifts vooral pijn doen op precies de pagina’s die leads moeten opleveren. De oplossing was hier klein: de hero een vaste hoogte geven en het formulier in een gereserveerde container zetten. Geen herschreven pagina, wel een stabielere eerste indruk op het moment dat het telt.

Veelgemaakte fouten

• Alleen op desktop testen. De meeste layout shifts vallen op mobiel, waar traag ladende afbeeldingen en smalle schermen elk verschil uitvergroten. Meet altijd de mobiele score.
• Op één labtest vertrouwen. Een schone score in een testtool zegt weinig als je echte bezoekers trage verbindingen of andere schermformaten hebben. CLS uit veldwaarden (het 75e percentiel) telt.
• De cookiebanner vergeten. Een banner of consentmelding die bovenaan inschuift verschuift je hele pagina en wordt makkelijk over het hoofd gezien bij het testen.
• CLS als losse to-do behandelen. Los je afbeeldingen op maar laat je advertenties en late content links liggen, dan blijft de score alsnog hoog. Pak de oorzaken samen aan.

Eerlijk: hoeveel telt CLS voor B2B?

We zijn er eerlijk over: een perfecte CLS-score levert op zichzelf geen leads op. Google gebruikt Core Web Vitals als één signaal tussen veel andere, en content en relevantie wegen zwaarder. Je gaat je concurrent niet voorbij puur omdat je pagina niet verspringt.

Waar CLS wél telt, is vertrouwen en conversie. Een B2B-bezoeker die een offerte overweegt en op een verspringende pagina belandt, twijfelt onbewust aan je professionaliteit. Erger nog: als je call-to-action of contactformulier wegschuift op het moment dat iemand wil klikken, verlies je de actie die er echt toe doet. Zo bekeken is CLS geen SEO-truc maar een kwestie van je bezoeker niet in de weg zitten. Stuur dus op de score omdat het je conversie helpt, niet om het dashboard.

Veelgestelde vragen

Wat betekent CLS? CLS staat voor Cumulative Layout Shift en meet hoeveel de zichtbare elementen op je pagina onverwacht verspringen tijdens het laden. Het is een van Googles Core Web Vitals.

Wat is een goede CLS-score? 0,1 of lager is goed, tussen 0,1 en 0,25 is voor verbetering vatbaar en hoger dan 0,25 is slecht, gemeten op het 75e percentiel van je bezoekers.

Wat is de grootste oorzaak van een hoge CLS? Meestal afbeeldingen, advertenties of embeds zonder vaste afmetingen, waardoor de browser geen ruimte reserveert en de content verspringt zodra ze inlaadt.

Is CLS een rankingfactor? CLS maakt deel uit van de Core Web Vitals die meewegen als rankingsignaal, maar de invloed is beperkt vergeleken met content en relevantie. De grootste winst zit in gebruikerservaring en conversie.

Verspringt je pagina en kost het je conversie?

Vertel ons welke pagina’s het belangrijkst zijn voor je leads, en we kijken waar layout shifts je bezoekers in de weg zitten. We zijn een klein team dat snel beweegt, dus je krijgt concrete fixes in plaats van een lijst met vage aanbevelingen. Plan je gratis intake.