Wat is Cumulative Layout Shift (CLS), en hoe optimaliseer je het?

Wat is een layout shift? #

Cumulative Layout Shift is een Google Core Web Vitals metric die de visuele stabiliteit van je website meet. Concreter: het meet de grootste reeks layoutverschuivingen (sessievenster) bij elke onverwachte verschuiving gedurende de volledige levensduur van de pagina, zowel tijdens het laden als tijdens interactie.

Het gaat om één of meerdere layoutverschuivingen die binnen een sessievenster van maximaal 5 seconden en binnen 1 seconde van elkaar plaatsvinden. Het sessievenster met de hoogste cumulatieve score van alle layoutverschuivingen bepaalt de uiteindelijke CLS-waarde.

Samen met 'Largest Contentful Paint' en 'First Input Delay' meten de Core Web Vitals drie aspecten van de gebruikerservaring: laadsnelheid, responsiviteit en visuele stabiliteit. De resultaten gebruikt Google als signalen voor de Page Experience in de kern-rankingsystemen van Search. Goed scoren op alle drie de metrics? Dan kun je hogere rankingposities behalen.

Maar laten we terugkeren naar CLS en twee voorbeelden bekijken van een verschuivende layout. Best vervelend, toch...?

Onverwachte layoutverschuivingen kunnen grote problemen veroorzaken voor gebruikers. De intentie van de gebruiker was het tegenovergestelde van wat er op de pagina daadwerkelijk gebeurde.

Het kan ook minder dramatisch zijn, maar niet minder ergerlijk: gebruikers raken de positie kwijt van de tekst die ze aan het lezen waren.

Net als bij de andere Core Web Vitals kan visuele stabiliteit de gebruikerservaring sterk beïnvloeden. Maar anders dan snelheid druk je visuele stabiliteit niet uit in tijd. Daarom heeft Google een layout shift score bedacht, die het product is van twee factoren, zoals we hierna uitleggen.

Hoe wordt de CLS score berekend? #

Om de layout shift score te berekenen, kijkt de browser naar de totale grootte van de viewport en de beweging van instabiele elementen in de viewport tussen twee gerenderde frames. Renderen is het proces waarbij websitecode wordt omgezet naar de interactieve pagina die de gebruiker ziet. De layout score is het product van twee maatstaven: de impact en de afstandsfractie.

De impact fraction meet hoe instabiele elementen het viewportgebied beïnvloeden tussen twee frames.

In de afbeelding hierboven neemt een element de helft van de viewport in en verschuift het in het volgende frame 25% van de viewporthoogte. De rode stippelrechthoek vertegenwoordigt het zichtbare gebied van het element in beide frames: 75% van het totale kijkvenster. De impact fraction is dus 0,75.

De distance fraction meet de afstand die instabiele elementen hebben afgelegd ten opzichte van de viewport.

In de afbeelding hierboven is de grootste viewportdimensie de hoogte. Het instabiele element verschuift 25% van de viewporthoogte, waardoor de distance fraction 0,25 is.

In dit voorbeeld is de impact fraction 0,75 en de distance fraction 0,25, zodat de layout shift score 0,75 × 0,25 = 0,1875 bedraagt.

Wat is een goede CLS score? #

Streef naar een Cumulative Layout Shift score van 0,1 of lager. Net als bij de andere Core Web Vitals hanteert Google het 75e percentiel van paginabezoeken, uitgesplitst naar mobiel en desktop. Dat betekent: 75% van je gebruikers moet een CLS score van 0,1 of lager ervaren om de Core Web Vitals assessment te halen. Tussen 0,1 en 0,25 zijn verbeteringen nodig. Boven 0,25 heb je een slechte score. Vergeet niet: om de assessment te halen, moet je op alle drie de metrics goed scoren — FID, LCP én CLS.

Meten in het veld versus meten in het lab #

Er zijn twee methoden om websiteprestaties te meten: data verzamelen in het veld en in het lab. CLS meet je in beide omgevingen.

In het lab simuleer je de ervaring van een potentiële gebruiker. Je kunt geen interacties initiëren, waardoor mogelijke layoutverschuivingen alleen tijdens het initiële laden van de pagina worden gemeten (initial-load CLS). Bovendien heeft meten in het lab beperkingen: bepaalde functionaliteiten zijn uitgeschakeld of werken anders, zoals cookiebanners, live chat-tools, advertenties of gepersonaliseerde content. Zie je CLS-problemen in het lab? Dan ervaren echte gebruikers die ook. Los ze op voordat je live gaat.

Voor betrouwbare data kijk je naar veldmetingen: echte gebruikers die interacties hebben met je site. In het veld meet je CLS gedurende de volledige levensduur van de pagina — zowel initial-load CLS als post-load CLS. Komen de CLS scores in het veld en het lab niet overeen, dan wijst dat waarschijnlijk op post-load CLS problemen.

Niet alle layout shifts zijn slecht #

Door de gebruiker geïnitieerde layout shifts #

Een layout shift is alleen problematisch als de gebruiker hem niet verwacht. Verschuift de layout direct nadat een gebruiker met de pagina interacteert via een klik, tik of toetsaanslag, dan is dat geen probleem, zolang de timing logisch aanvoelt. Layout shifts die binnen 500 milliseconden na gebruikersinput optreden (scrollen, slepen, pinch en zoom zijn uitgesloten) krijgen de hadRecentInput vlag, waardoor ze worden uitgesloten van de berekening.

Animaties en overgangen #

Animaties en overgangen vernieuwen content op pagina's op een begrijpelijke manier. Ze begeleiden gebruikers tussen verschillende statussen. Mits vloeiend en zonder abrupte bewegingen, leveren ze een goede ervaring.

Bij animaties of overgangen verlopen bewegingen tussen posities natuurlijk. Met de CSS transform eigenschap animeer je elementen zonder layout shifts te veroorzaken:

• Gebruik transform:scale() in plaats van de width en height eigenschappen te wijzigen.
• Gebruik voor het herpositioneren van elementen transform:translate() in plaats van top, bottom, right en left aan te passen.

Veelvoorkomende oorzaken van Cumulative Layout Shift (CLS) #

Layout shifts kunnen gebruikers afleiden, irriteren of zelfs wegjagen als de functionaliteit van een element of pagina er sterk door aangetast wordt. Ligt je CLS score boven 0,1? Neem dan actie.

De meest voorkomende oorzaken van te veel layoutverschuivingen zijn:

• Afbeeldingen zonder vooraf bepaalde afmetingen.
• Advertenties, embeds en iframes zonder afmetingen.
• Dynamisch geladen content (ingevoegd via client-side JavaScript), zoals advertenties, embeds en iframes zonder afmetingen.
• Aangepaste weblettertypen die flitsen van onstyled tekst (FOUT) veroorzaken door een visueel verschil met het terugvallettertype (systeemfont).
• Taken die wachten op een netwerkrespons voordat ze de DOM bijwerken (asynchrone verzoeken).
• Post-load verschuivingen die onverwacht zijn voor de gebruiker, waarbij er geen kwalificerende interactie heeft plaatsgevonden:

** Scrollen en hoveren komen niet in aanmerking voor de 500 milliseconden tolerantieperiode, omdat CLS tijdens deze perioden als 'onverwachte verschuivingen' wordt beschouwd.*

Layout shifts worden veroorzaakt door de volgende gebeurtenissen:

• Wijzigingen in de positie van een DOM-element
• Wijzigingen in de positie van een element die niet worden veroorzaakt door de beweging van een ander element
• Wijzigingen in de afmetingen van een DOM-element
• Invoeging of verwijdering van een DOM-element
• Animaties die een lay-out triggeren

Tips om je Cumulative Layout Shift (CLS) score en gebruikerservaring te verbeteren #

Enkele tips om CLS te verbeteren:

• Voeg width en height attributen toe aan alle afbeeldingen en video's, of gebruik ten minste één van deze dimensies in combinatie met een CSS aspect-ratio.
• Laad lettertypebestanden voor belangrijke fonts voor als prioritaire assets.
• Zorg dat het juiste terugvallettertype wordt gebruikt.
• Minimaliseer de grootteverschillen tussen het terugvallettertype en het weblettertype met de nieuwe size-adjust, ascent-override, descent-override en line-gap-override API's.
• Laad nooit dynamische content boven al geladen content zonder een gebruikersinteractie. Of zorg er anders voor dat het element buiten de documentstroom valt door de content te overlappen waar dat passend is.
• Gebruik een placeholder of terugvaloptie voor je embeds.
• Reserveer ruimte en toon een laadindicator voor asynchroon geladen resources, ook wanneer de content waarschijnlijk meer dan 500 milliseconden nodig heeft na gebruikersinput.
• Vermijd het plaatsen van laat ladende content bovenaan de viewport.
• Laat de gebruiker de nieuwe content initiëren, zodat ze niet verrast worden door de verschuiving (bijvoorbeeld met een "Laad meer"- of "Vernieuwen"-knop).
• transform-animaties gebruik je voor translate, scale, rotate of skew zonder een re-layout te triggeren, waardoor layout shifts volledig voorkomen worden.
• Verlaag CLS door ervoor te zorgen dat pagina's in aanmerking komen voor de bfcache (back/forward cache).

Wil je dieper in de materie duiken? Lees dan het artikel van Addy Osmani over het optimaliseren van CLS op Web.Dev.

Tools voor het meten van Cumulative Layout Shift (CLS) op je website #

Verschillende tools geven je inzicht in je CLS score. De eerste twee bieden "werkelijke metingen" op basis van echte gebruikers (velddata):

• PageSpeed Insights
• Search Console (Core Web Vitals rapport)

De volgende twee bieden CLS scores berekend op basis van labdata:

• Chrome DevTools
• Lighthouse
• Webpagetest

Conclusie over Cumulative Layout Shifts #

Cumulative Layout Shift verdient zijn plek als een van de drie Core Web Vitals. Naast laadsnelheid en interactiviteit is het minstens zo vervelend wanneer een webpagina visueel instabiel is en afbeeldingen, video's of knoppen door het scherm vliegen.

Wil je visueel instabiele elementen aanpakken? Focus dan op vaste afmetingen voor afbeeldingen en video's, let op de laadvolgorde van dynamisch ingevoegde content, laad lettertypen voor en gebruik placeholders voor embeds. Klinkt dit technisch? We helpen je graag bij het beoordelen en verbeteren van je CLS prestaties.

Op onze benchmark tool vind je een vereenvoudigde versie van Google's beoordelingstool, waarmee je kunt controleren of je slaagt voor Google's Core Web Vitals test.