Cumulative Layout Shift (CLS) oplossen

Iedereen heeft het wel al eens meegemaakt: je zit op een website te surfen en plots verschuift er een deel van de tekst waardoor je de draad kwijt bent. Of erger nog, je wil op een button klikken maar die verschuift, waardoor je per ongeluk op een vervelende advertentie geklikt hebt. Goed nieuws, Google heeft een metric ontwikkeld, de Cumulative Layout Shift, waarmee je dergelijke verschuivingen kan opsporen en oplossen. In dit artikel leggen we uit wat de CLS is en hoe je het kan oplossen.

Wat is de Cumulative Layout Shift?

De Cumulative Layout Shift, kortweg CLS of ook wel Cumulatieve indelingsverschuiving genoemd, geeft aan dat er onverwachte verschuivingen zijn van zichtbare elementen op een webpagina. CLS maakt deel uit van de Core Web Vitals metrics die Google onlangs introduceerde.

Dit is een voorbeeld van de Cumulative Layout Shift.

Om CLS te bepalen gaat Google kijken naar twee zaken: hoe vaak de layout verschuift en hoe groot die verschuivingen daadwerkelijk zijn. Alles boven de 0.25 wordt als slecht beschouwd.

Zoals eerder aangegeven maakt CLS deel uit van de Core Web Vitals metrics die Google onlangs introduceerde. Daaronder vallen ook LCP (Largest Contentful Paint) en FID (First Input Delay). Onderstaand overzicht werd gemaakt door Violet88.

Overzicht van de Google Core Web Vitals, met onder andere LCP, FID en CLS.

Google hecht de laatste jaren veel belang aan gebruiksvriendelijke mobiele websites. Daarom is het extra belangrijk om eerst op de mobiele verschuivingen te letten. Smartphone schermen zijn veel kleiner waardoor mobiele verschuivingen een grotere impact hebben op de user experience. Neem het dus zeker mee in je SEO optimalisatie. Probeer de CLS score zo dicht mogelijk bij 0 te krijgen

Oorzaak en oplossing voor verschuivingen

1. Afbeeldingen zonder afmetingen

Afbeeldingen verschuiven omdat de afmetingen niet gespecificeerd zijn. Voeg daarom altijd de width en height attributen toe aan afbeeldingen of video’s. Hierdoor weet de browser hoeveel ruimte hij moet voorzien voor de afbeelding, terwijl deze aan het laden is.

2. Advertenties

Advertenties zijn vaak de grote oorzaak voor verschuivingen. Hoe hoger de ads staan, des te groter de layout shift wordt. Plaatst daarom je advertenties lager op de pagina zodat er minder content kan verschuiven. Of voorzie, net zoals bij de afbeeldingen, ruimte waar de advertenties moeten komen.

3. Web fonts die traag inladen

Het downloaden en renderen van fonts kan op twee manieren een layout shift veroorzaken:

  • Het fallback-lettertype wordt gewisseld met een nieuw lettertype (FOUT – flash of unstyled text)
  • “Onzichtbare tekst” wordt weergegeven totdat er een nieuw lettertype wordt ingeladen (FOIT – flash of invisible text)

Jammer genoeg kan je een layout shift door fonts nooit helemaal voorkomen. Toch, kun je het beperkten door de fonts zo snel mogelijk in te laden. Dit kan op verschillende manieren:

  • Gebruik <link rel=preload> op de belangrijkste fonts
  • Combineer <link rel=preload> en font-display: optional

4. Dynamische content

Voeg geen dynamische content toe boven bestaande content, enkel en alleen als de content toegevoegd wordt na een bepaalde interactie van de gebruiker.

Waar CLS score meten?

Er bestaan 5 verschillende tools waarmee je de CLS score van een pagina kan achterhalen.

1. Google Search Console

Het nieuwe Site-vitaliteit rapport (Core Web Vitals report) geeft aan hoe je pagina’s presteren op basis van daadwerkelijke gebruiksgegevens. CLS is één van de drie statistieken die weergegeven worden in het rapport (de andere zijn FID en LCP).

In Google Search Console is het mogelijk om de Cumulative Layout Shift te meten (CLS).

2. PageSpeed Insights

Ook via Google PageSpeed Insights wordt de Cumulative Layout Shift per pagina weergegeven. Dit tool geeft onderaan de pagina ook aanbevelingen hoe je de pagina sneller en beter kan laden.

CLS berekenen aan de hand van Google PageSpeed Insights.

3. Google Lighthouse

Lighthouse kreeg onlangs een update (versie 6.0) waardoor heel wat nieuwe metrics werden toegevoegd, waaronder de Cumulatieve Layout Shift.

4. Chrome UX rapport in Data Studio

Het CrUX rapport kan je vrij raadplegen en toepassen op jouw dataset in Google Data Studio.

CLS rapport dat je kan raadplegen en installeren in Google Data Studio.

Creëer je eigen dashboard op g.co/chromeuxdash.

5. Web Vitals Extension

Er is een nieuwe Chrome Extensie beschikbaar in de Chrome Web Store waarmee je de 3 “Core Web Vitals” kan meten op paginaniveau.

Chrome Extensie die je kan gebruiken om de CLS score te meten.

Nog vragen of opmerkingen?

Heb je nog vragen of opmerkingen rond het CLS-probleem? Laat het ons dan zeker weten in de comments.

SEO abonnement op maat

Hulp nodig met zoekwoordenonderzoek, een website audit of andere SEO gerelateerde werkzaamheden? Wij hebben een interessant SEO abonnement waarbij we gaan voor een langdurige en duurzame samenwerking. Iets voor jou?