Wat is Cumulative Layout Shift (CLS)?

Als je bezig bent met het optimaliseren van je Core Web Vitals dan is het optimaliseren van je CLS een belangrijk onderdeel. In dit artikel duiken we dieper in op de ‘Cumulative Layout Shift’ (CLS) en laten we je zien hoe je deze kunt verbeteren.

CLS en Core Web Vitals

Zoals gezegd is CLS een belangrijk onderdeel van de Core Web Vitals van Google. De Core Web Vitals focust zich op het verbeteren van de gebruikerservaring van bezoekers. CLS is hier een belangrijk thema omdat onverwachte lay-out verschuivingen zorgen voor een mindere gebruikerservaring.

Wat meet CLS?

CLS meet de visuele stabiliteit van je website. Onverwachte verschuivingen van de lay-out zorgen voor een lagere CLS. Dit heeft te maken met het wegnemen van een stukje frustratie van de gebruiker/bezoeker en het optimaliseren van de gebruikerservaring. Je hebt vast wel eens een stuk tekst gelezen als vervolgens het scherm en dus de tekst ineens verspringt. Erg vervelend en niet gewenst. Naast dat het vervelend kan zijn kan het in sommige gevallen ook schadelijk zijn.

Uiteindelijk meet CLS het totaal van alle individuele layout verschuivingen op een pagina. Een lay-out verschuiving is in dit geval een element op de pagina dat onverwachts van positie veranderd.

In bovenstaande afbeelding zie je dat een goede CLS score lager is dan 0.1. Hoe groter de verschuiving/verandering van de layout, des te meer impact dit heeft op de score.

Hoe verbeter je je CLS?

De grootste verbetering behaal je door je aan een aantal voorwaarden te houden:

• Maak altijd gebruik van ‘size attributes’ voor je afbeeldingen en video’s. De browser weet dan direct hoe groot de ruimte is voor de afbeelding en video en zorgt er dus voor dat elementen niet gaan verspringen;
• Voeg nooit content toe boven content dat al is ingeladen (behalve na een interactie van de bezoeker/gebruiker);
• Als je animaties gebruikt, zorg er dan voor dat je de animatie niet veranderd, maar de property van de animatie.

De meest voorkomende problemen doen zich voor met afbeeldingen, dynamische content, web-fonts (lettertypes) en advertenties/embeds.

Afbeeldingen

Sinds de meeste website responsive zijn en dus meeschalen met het device waarop je de pagina bekijkt, zorgen afbeeldingen vaak voor onverwachte layout veranderingen tijdens het laden. De pagina wordt eerst ingeladen en daarna kijkt de browser/server welk formaat afbeelding ingeladen wordt met als gevolg dat content verschuift. Het is daarom belangrijk dat je een afbeelding een hoogte (height) en breedte (width) attribuut meegeeft. Zo is direct al duidelijk welke ruimte gereserveerd moet worden voor de afbeelding en krijg je geen onverwachte verschuivingen. Je kunt dit ook afvangen in de CSS, door CSS aspect ratio boxes te gebruiken. De browser reserveert hiermee alvast de hoeveelheid ruimte op de pagina terwijl de afbeelding wordt ingeladen. Twijfel je over de juiste aspect ratio? Op deze website vind je een eenvoudige calculator.

Advertenties, embeds en iFrames

Dit moet één van de meest irritante gebeurtenissen zijn op een webpagina. Je zit een nieuwsartikel of een interessante review te lezen en ineens verschijnt er een advertentie in beeld en je moet weer terug scrollen waar je was gebleven. Mensen haken af of worden op z’n minst geïrriteerd als dit gebeurd. Advertenties zijn dan ook één van de grootste veroorzakers van layout verschuivingen op het internet. Hoe groter de advertentie en hoe meer die in het zicht verschijnt, des te hoger de kans dat je hier op klikt. Begrijpelijk, maar heel gebruiksvriendelijk is het niet.

In de volgende situaties zien we deze ‘ad placement’ veel gebeuren:

• Wanneer een site de advertentie-container in de DOM invoegt
• Wanneer een site het formaat van de advertentie-container wijzigt met first-party code
• Wanneer de advertentietag library wordt geladen (en de grootte van de advertentie-container wordt aangepast)
• Wanneer de advertentie een container vult (en het formaat wijzigt als de uiteindelijke advertentie een ander formaat heeft)

Natuurlijk moet het wel mogelijk blijven om advertenties te blijven tonen. Google zelf is er immers zelf ook groot mee geworden 😁. Als eigenaar van een website die veel advertenties toont kun je de volgende maatregelen nemen:

• Reserveer een vaste plek voor de advertentieruimte.
• Wees voorzichtig bij het plaatsen van sticky-advertenties bovenaan de viewport.
• Als er tijdelijk geen advertentie getoond wordt, zorg dan voor een soort van placeholder. Zorg in ieder geval dat de content/ruimte niet ineens wordt samengevoegd.
• Voorkom verschuivingen door in ieder geval de grootst mogelijke afmetingen te reserveren voor de advertentieruimte.

Web fonts

Misschien wel één van de meest voorkomende CLS-problemen zijn de web fonts die ingeladen worden. Tijdens het laden van de pagina wordt eerst een standaard font getoond en daarna wordt de web font ingeladen. Dit zorgt er vaak voor, omdat het web font anders is, dat de tekst verspringt en dus hebben we te maken met een cumulative layout shift. Wanneer een browser een lettertype van een webserver nodig heeft, wordt elk element dat dat lettertype gebruikt, verborgen totdat het lettertype volledig is gedownload. Je kunt Lighthouse gebruiken om te achterhalen wat precies de oorzaak is van CLS. Als de gebruikte fonts de boosdoener zijn, zijn er een aantal eenvoudige oplossingen om ermee om te gaan. Het beste kun je font:display waardes gebruiken zoals bijvoorbeeld auto, swap, block, fallback en optional. Dit helpt echter niet in 100% van de gevallen. Als je wel deze zekerheid wilt hebben, dan kies je voor font:display in combinatie met link rel=preload.

<link rel="preload href="//fonts.googleapis.com">

Dynamische content

As laatste het ding met dynamische content… Probeer altijd te vermijden dat je nieuwe content boven bestaande content gaat plaatsen. Dit is alleen aan te raden als dit een verwachte reactie is op een gebruikersinteractie.

Denk aan dingen zoals:

• “Schrijf je in voor onze nieuwsbrief!”
• “Gerelateerde inhoud”
• “Installeer onze [iOS / Android] -app”
• “We nemen nog steeds bestellingen op”
• “GDPR balk”

Als je toch zulke dingen in beeld brengt, zorg er dan in ieder geval voor dat je van tevoren voldoende ruimte in de viewport reserveert (bijvoorbeeld door een tijdelijke aanduiding of skeleton UI te gebruiken). Door hier al iets te laten zien zorg je ervoor dat content niet zomaar verschuift.

Oke, we weten nu hoe je Cumulative Layout Shifts (CLS) moet verbeteren of ze (nog beter) kunt voorkomen. Maar hoe weet je nu of je dit aan moet pakken en wat je score op CLS is? Hier zijn een aantal tools voor:

1. Lighthouse

Lighthouse 6.0 en hoger bieden ondersteuning voor het meten van CLS op basis van lab data. Hierin kun je bovendien zien welke elementen voor de meest CLS-verschuivingen zorgen.

2. Chrome Web Vitals extensie

Er is een handige Google Chrome extensie beschikbaar voor Core Web Vitals. Deze laat je scores zijn voor LCP, FID en dus ook CLS:

3. WebPageTest

WebPageTest.org is niet alleen een mooie tool om alles rondom de snelheid van je website te meten, maar het meet nu ook de elementen van Core Web Vitals.

4. Google Search Console

In Google Search Console kun je je ‘site vitaliteit’ bekijken. Hierin zie je de verschillende onderdelen van Core Web Vitals ook terug. Search Console geeft aan of je pagina’s hebt die goed zijn, verbeteringen nodig hebben of echt als slecht beoordeeld worden.

5. PageSpeed Insights

Naast het meten van de site snelheid, kun je in Google Page Speed Insights ook je CLS meten. Dit geldt voor zowel lab data als field data. Field data is de metric die het meest betrouwbaar is omdat deze echte bezoekers van je webpagina meet. De data op basis van lab gegevens zijn gebaseerd op tools zoals je browser die een inschatting maken van wat de users zien.

Optimaliseer je CLS

Het is niet voor niets dat Google meer nadruk legt op gebruikerservaring en in dit geval de Cumulative Layout Shift. Wanneer elementen zomaar verspringen terwijl je dit niet verwacht is dit erg frustrerend voor de bezoekers van je webpagina. Als je een slechte score hebt met je CLS, dan adviseren wij absoluut om dit aan te pakken. Naast het feit dat dit een mogelijk positief effect heeft op je SEO, helpt het vooral je bezoekers aan een prettigere user experience. En dat is uiteindelijk wat je wilt.

Heb je nog meer vragen over CLS of andere onderdelen van de Core Web Vitals? Neem dan gerust contact met ons op.