Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is een gebruikerservaring metric die wordt gebruikt om de visuele stabiliteit van een webpagina te meten. Het is ook een van de Core Web Vitals, een set van statistieken die website-eigenaren en ontwikkelaars helpen begrijpen hoe goed hun pagina’s presteren voor echte gebruikers.

CLS meet de mate van onverwachte verschuivingen van de lay-out op een webpagina terwijl deze wordt geladen. Dit gebeurt wanneer de inhoudselementen, zoals afbeeldingen, advertenties, of knoppen, op de pagina van positie veranderen terwijl de gebruiker probeert te interageren met de inhoud. Deze verschuivingen kunnen frustrerend zijn voor gebruikers, vooral als ze per ongeluk op verkeerde knoppen klikken of als de inhoud plotseling verplaatst terwijl ze aan het lezen zijn.

Om Cumulative Layout Shift te berekenen, wordt het product genomen van de oppervlakte van de verschuivende elementen en de mate van verschuivingen. Hoe groter het verschoven gebied en hoe meer de inhoud verschuift, hoe hoger de CLS-score zal zijn.

Om CLS te verminderen en de visuele stabiliteit van een webpagina te verbeteren, moeten webontwikkelaars zich richten op het gebruik van vaste afmetingen voor media-inhoud, het reserveren van ruimte voor advertenties, het vermijden van het toevoegen van inhoud bovenop bestaande inhoud tijdens het laden en het zorgvuldig laden van dynamische inhoud, zoals afbeeldingen of video’s.

CLS wordt gemeten met behulp van tools zoals Google’s PageSpeed Insights of Lighthouse, die inzicht geven in de visuele stabiliteit van een webpagina en suggesties bieden om de Cumulative Layout Shift te optimaliseren voor een betere gebruikerservaring.

Naast Cumulative Layout Shift is het ook goed om te kijken naar Total Blocking Time, First Contentful Paint, Largest Contentful Paint en Speed Index.