Definitie
CLS meet hoeveel zichtbare elementen onverwacht verspringen terwijl een pagina laadt of gebruikt wordt. Goed is een score van 0,1 of lager.
Wat is CLS?
Cumulative Layout Shift meet visuele stabiliteit: hoeveel zichtbare content onverwacht verschuift. Iedereen kent het. Je wilt op een product tikken en op het laatste moment schuift er een banner boven, zodat je op iets anders tikt.
Elke verschuiving krijgt een score: het deel van het scherm dat beweegt, maal de afstand waarover het beweegt. CLS is de som van de verschuivingen in het slechtste 'venster' van maximaal 5 seconden. Verschuivingen binnen 500 ms na een klik of tik van de bezoeker tellen niet mee, die zijn verwacht. Goed is 0,1 of lager, slecht is boven 0,25.
Waarom het ertoe doet voor webshops
CLS is de Core Web Vital die het directst irritatie oplevert. Een verspringende 'In winkelwagen'-knop of een prijs die wegzakt achter een promobalk kost vertrouwen en kliks. Het goede nieuws: CLS is meestal goed te repareren zonder grote verbouwing.
CLS hangt ook samen met de back/forward cache van de browser. Gaat een bezoeker van een productpagina terug naar de categoriepagina en kan die pagina uit de bfcache komen, dan staat alles direct op zijn plek zonder nieuwe verschuivingen. Pagina's met een unload-handler of Cache-Control: no-store komen daar meestal niet voor in aanmerking.
De bekende veroorzakers
Afbeeldingen zonder width en height of aspect-ratio, waardoor de browser geen ruimte reserveert. Een USP- of kortingsbalk die pas na een script bovenaan wordt ingevoegd. Reviewsterren en 'betaal later'-blokken van apps die na het laden verschijnen. Webfonts die na het laden van formaat wisselen. Een cookiebanner die de pagina omlaag duwt in plaats van eroverheen te liggen.
In Magento Luma zie je CLS vaak in de header en de productgalerij: de klantnaam, minicart-teller en galerij worden met JavaScript opgebouwd nadat de HTML er al staat. In Hyvä staan die blokken met vaste afmetingen in de server-HTML. In Shopify zijn app blocks de grootste bron: ze laden asynchroon en duwen content omlaag als het theme geen ruimte vrijhoudt.
Zo los je het op
Geef elke afbeelding en elk embed vaste afmetingen. Reserveer ruimte voor blokken die later laden met min-height. Laat banners en popups over de content heen vallen met position: fixed. Gebruik voor animaties transform in plaats van top of height. Stem je fallback-font af op het webfont met size-adjust, zodat de wissel nauwelijks zichtbaar is.
Let op: CLS telt het hele bezoek. Een lazy geladen blok halverwege de pagina zonder gereserveerde hoogte telt ook mee als de bezoeker erlangs scrolt. Test dus niet alleen het bovenste scherm.
Meet na elke wijziging aan header, USP-balk of cookiebanner opnieuw. Dat zijn onderdelen die op elke pagina staan, dus één fout raakt meteen je hele shop.
Ruimte reserveren
<img src="/img/product.webp" width="600" height="600" alt="...">
<style>
.product-reviews { min-height: 120px; }
.usp-bar { height: 36px; }
.cookie-banner { position: fixed; bottom: 0; }
</style>Verder lezen
Veelgestelde vragen
Waarom is mijn CLS in het veld slechter dan in Lighthouse?+
Lighthouse meet alleen het laden zonder scrollen en klikken. Echte bezoekers scrollen, accepteren cookies en laden apps, en al die verschuivingen tellen in CrUX wel mee.
Telt een uitklappend menu als layout shift?+
Niet als het binnen 500 ms na de klik of tik van de bezoeker gebeurt. Dat geldt als verwachte verschuiving.