Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is een belangrijke maatstaf voor de gebruikerservaring op websites. Het meet hoe stabiel de visuele lay-out van een webpagina is tijdens het laden. CLS maakt deel uit van de Core Web Vitals, een set van prestatiefactoren die Google gebruikt om de gebruikerservaring te evalueren.

Wat is CLS?

Cumulative Layout Shift verwijst naar onverwachte verschuivingen van de lay-out van een webpagina terwijl de inhoud wordt geladen. Dit gebeurt wanneer elementen zoals afbeeldingen, advertenties of dynamische inhoud zich verplaatsen terwijl de pagina wordt weergegeven. Deze verschuivingen kunnen frustrerend zijn, vooral als je een formulier invult of een link probeert aan te klikken.

Hoe werkt CLS?

CLS wordt gemeten door de optelling van de verschuivingen van de lay-out die plaatsvinden tijdens het laden van de pagina. De maatstaf houdt rekening met twee hoofdcomponenten:

1. Impact Fraction: De verhouding van het gebied van de viewport dat door het verschuivende element wordt bedekt.
2. Distance Fraction: De verhouding van de verschuivingsafstand ten opzichte van de viewporthoogte.

Het product van deze twee waarden bepaalt de cumulatieve verschuiving, oftewel de CLS-score.

Voorbeeld van een bedrijf

Neem bijvoorbeeld een e-commercewebsite zoals Coolblue. Stel je voor dat een productafbeelding die niet goed is geconfigureerd, pas na een paar seconden zichtbaar wordt. Tijdens die tijd kunnen andere elementen op de pagina verschuiven, wat kan leiden tot frustratie bij klanten die proberen te navigeren of producten aan hun winkelwagentje toe te voegen.

TeamROI’s advies

Om de Cumulative Layout Shift te verminderen, adviseren wij je de volgende stappen:

• Zorg voor voldoende ruimte: Reserveer ruimte voor dynamische inhoud zoals afbeeldingen of advertenties door afmetingen in de HTML- en CSS-code te specificeren.
• Gebruik dimensies: Voeg breedte- en hoogte-attributen toe aan afbeeldingen en video’s om ervoor te zorgen dat de browser weet hoeveel ruimte ze nodig hebben voordat ze worden geladen.
• Optimaliseer laadtijden: Minimaliseer het gebruik van externe bronnen en scripts die de lay-out kunnen beïnvloeden tijdens het laden van de pagina.

Door deze praktijken toe te passen, kun je een stabielere en aangenamere gebruikerservaring bieden. Dit kan leiden tot hogere klanttevredenheid en betere prestaties in zoekresultaten.