CLS (Cumulative Layout Shift)

Hoe wordt CLS berekend?

Elke verschuiving krijgt een score. Die score is het product van twee getallen:

• Impactfractie: welk deel van het scherm de verschuivende elementen beslaan, oude en nieuwe positie samen.
• Afstandsfractie: hoe ver een element verschuift, gedeeld door de grootste afmeting van het scherm.

verschuivingsscore = impactfractie × afstandsfractie

Verschuivingen die snel na elkaar komen, vormen samen een sessievenster. Tussen twee verschuivingen zit dan minder dan 1 seconde, en een venster duurt hooguit 5 seconden. De CLS is de totaalscore van het venster met de hoogste score.

Verschuivingen binnen 500 milliseconden na een klik, tik of toetsaanslag krijgen een markering, zodat ze buiten de berekening blijven. Scrollen telt niet als zo’n interactie.

Voorbeeld: een banner die de pagina omlaag duwt

Fietsenwinkel De Ketting toont bovenaan de productpagina een actiebanner die later inlaadt. De inhoud eronder schuift daardoor omlaag. Op een telefoon beslaat het verschoven deel de helft van het scherm, oude en nieuwe positie samen. De verschuiving is 20 procent van de schermhoogte.

0,5 × 0,2 = 0,1

Eén zo’n sprong zit al precies op de grens van goed. De oplossing: geef de banner vaste afmetingen met width en height, of reserveer de ruimte met CSS aspect-ratio. Dan houdt de browser de plek vrij en springt er niets.

Waardoor verspringt een pagina?

• afbeeldingen of video’s zonder bekende afmetingen;
• lettertypen die groter of kleiner uitvallen dan het tijdelijke lettertype;
• advertenties of widgets van derden die zelf van grootte veranderen;
• inhoud die tijdens het scrollen inlaadt zonder gereserveerde ruimte.

Een nieuw element op zich is geen verschuiving. Het telt pas als andere zichtbare elementen daardoor van plek veranderen.

Labtools laden een pagina in een kunstmatige omgeving en zien alleen verschuivingen tijdens het laden. De CLS van echte bezoekers kan daardoor hoger uitvallen dan je in een labtest ziet.

Veelgestelde vragen over CLS