Wat is CLS (Cumulative Layout Shift)?
CLS staat voor Cumulative Layout Shift en meet hoeveel de inhoud van een pagina onverwacht verschuift terwijl die laadt. Iedereen kent het gevoel: je wil ergens op klikken, en op het laatste moment springt de pagina omhoog of omlaag doordat er iets boven je klikdoel verschijnt, met een verkeerde klik tot gevolg. Precies dat meet CLS.
Onderdeel van de Core Web Vitals
CLS is één van de drie Core Web Vitals, naast LCP (laadsnelheid) en INP (interactiesnelheid). Waar die twee andere metrics over snelheid gaan, gaat CLS puur over visuele stabiliteit, ongeacht hoe snel de pagina laadt.
Wat een goede CLS-score is
Onder 0,1 is goed, tussen 0,1 en 0,25 verdient het verbetering, en boven 0,25 is slecht. De score is een berekening op basis van hoeveel schermoppervlak verschuift en hoe ver, geen tijdseenheid zoals bij LCP en INP.
De meestvoorkomende oorzaak
Afbeeldingen, video's of advertenties zonder vooraf gedefinieerde afmetingen. Laadt zo'n element pas nadat de rest van de pagina al zichtbaar is, dan duwt het de content eromheen opzij zodra het verschijnt. De oplossing is simpel: geef elke afbeelding en elk advertentieblok altijd een vaste breedte en hoogte (of een aspect-ratio) in de code, zodat de browser meteen de juiste ruimte reserveert, nog voordat het element zelf geladen is.
Andere veelvoorkomende oorzaken
Dynamisch ingevoegde content zoals cookiebanners of pop-ups die bovenaan de pagina verschijnen en alles
naar beneden duwen, en webfonts die na het laden een net iets ander lettertype tonen waardoor tekstregels
verspringen (te verhelpen met font-display: optional of door het lettertype vooraf te laden).
SiteLens houdt je PageSpeed-scores, inclusief CLS, over tijd bij, zodat een nieuwe advertentie-integratie of widget die de stabiliteit verslechtert snel opvalt. Start een gratis proefperiode van 14 dagen.