Cumulative Layout Shift (CLS) is een belangrijke prestatiemeting die door Google is geïntroduceerd als onderdeel van de Core Web Vitals. Deze metric meet de visuele stabiliteit van een webpagina door te kwantificeren hoeveel onverwachte lay-outverschuivingen er plaatsvinden tijdens het laden van de pagina. Een lay-outverschuiving treedt op wanneer zichtbare elementen op de pagina onverwacht van positie veranderen, wat een frustrerende gebruikerservaring kan opleveren.
CLS wordt berekend door de impact van alle individuele lay-outverschuivingen die tijdens de levensduur van een pagina plaatsvinden op te tellen. De score varieert van 0 tot oneindig, waarbij 0 betekent dat er geen verschuivingen zijn. Google beschouwt een CLS-score van minder dan 0,1 als goed, tussen 0,1 en 0,25 als verbetering nodig, en meer dan 0,25 als slecht.
Hoe wordt CLS berekend?
De CLS-score wordt berekend met de volgende formule:
Layout Shift Score = Impact Fraction × Distance Fraction
- Impact Fraction: Het percentage van de viewport dat wordt beïnvloed door de verschuiving
- Distance Fraction: De afstand die het element heeft afgelegd ten opzichte van de viewport
De totale CLS-score is de som van alle individuele layout shift scores die optreden tijdens het laden en de interactie met de pagina.
Waarom is CLS belangrijk?
CLS is om meerdere redenen cruciaal voor website-eigenaren:
- Gebruikerservaring: Onverwachte verschuivingen leiden tot frustratie, vooral wanneer gebruikers op een verkeerde knop klikken door een plotselinge verschuiving
- SEO-ranking: Sinds 2021 is CLS een officiële rankingfactor in Google's algoritme als onderdeel van de Page Experience Update
- Conversie: Een slechte CLS-score kan leiden tot lagere conversiepercentages doordat gebruikers afhaken of verkeerde acties uitvoeren
- Mobiele ervaring: Op mobiele apparaten zijn lay-outverschuivingen vaak nog storender door het kleinere scherm
Veelvoorkomende oorzaken van CLS
Er zijn verschillende technische factoren die tot een hoge CLS-score kunnen leiden:
- Afbeeldingen zonder dimensies: Wanneer afbeeldingen geen expliciete breedte en hoogte hebben, reserveert de browser geen ruimte totdat ze geladen zijn
- Advertenties en embeds: Dynamisch geladen content zoals advertenties die geen vaste ruimte hebben
- Webfonts: Het laden van custom fonts kan tekst laten verschuiven (FOIT of FOUT)
- Dynamische content: Content die na het eerste renderen wordt toegevoegd zonder gereserveerde ruimte
- Animaties: CSS-animaties die transform en andere eigenschappen gebruiken die lay-out beïnvloeden