CLS (Cumulative Layout Shift)
CLS meet hoeveel zichtbare elementen onverwacht verschuiven tijdens het laden van een pagina — een van Google's Core Web Vitals.
Wat is CLS (Cumulative Layout Shift)?
CLS meet hoeveel zichtbare elementen onverwacht verschuiven tijdens het laden of het gebruik van een pagina. De score is eenheidsloos en wordt berekend als de impactfractie (hoeveel van het scherm wordt beïnvloed) vermenigvuldigd met de afstandsfractie (hoe ver de elementen verschuiven). CLS is een van de drie Core Web Vitals, naast LCP en INP. Een goede score is 0.1 of lager op het 75e percentiel — alles boven 0.25 wordt als slecht beschouwd.
Waarom is CLS (Cumulative Layout Shift) belangrijk?
Verschuivingen in de lay-out zijn direct schadelijk voor een webshop: een klant staat op het punt om op “Kopen” te tikken, maar een banner of een traag ladende afbeelding verschuift de knop waardoor de klant op iets anders tikt. Dit zorgt voor frustratie, verkeerde klikken en wantrouwen vlak voor de conversie. CLS is ook onderdeel van Google’s signalen voor pagina-ervaring, waardoor aanhoudend hoge waarden de posities in de zoekresultaten kunnen verslechteren. Een stabiele pagina voelt sneller en professioneler aan — zelfs wanneer de laadtijd exact hetzelfde is.
Veelvoorkomende toepassingen
- Afbeeldingen en video’s zonder afmetingen. Zonder
width/heightofaspect-ratiokan de browser vooraf geen ruimte reserveren, waardoor de inhoud verspringt zodra de media geladen worden — combineer dit met een goede alt-tekst. - Cookiebanners en pop-ups. Inhoud die bovenaan of in het midden van de pagina wordt ingevoegd, schuift alles daaronder omlaag.
- App-widgets. Beoordelingen, “recent bekeken” en upsell-blokken die later laden, veranderen de lay-out achteraf.
- Weblettertypen (fonts). Het wisselen van een stand-by lettertype naar het uiteindelijke lettertype kan ertoe leiden dat tekst verspringt.
- Advertenties en iframes zonder gereserveerde ruimte in het gedeelte boven de vouw.
Shopify-perspectief
In Shopify worden de meeste lay-outverschuivingen veroorzaakt door apps en aanpassingen aan het thema, in plaats van het kernplatform zelf. Reserveer altijd ruimte voor dynamische blokken, stel vaste afmetingen in voor productafbeeldingen en laad cookiebanners en pop-ups zo dat ze de inhoud niet verschuiven. Meet het effect met PageSpeed Insights of Lighthouse op zowel mobiel als desktop, en bekijk het snelheidsrapport onder Onlinewinkel in de Shopify-beheeromgeving, dat is gebaseerd op Google Lighthouse-gegevens.