CLS (Cumulative Layout Shift) meet hoeveel de inhoud van een webpagina onverwacht verschuift terwijl je hem bekijkt. Je kent het effect: je wilt op een knop tikken, bovenaan laadt nog een afbeelding of advertentie, en je tikt op iets anders. Een CLS van 0,1 of lager is goed, en boven 0,25 geldt de score als slecht.
De browser geeft elke verschuiving een score door twee getallen te vermenigvuldigen: welk deel van het scherm de verschuiving raakt en hoe ver de elementen opschuiven. Verschuivingen die snel na elkaar gebeuren, telt hij op in een venster van maximaal 5 seconden, en het zwaarste venster bepaalt de CLS. Verschuivingen binnen 500 milliseconden na een klik of toetsaanslag tellen niet mee, omdat de bezoeker die zelf veroorzaakt.
CLS is een van de drie Core Web Vitals, naast LCP voor het laden en INP voor de reactiesnelheid. De bekendste oorzaken zijn afbeeldingen en video's zonder width en height, en advertenties of embeds zonder vaste ruimte. Ook inhoud die een script later bovenaan invoegt en webfonts die groter of kleiner uitvallen dan het eerste lettertype laten een pagina verspringen.
Op je hosting los je de meeste verschuivingen op in je HTML of thema: geef elke afbeelding een width en height, zodat de browser vooraf ruimte vrijhoudt. Gebruik je WordPress met LiteSpeed Cache, dan vult de optie Add Missing Sizes ontbrekende maten van je eigen afbeeldingen aan. Je vindt hem onder Page Optimization, op het tabblad Media Settings. Die optie werkt alleen als Lazy Load Images ook aanstaat. Je score per pagina zie je in PageSpeed Insights.
Geschiedenis
CLS hoort sinds de start van het programma Web Vitals op 5 mei 2020 bij de Core Web Vitals (Chromium Blog). De meting bouwt op de Layout Instability API, waarmee de browser elke verschuiving van zichtbare elementen rapporteert.
Belangrijke mijlpalen:
- 5 mei 2020: CLS wordt een van de drie Core Web Vitals
- April 2021: Google telt verschuivingen voortaan op per venster van maximaal 5 seconden, in plaats van over de hele levensduur van de pagina (Evolving the CLS metric)
- Juni 2021: De page experience update laat de Core Web Vitals, waaronder CLS, geleidelijk meewegen in Google Zoeken (Google Search Central)
Bronnen
