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.
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.
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).
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.
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.
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.
Nog vragen of opmerkingen?
Heb je nog vragen of opmerkingen rond het CLS-probleem? Laat het ons dan zeker weten in de comments.