Cumulative Layout Shift, oftewel CLS, is een Google-score die meet hoeveel de zichtbare content van een pagina onverwacht verspringt terwijl die laadt. Een hoge score betekent dat dingen verspringen: je wilt op een knop tikken en er laadt een afbeelding boven, waardoor de knop omlaag schuift net als je vinger neerkomt.
Je hebt dit op een nieuwssite gevoeld. Je begint te lezen, dan schuift er bovenin een advertentie tussen en het hele artikel springt een alinea omlaag. Die irritante schok is precies wat CLS vastlegt, gescoord vanaf 0 (rotsvast) en omhoog, waarbij alles op of onder 0,1 als goed telt. Het is een van de drie Core Web Vitals die Google gebruikt om de pagina-ervaring te beoordelen.
De meeste layout shift komt van elementen die binnenkomen zonder gereserveerde ruimte. Een afbeelding zonder vaste afmetingen, een banner die laat inschiet, of een webfont dat omwisselt nadat de tekst al getekend is. De oplossing is de browser vooraf vertellen hoe groot dingen worden, wat nauw samenhangt met zorgvuldige image optimization en gedisciplineerd laden.
Een nuchtere kanttekening: CLS wordt gemeten over de hele tijd dat een bezoeker bezig is, niet alleen die eerste seconde. Een verspringing na een klik op “meer laden” telt dus ook mee. En de score komt uit echte Chrome-gebruikers, wat kan afwijken van een schone meting in het lab. De echte oplossing zit in de structuur. Zet breedte en hoogte op je beeld, geef advertentievakken een vast formaat, en laad lettertypes met een passende fallback zodat het inwisselen van het echte font de tekst niet verschuift.
Bij TopDevs houden we CLS laag door vooraf ruimte te reserveren voor elke afbeelding, advertentie en embed, zodat de pagina’s van een klant stabiel blijven en bezoekers nooit hun plek kwijtraken.
