Wat is Cumulative Layout Switch?

Cumulative Layout Shift (CLS) is onderdeel van de in 2020 gelanceerde Lighthouse waarden om je website te beoordelen op verschillende waarden qua laden van je website. Deze waarde beoordeeld de visuele stabiliteit van de pagina tijdens het laden. Cumulative Layout Shift (CLS) is een belangrijke waarde die wordt gebruikt om de stabiliteit van de lay-out op een webpagina te beoordelen tijdens het laden en gebruik door gebruikers.

Het verwijst naar onverwachte en ongewenste verschuivingen van de inhoud van een webpagina, met name elementen zoals tekst, afbeeldingen, knoppen en andere grafische elementen. Deze verschuivingen kunnen optreden wanneer de pagina wordt geladen, maar ook tijdens het interactieve gebruik ervan.

Uitleg CLS

CLS wordt vaak geassocieerd met een slechte gebruikerservaring omdat het de volgende problemen kan veroorzaken:

  1. Verwarring: Gebruikers kunnen in de war raken of fouten maken als knoppen of koppelingen plotseling van positie veranderen terwijl ze proberen te interageren met de website.
  2. Frustratie: Onverwachte lay-outverschuivingen kunnen frustrerend zijn en leiden tot een negatieve indruk van de website, wat de gebruikerservaring verslechtert.
  3. Toegankelijkheidsproblemen: CLS kan problemen veroorzaken voor mensen met beperkingen, zoals slechtzienden, omdat ze moeite kunnen hebben om de inhoud te begrijpen als deze voortdurend verschuift.
  4. Lagere betrokkenheid: Gebruikers kunnen de website verlaten als ze de ervaring als storend of onaangenaam ervaren, wat resulteert in een hoog bouncepercentage en lagere conversieratio’s.

Hoe wordt CLS gemeten?

CLS wordt gemeten op een schaal van 0 tot 1, waarbij een score van 0 betekent dat er geen lay-outverschuivingen zijn en een score van 1 aangeeft dat de pagina continu verschuift. Google en andere zoekmachines gebruiken CLS als onderdeel van hun algoritmen voor het rangschikken van zoekresultaten, waardoor het een belangrijk aandachtspunt is voor website-eigenaren en ontwikkelaars die streven naar een goede gebruikerservaring en een goede zichtbaarheid in zoekmachines.

Om Cumulative Layout Shift te verminderen en te voorkomen, moeten je als ontwikkelaar optimaliseren voor factoren zoals het juiste formaat van elementen op een WordPress website, het gebruik van aspectratio’s voor afbeeldingen en video’s, en het gebruik van CSS-technieken om inhoudsverschuivingen te minimaliseren. Het doel is om een stabiele gebruikerservaring te bieden zonder onverwachte lay-outverschuivingen.

Simpele uitleg: CLS meet de onverwachte beweging van elementen op je website terwijl de pagina opgebouwd word. Deze waarde wordt gewaardeerd als een gemiddelde score voor alle verschuivingen op je website. CLS is ook een onderdeel van de Google Web Core Vitals. Meer hierover lees je hier.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis nooit meer website tips.

Al 500+ webdesigners en marketeers ontvangen onze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.