CLS

Wat betekent CLS?

CLS staat voor Cumulative Layout Shift. Het is een metric waarmee je de visuele stabiliteit van je website meet. Oftewel: je meet ermee of er tijdens het laden geen elementen – zoals tekst, afbeeldingen of knoppen – van positie veranderen. De CLS van je website is een onderdeel van je technische SEO.
Wat is cls

Hoe kan het dat elementen op je website verspringen?

Dat elementen op je website verspringen, kan verschillende oorzaken hebben:

  1. Je afbeeldingen hebben geen vaste afmetingen.
  2. Advertenties en banners worden niet meteen ingeladen.
  3. Je maakt gebruik van een element van een externe bron, die traag laadt.
  4. Dynamische content verschuift zonder duidelijke overgang, zoals een slider of pop-up.
  5. Je site maakt onjuist gebruik van JavaScript.
  6. Content laadt pas nadat de rest van de pagina al geladen is.

Waarom is het negatief als elementen verspringen?

Wanneer de elementen op je website tijdens het laden verspringen, kan dat frustrerend zijn voor bezoekers. Stel je voor: je wilt op een knop klikken, maar net voordat je dat doet, verschuift de knop naar een andere plek. Dit kan ervoor zorgen dat je per ongeluk iets anders aanklikt, waardoor je gefrustreerd raakt. Voor je gebruikers is dit ook zo en je wilt natuurlijk niet dat zij zich gaan ergeren, omdat zo’n gevoel de kans dat ze op je website blijven en iets kopen verkleint.

Ook voor je SEO is het niet gunstig als onderdelen tijdens het laden verspringen. Dit soort verschuivingen worden door Google gemeten met een score die aangeeft hoe stabiel je website is. Hoe meer onderdelen verplaatsen, hoe hoger je CLS-score. Een hogere score kan je positie in Google negatief beïnvloeden, omdat Google de CLS gebruikt als een van de rankingfactoren in diens zoekmachine. Google beschouwt een score van 0.1 of lager als goed en een score van 0.25 of hoger als slecht.

Hoe beïnvloedt de CLS je conversieratio?

Als er op je website veel elementen verschuiven, kan dit invloed hebben op je bezoekers en dus ook op je conversies:

 

Wanneer je een duidelijke, goed-werkende website hebt, is de kans groter dat bezoekers op je site blijven. Dit betekent niet altijd dat zij ook daadwerkelijk converteren, maar als zij je website verlaten, gebeurt dit sowieso niet.
CLS vs conversieratio

Welke tools kun je gebruiken om je CLS te meten en optimaliseren?

Er bestaan verschillende tools waarmee je je Cumulative Layout Shift kunt meten en optimaliseren. Drie tools die onze specialisten hiervoor vaak gebruiken, zijn:

Google PageSpeed Insights

  • Wat het doet: analyseert je website en geeft scores voor verschillende Core Web Vitals, waaronder CLS.
  • Hoe het helpt: geeft een gedetailleerde score voor CLS en biedt concrete suggesties om het te verbeteren.

GTmetrix

  • Wat het doet: test de snelheid en prestaties van je website, inclusief een specifieke analyse van de CLS-score.
  • Hoe het helpt: biedt inzicht in welke elementen op je site layoutverschuivingen veroorzaken en geeft aanbevelingen om ze op te lossen.

Google Search Console

  • Wat het doet: vertelt welke pagina’s CLS-problemen hebben en hoe groot deze problemen zijn.
  • Hoe het helpt: laat je zien welke pagina’s je prioriteit moet geven voor optimalisatie en geeft concrete data over CLS op specifieke pagina’s.

Lighthouse

  • Wat het doet: voert een uitgebreide analyse uit van je website op verschillende gebieden zoals prestaties, toegankelijkheid, SEO en best practices, inclusief een gedetailleerde beoordeling van Core Web Vitals zoals CLS.
  • Hoe het helpt: biedt uitgebreide rapporten met specifieke aanbevelingen om problemen zoals layoutverschuivingen te identificeren en op te lossen, samen met verbeteringen voor andere belangrijke aspecten van je website.

Wat zijn de beste manieren om CLS te voorkomen of oplossen?

Heb jij op je website veel verspringende onderdelen? Onze specialisten weten precies hoe ze dit probleem voor je kunnen oplossen. Hieronder vind je in ieder geval in het kort onze tips:

  1. Zorg ervoor dat je altijd de afmetingen van afbeeldingen en video’s vastlegt in de HTML- of CSS-code van je website.
  2. Als je advertenties op je website hebt, zorg er dan voor dat je een vaste plaats voor ze reserveert, ook als ze nog niet geladen zijn.
  3. Fonts kunnen zorgen voor een zogenaamde ‘flash of unstyled text’ (FOUT) of ‘flash of invisible text’ (FOIT), waarbij de tekst tijdelijk van grootte verandert of onzichtbaar is. Dit kan je voorkomen door het optimaliseren van font-laden met technieken zoals font-display: swap; waarmee een fallback-font wordt gebruikt totdat het webfont is geladen.
  4. Plaats dynamische elementen op een logische en stabiele plek, of zorg ervoor dat ze netjes worden ingeschoven zonder de rest van de pagina te verstoren.
  5. Plaats above the fold (het zichtbare gedeelte van de website voordat de gebruiker scrolt) alleen elementen die direct geladen worden en geen onverwachte verschuiving veroorzaken.
  6. Zorg ervoor dat grote bestanden zoals afbeeldingen of video’s lager op de pagina worden geplaatst of pas inladen wanneer ze nodig zijn (lazy loading).

Meer hulp nodig? Bij Semwerkt weten we precies hoe we de juiste tools inzetten om verschuivingen op je website te detecteren, en hoe we die problemen vervolgens kunnen oplossen. Neem contact met ons op via ons contactformulier, door te bellen naar 0229 – 763 561, of stuur een mail naar info@semwerkt.nl.