Google Core Web vitals Searchresult

CLS optimaliseren – Web Vitals

We zijn alweer aangekomen bij het derde artikel in de Web Vitals reeks. In deze blog nemen we je mee in het optimalisatieproces van de derde en laatste Web Vital: CLS.

Wat is CLS? 

CLS staat voor Cumulative Layout Shift. Dit is een metric die visuele stabiliteit meet. Een layout shift vindt plaats als een zichtbaar element op de pagina onverwachts verschuift. 

Je hebt het vast wel eens meegemaakt: je opent een website op je mobiele telefoon en begint met het lezen van een artikel. Je wilt een button of een link aanklikken en ineens verspringt de hele pagina en ben je kwijt waar je was. Dat is een layout shift. 

Layout shifts vinden vaak plaats omdat pagina’s niet in een keer geheel worden geladen. De verschillende elementen van de pagina worden na elkaar ingeladen. Soms is de tekst bijvoorbeeld al zichtbaar, terwijl er nog afbeeldingen of advertenties worden geladen. Wanneer de afbeeldingen of advertenties zichtbaar worden, kan dit ervoor zorgen dat de tekst verspringt. Zo’n verspringing is nadelig voor de gebruiksvriendelijkheid. Daarom wil Google dat website eigenaren layout shifts zoveel mogelijk voorkomen.

De CLS score is het totaal van alle onverwachte layout shifts die plaatsvinden tijdens het laden van een volledige pagina. Om een score “goed” te ontvangen voor de Web Vital CLS dient je website een CLS score van minder dan 0.1 te hebben. Die 0,1 is een technische berekening van Google die we voor dit artikel achterwege laten.

 

CLS weergegeven door de rode vlakken in de tijdlijn van webpagetest.org die de laadtijd weergeeft. 

Jouw CLS score bepalen? 

Er zijn verschillende tools waarmee je de score van jouw pagina op de Web Vitals kunt achterhalen. Handige tools zijn bijvoorbeeld PageSpeed Insights van Google, Webpagetest en Chrome Dev Tools in de chrome browser. Bij de eerste twee tools vul je de URL van je website in en krijg je de score te zien op de verschillende Web Vitals. Chrome Dev Tools open je door naar de pagina in je browser te gaan die je wilt checken. Vervolgens klik je met de rechtermuisknop op inspecteren, kies je het tabblad performance en klik je op de reload button om de page load te bekijken. 

Op onderstaande afbeelding zie je bijvoorbeeld dat de pagina die wij getest hebben in Pagespeed Insights een CLS score heeft van 0.28. Deze pagina scoort “slecht” op CLS en dit moet verbeterd worden.

Bron afbeelding: Pagespeed Insights

In het performance panel van Chrome Dev Tools kun je ook zien wanneer de layout shifts plaatsvinden:

De CLS score verbeteren

Wat kun je doen om je CLS score te verbeteren als deze hoger dan 0.1 is? Onderstaande punten zorgen vaak voor een slechte CLS score:

  • Advertenties zonder dimensies
  • Afbeeldingen en video’s zonder dimensies
  • Embeds en dynamische content (zoals youtube video’s) 
  • Web Fonts

Advertenties zonder dimensies

Websites die advertenties tonen hebben vaak last van layout shifts. Advertenties worden later ingeladen en dit zorgt ervoor dat de tekst op de pagina naar beneden verschuift. 

Er zijn een aantal dingen die je kunt doen om dit te voorkomen: 

  • Reserveer bij het laden van de pagina direct ruimte voor de advertentie. Als er bijvoorbeeld tussen twee alinea’s tekst een advertentie komt, wordt er direct een stuk van de pagina ter grootte van de advertentie gereserveerd en wordt de tekst erboven en eronder ingeladen. Op het moment dat de advertentie geladen is, wordt enkel het lege vlak dat gereserveerd was gevuld met een advertentie en verspringt de pagina niet meer.  Een dergelijke placeholder wordt ook wel een ‘skeleton loader’ genoemd. 
  • Is er ruimte voor een ad gereserveerd, maar wordt deze niet gevuld? Voorkom dan dat de pagina verspringt door een placeholder te tonen. Advertentie netwerken gebruiken vaak advertenties met dynamische formaten. Afhankelijk van de ad die getoond wordt, neemt hij meer of minder ruimte in. Reserveer om verspringen van de pagina te voorkomen een ruimte ter grootte van het maximale formaat. Of bepaal aan de hand van historische data het meest voorkomende advertentie formaat en reserveer ruimte ter grootte van dat formaat.

Afbeeldingen en video’s zonder dimensies

Afbeeldingen en video’s zonder dimensies zijn ook een veelvoorkomende oorzaak van layout shifts. Als er geen dimensies worden opgegeven bij een afbeelding of video embed weet de browser niet hoeveel ruimte hij voor de afbeeldingen of video’s moet reserveren. Het resultaat is dat de pagina verspringt als de afbeelding of video wordt geladen.

Dit is heel makkelijk te voorkomen door alle afbeeldingen en video’s, dimensies mee te geven met de attributen “width” en “height”.

Embeds en dynamische content

Ook embeds en dynamische content kunnen ervoor zorgen dat de layout van de pagina verspringt. Hierbij moet je denken aan widgets die je kunt embedden in een pagina op je website. Denk bijvoorbeeld aan een Google Maps element op je contactpagina, een video die je embed vanuit Youtube of een overzicht van je laatste Instagram posts vanuit Instagram. 

Bij dynamische content kun je denken aan een inschrijf optie voor de nieuwsbrief die ineens verschijnt of melding die in beeld komt. 

Ook bij embeds en dynamische content kun je het verspringen van de layout voorkomen door een placeholder te gebruiken. Door het element te inspecteren kun je achterhalen wat de grootte van de embed is. Vervolgens kun je een placeholder instellen ter grootte van het element, zodat er ruimte wordt gereserveerd voor het element in de layout.

Fonts

Tenslotte kunnen ook fonts zorgen voor het verspringen van de content. Je hebt het waarschijnlijk wel eens gezien: op een website wordt eerst een tijdelijk font getoond en daarna verspringt het font naar het uiteindelijke font van de website. Meestal gebeurt dit heel snel, in een flits, maar het zorgt wel voor een verspringing van het beeld.

Het kan ook zijn dat het font eerst niet zichtbaar is en dan ineens zichtbaar wordt, waardoor de tekst verspringt. De makkelijkste manier om dit te voorkomen, is om fonts te preloaden met de head tag <link rel=preload>. Hierdoor worden de fonts als eerste ingeladen. Dit kan ervoor zorgen dat het font direct zichtbaar is en dan zal er ook geen layout shift plaatsvinden. Het preloaden van de fonts heeft ook als voordeel dat de fonts weinig invloed hebben op de laadtijd van de pagina. Bij veel websites zal dit voor een snellere laadtijd zorgen. 

De functie font-display kan ervoor zorgen dat het font direct zichtbaar wordt en niet eerst onzichtbaar wordt getoond. Dit kan ook helpen bij het voorkomen van een layout shift.

Conclusie

Bovenstaande onderwerpen zijn de meest voorkomende oorzaken van een layout shift. Wanneer je je pagina test in Pagespeed Insights en je hebt geen goede score op CLS, dan laat de tool ook zien door welke elementen de layout shift veroorzaakt wordt. Deze informatie maakt het makkelijker om voor jouw pagina te bepalen welke aanpassingen je moet maken.

Hulp nodig bij het optimaliseren van jouw website voor de Web Vitals? Neem gerust contact met ons op!

Meer lezen van Searchresult? Schrijf je in voor de nieuwsbrief!

 

Lees ook: 

 

 

Gebruikte bronnen: https://web.dev/optimize-cls/

Karlijn
Karlijn Wever

SEO Specialist

karlijn@searchresult.nl