Cumulative Layout Shift Cls

Wat is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift, afgekort CLS, is een maatstaf die aangeeft hoe visueel stabiel een webpagina is tijdens het laden. De score meet in hoeverre elementen op de pagina onverwacht van positie veranderen terwijl de content nog wordt ingeladen. Denk aan een knop die plotseling naar beneden schuift omdat er een afbeelding boven verschijnt, of tekst die verspringt doordat een advertentie wordt geladen.

CLS is onderdeel van de Core Web Vitals, de set prestatiestandaarden die Google gebruikt als rankingfactor. Een goede CLS-score ligt onder de 0,1. Scoort je pagina hoger dan 0,25, dan is er sprake van een slechte gebruikerservaring die ook je zoekpositie negatief beinvloedt.

Hoe wordt CLS berekend?

De CLS-score wordt berekend op basis van twee factoren: de impact fraction en de distance fraction. De impact fraction beschrijft welk deel van het scherm wordt beinvloed door een verschuiving. De distance fraction geeft aan hoe ver het element verplaatst is ten opzichte van de schermhoogte. Deze twee waarden worden vermenigvuldigd en opgeteld over de gehele laadperiode van de pagina.

Google meet CLS zowel in laboratoriumomstandigheden (via tools als Lighthouse) als in echte gebruikssituaties via het Chrome User Experience Report (CrUX). Dit maakt CLS een meting die direct aansluit op de werkelijke beleving van je bezoekers.

Veelvoorkomende oorzaken van een hoge CLS

• Afbeeldingen en video's zonder vaste breedte- en hoogte-attributen in de HTML
• Advertenties, embeds of iframes die zonder gereserveerde ruimte worden ingeladen
• Weblettertypen die na het laden van de pagina worden toegepast (FOIT of FOUT)
• Dynamisch toegevoegde content bovenaan bestaande content
• Animaties of transities die layout-eigenschappen zoals hoogte en breedte aanpassen

Waarom is CLS belangrijk voor SEO en conversie?

Google heeft de Core Web Vitals, inclusief CLS, opgenomen als rankingfactoren. Een slechte CLS-score kan je positie in de zoekresultaten direct schaden. Maar los van SEO heeft CLS ook een directe impact op conversie. Wanneer een bezoeker op een knop wil klikken en die knop verspringt op het laatste moment, klikt diegene op het verkeerde element. Dit leidt tot frustratie, hogere bounce rates en minder conversies.

Zeker voor webshops en landingspagina's waar bezoekers snel een actie moeten ondernemen, is een stabiele lay-out essentieel. Een lage CLS-score versterkt het vertrouwen in je website en verhoogt de kans dat bezoekers daadwerkelijk converteren.

Hoe verbeter je je CLS-score?

1. Geef afbeeldingen altijd vaste afmetingen mee via de width- en height-attributen in HTML, zodat de browser al voor het laden ruimte reserveert.
2. Reserveer ruimte voor advertenties en embeds met een vaste container, ook als de content nog niet geladen is.
3. Gebruik font-display: swap of laad weblettertypen vooraf via preload, zodat tekstwisseling minimaal is.
4. Voeg nieuwe content alleen toe onderaan de pagina, nooit bovenaan bestaande content tenzij als reactie op een gebruikersinteractie.
5. Vermijd lay-outveranderende CSS-animaties en gebruik in plaats daarvan transform en opacity, die geen layout-herberekeningen triggeren.

Hulp bij Cumulative Layout Shift (CLS)?

Een lage CLS-score vraagt om een technisch goed gebouwde website en een doordachte SEO-aanpak. Bij Wiex combineren we technische optimalisatie met bewezen SEO-strategie om je Core Web Vitals structureel te verbeteren. Bekijk onze SEO-diensten voor meer informatie, of neem direct contact op via onze contactpagina.