Cumulatieve verschuiving in lay-out (CLS)

Wat is cumulatieve lay-outverschuiving (CLS)?

Cumulative Layout Shift (CLS) is een Core Web Vitals-metric die is ontwikkeld door Google om de visuele stabiliteit van een webpagina te meten. Het kwantificeert het totaal van alle onverwachte lay-outverschuivingen die optreden tijdens de gehele levensduur van de pagina. Lay-outverschuivingen doen zich voor wanneer een zichtbaar element van positie verandert van het ene gerenderde frame naar het volgende.

Hoe CLS wordt gemeten

CLS-scores variëren van 0, wat staat voor geen verschuiving, tot waarden boven 0 die verschillende gradaties van instabiliteit aangeven. De formule houdt rekening met de impactfractie en afstandsfractie van elke verschuiving en berekent hoeveel de elementen bewegen en hoeveel van het viewport ze bestrijken.

CLS Score Interpretatie

• Goed: 0 - 0,1
• Verbetering nodig: 0.1 - 0.25
• Slecht: boven 0,25

Waarom is CLS belangrijk?

CLS is cruciaal voor de gebruikerservaring omdat onverwachte verschuivingen in de lay-out tot frustratie bij de gebruiker kunnen leiden. Als een gebruiker bijvoorbeeld op het punt staat op een knop te klikken en de lay-out verschuift, waardoor hij onbedoeld op iets anders klikt, kan dit leiden tot een slechte gebruikerservaring en mogelijk verlies van conversies.

Veelvoorkomende oorzaken van slecht CLS

1. Afbeeldingen zonder afmetingen:

   • Afbeeldingen opnemen in je HTML zonder hun breedte en hoogte op te geven kan leiden tot verschuivingen in de lay-out omdat de browser niet weet hoeveel ruimte hij aanvankelijk moet toewijzen.

2. Advertenties, invoegtoepassingen en iframes zonder afmetingen:

   • Deze elementen kunnen dynamisch laden en verschuivingen in de lay-out veroorzaken als hun afmetingen niet van tevoren zijn opgegeven.

3. Dynamisch geïnjecteerde inhoud:

   • Inhoud toevoegen boven bestaande inhoud in het DOM kan elementen naar beneden duwen, waardoor verschuivingen ontstaan.

4. Weblettertypen die FOIT/FOUT veroorzaken:

   • Flash of Invisible Text (FOIT) en Flash of Unstyled Text (FOUT) kunnen lay-outverschuivingen veroorzaken wanneer de browser webfonts laadt.

Beste praktijken om CLS te minimaliseren

1. Grootte-attributen toevoegen aan afbeeldingen en video's:

   • Definieer altijd de breedte en hoogte van afbeeldingen en video's in de HTML om ruimte te reserveren in de lay-out voordat ze worden geladen.

2. Reserveer ruimte voor advertenties en invoegtoepassingen:

   • Gebruik CSS om afmetingen in te stellen voor advertentieslots, iframes en embeds om verschuivingen in de lay-out te voorkomen wanneer ze worden geladen.

3. Vermijd het dynamisch injecteren van inhoud boven bestaande inhoud:

   • Voeg nieuwe inhoud toe onder de vouw of binnen containers die al een gereserveerde ruimte hebben.

4. Gebruik strategieën voor het laden van lettertypen:

   • Gebruik de font-display CSS eigenschap om te bepalen hoe weblettertypen worden weergegeven en minimaliseer verschuivingen door FOIT/FOUT.

5. Gebruik CSS Transform voor animaties:

   • Gebruik de transform eigenschap in plaats van boven, onder, links of rechts om elementen te animeren zonder dat de lay-out verschuift.

Conclusie

Cumulative Layout Shift (CLS) is een belangrijke maatstaf voor een stabiele en visueel aantrekkelijke gebruikerservaring. Door de factoren te begrijpen die bijdragen aan lay-outverschuivingen en best practices te implementeren om deze te minimaliseren, kunt u de CLS-score van uw webpagina verbeteren en de algehele gebruikerstevredenheid verhogen.

Voor meer informatie over het verbeteren van CLS en andere Core Web Vitals kunt u de documentatie over Web Vitals van Google bekijken.