Cumulative Layout Shift (CLS)

Betekenis van Cumulative Layout Shift

Cumulative Layout Shift (CLS) is een Core Web Vital-metriek van Google die meet hoeveel de elementen op een webpagina onverwacht verschuiven tijdens het laden.
Het gaat dus om visuele stabiliteit: hoe vaak en hoe erg content opspringt of beweegt terwijl de pagina nog bezig is met laden.

Een lage CLS-score betekent dat je pagina stabiel is en gebruikers prettig kunnen lezen en klikken — zonder dat knoppen of tekst ineens verspringen.

Hoe wordt CLS gemeten?

CLS berekent de som van alle onverwachte verschuivingen van zichtbare elementen in de viewport.
De score ligt tussen 0 en 1:

• 0 = perfect (geen verschuivingen)
• > 0,25 = slecht

Een goede richtlijn volgens Google is een CLS van 0,1 of lager.

Voorbeelden van slechte CLS

• Afbeeldingen of video’s zonder vaste afmetingen die pas later laden.
• Advertenties of banners die plotseling ruimte innemen.
• Dynamische content (zoals pop-ups of cookies) die het scherm laat verspringen.

SEO-belang van een lage CLS-score

CLS is een onderdeel van de Page Experience-rankingfactor.
Een slechte CLS-score schaadt niet direct je indexatie, maar kan wel:

• je gebruikerservaring negatief beïnvloeden;
• leiden tot hogere bounce rates;
• lagere conversies opleveren doordat bezoekers per ongeluk op verkeerde knoppen tikken.
• Een stabiele lay-out zorgt dus voor een betere gebruikservaring én helpt indirect je SEO-prestaties.

Best practices om CLS te verbeteren

• Reserveer ruimte voor afbeeldingen, video’s en iframes met vaste breedte en hoogte.
• Voeg nooit content boven bestaande elementen in (behalve bij gebruikersinteractie).
• Gebruik CSS-aspect-ratio’s voor visuele elementen.
• Voorkom verschuivingen door webfonts met font-display: optional of swap.
• Test regelmatig via Google PageSpeed Insights of Lighthouse.

Veelgemaakte fouten

• Geen vaste afmetingen voor mediabestanden.
• Advertentieblokken die pas laat worden geladen.
• Dynamische elementen die content verschuiven bij scroll of klik.

Gerelateerde begrippen

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Core Web Vitals
• Page Experience
• PageSpeed Insights