Cumulative Layout Shift (CLS)
CLS meet hoeveel de visuele layout van een pagina onverwacht verspringt tijdens het laden, een score die visuele stabiliteit bewaakt.
Cumulative Layout Shift meet layout-shifts (onverwachte verspringingen van elementen) tijdens het laden. Iedereen kent het: je wil op een knop klikken, een advertentie laadt in en je klikt per ongeluk ergens anders. CLS < 0,1 is 'good', > 0,25 is 'poor'. CLS beïnvloedt direct conversie en gebruikerstevredenheid.
Voorbeeld
Een blog heeft CLS 0,38 omdat de hero-afbeelding zonder width/height-attribuut laadt. Toevoegen van width="800" height="400" op alle <img>-tags brengt CLS naar 0,04.
Veelgestelde vragen
Wat zijn de grootste oorzaken van CLS?
Afbeeldingen zonder dimensies, dynamisch ingeladen advertenties, webfonts die tekst herstapelen (FOIT/FOUT), en iframes zonder gereserveerde ruimte.
Hoe reserveer ik ruimte voor asynchrone content?
Gebruik expliciete width/height attributen, CSS aspect-ratio, of een skeleton loader. Voor advertenties: CSS min-height op de container.
Telt CLS boven de fold zwaarder?
Alle shifts tellen, maar above-the-fold shifts vallen gebruikers het meeste op. Google's meting aggregeert over de hele sessie, niet alleen initial load.
Gerelateerde termen
Verder lezen
- → Onze dienst: SEO