CLS en Google SEO: verbeter je vindbaarheid met een stabiele website

CLS en Google SEO: voorkom onverwachte verschuivingen op je website

Een pagina die plotseling verspringt terwijl je deze leest, zorgt voor een frustrerende ervaring. Misschien verschuift een knop net voordat je erop klikt, of springt een alinea omlaag wanneer een afbeelding verschijnt. Google meet dit soort onverwachte bewegingen met de Cumulative Layout Shift (CLS)-score. CLS is onderdeel van de Core Web Vitals en speelt daarmee een rol in de technische kwaliteit en gebruikservaring van een website.

Wat is CLS?

CLS staat voor Cumulative Layout Shift. De metric brengt in kaart hoeveel zichtbare elementen op een webpagina onverwacht verschuiven tijdens het laden of gebruik van de pagina. Het gaat bijvoorbeeld om tekst, afbeeldingen, knoppen en banners die van positie veranderen zonder dat de bezoeker daar zelf om vraagt.

Niet iedere beweging telt mee. Een verschuiving die ontstaat doordat een bezoeker zelf een menu opent of op een knop klikt, is meestal geen onverwachte layout shift. CLS richt zich vooral op verschuivingen die de gebruiker niet verwacht en die de interactie kunnen verstoren.

Welke CLS-score is goed?

Google hanteert de volgende richtlijnen:

• Goed: een CLS-score van 0,1 of lager
• Voor verbetering vatbaar: hoger dan 0,1 en maximaal 0,25
• Slecht: hoger dan 0,25

Voor een goede gebruikerservaring is het verstandig om op pagina’s een score van 0,1 of lager na te streven. De CLS-score wordt niet uitgedrukt in seconden, maar is een berekende waarde op basis van de omvang en afstand van onverwachte verschuivingen.

Waarom is CLS belangrijk voor SEO?

CLS maakt deel uit van de Core Web Vitals, een verzameling statistieken waarmee Google aspecten van de gebruikerservaring beoordeelt. De Core Web Vitals zijn één van de factoren die kunnen meewegen bij de beoordeling van pagina’s in Google Search. Een goede CLS-score garandeert dus geen hoge positie, maar een slechte score kan wijzen op problemen die bezoekers hinderen.

Een stabiele pagina is bovendien prettig voor bezoekers. Mensen kunnen makkelijker lezen, navigeren en klikken wanneer onderdelen op hun plek blijven. Dat kan bijdragen aan een positievere ervaring met je website, los van de directe invloed op zoekresultaten.

Veelvoorkomende oorzaken van een hoge CLS

• Afbeeldingen zonder vaste afmetingen: de browser weet niet hoeveel ruimte een afbeelding nodig heeft voordat deze is geladen.
• Advertenties en ingesloten content: advertenties, video’s of widgets kunnen later verschijnen en bestaande inhoud wegduwen.
• Dynamisch ingevoegde elementen: bijvoorbeeld een banner, pop-up of melding die bovenaan de pagina wordt toegevoegd.
• Webfonts: wanneer een aangepast lettertype wordt geladen, kan de tekst opnieuw worden weergegeven met andere afmetingen.
• Content die boven bestaande inhoud verschijnt: nieuwe onderdelen kunnen tekst of andere elementen naar beneden verplaatsen.

Zo verbeter je de CLS-score

Reserveer ruimte voor afbeeldingen en video’s

Geef afbeeldingen en video’s vaste breedte- en hoogtewaarden, of gebruik een passende CSS-verhouding. Zo kan de browser de benodigde ruimte reserveren voordat het bestand geladen is. De content hoeft dan niet achteraf te verspringen.

Reserveer ruimte voor advertenties en embeds

Gebruik een vaste afmeting of minimale hoogte voor advertentieblokken, video’s en andere ingesloten onderdelen. Wanneer een advertentie niet verschijnt, kan een gereserveerde plek wel leeg blijven, maar de rest van de pagina blijft stabiel.

Voeg nieuwe content niet onverwacht bovenaan toe

Laat meldingen of banners bij voorkeur niet boven bestaande inhoud verschijnen nadat de pagina is geladen. Plaats ze op een vaste plek of zorg dat er vooraf ruimte voor is gereserveerd.

Optimaliseer het laden van webfonts

Een webfont kan ervoor zorgen dat tekst van breedte of hoogte verandert. Kies waar mogelijk een fallback-lettertype dat qua afmetingen lijkt op het uiteindelijke font en test de laadinstellingen. Zo beperk je zichtbare verschuivingen wanneer het webfont beschikbaar komt.

Test pop-ups en dynamische onderdelen

Controleer of cookiebanners, chatvensters, aanbevelingen en andere dynamische onderdelen de bestaande pagina-inhoud verplaatsen. Gebruik waar mogelijk overlays die over de inhoud verschijnen, in plaats van elementen die de hele pagina opnieuw indelen.

Hoe meet je CLS?

Je kunt CLS controleren met verschillende tools van Google en andere aanbieders:

• PageSpeed Insights: toont labgegevens en, wanneer beschikbaar, praktijkgegevens van echte gebruikers.
• Google Search Console: bevat rapporten voor Core Web Vitals op basis van praktijkgegevens.
• Chrome DevTools: helpt ontwikkelaars om verschuivingen tijdens het testen op te sporen.
• Lighthouse: voert een test uit in een gecontroleerde omgeving en geeft aanwijzingen voor verbeteringen.

Test niet alleen de homepage. CLS kan per template of pagina verschillen, bijvoorbeeld tussen productpagina’s, blogartikelen en landingspagina’s. Controleer daarnaast zowel mobiele als desktopversies. Praktijkgegevens kunnen afwijken van een eenmalige test, omdat apparaten, netwerken en gebruikersgedrag verschillen.

Conclusie

CLS meet onverwachte verschuivingen van elementen op een webpagina. Een lage score helpt om pagina’s stabieler en prettiger in gebruik te maken en ondersteunt een goede technische basis voor SEO. Reserveer ruimte voor afbeeldingen, advertenties en dynamische content, en controleer regelmatig hoe pagina’s zich gedragen op verschillende apparaten. Zo voorkom je dat bezoekers moeten zoeken naar onderdelen die tijdens het laden van hun plek zijn veranderd.

 

5 Essentiële Tips voor het Verbeteren van je CLS in Google SEO

1. Reserveer vaste ruimte voor afbeeldingen en video’s.
2. Voeg advertenties niet onverwacht boven bestaande content in.
3. Gebruik geen lettertypen die grote verschuivingen veroorzaken.
4. Controleer CLS regelmatig in Google Search Console.
5. Test pagina’s met PageSpeed Insights en verbeter de grootste verschuivingen.

Reserveer vaste ruimte voor afbeeldingen en video’s.

Reserveer vaste ruimte voor afbeeldingen en video’s, zodat de inhoud niet verspringt wanneer deze bestanden worden geladen. Geef media bijvoorbeeld vaste breedte- en hoogtewaarden of stel met CSS de juiste beeldverhouding in. De browser kan dan vooraf ruimte vrijhouden, wat onverwachte layoutverschuivingen vermindert en helpt je CLS-score te verbeteren. Dat zorgt voor een stabielere pagina-ervaring voor bezoekers en ondersteunt de technische kwaliteit van je website voor SEO.

Voeg advertenties niet onverwacht boven bestaande content in.

Voeg advertenties niet onverwacht boven bestaande content in. Als een advertentie pas verschijnt nadat de pagina is geladen, kan die tekst, afbeeldingen of knoppen naar beneden duwen en zo de CLS-score verslechteren. Reserveer daarom vooraf voldoende ruimte voor advertentieblokken, bijvoorbeeld met een vaste afmeting of minimale hoogte. Zo blijft de pagina stabiel en kunnen bezoekers prettig lezen en klikken.

Gebruik geen lettertypen die grote verschuivingen veroorzaken.

Gebruik lettertypen die qua afmetingen goed aansluiten op het standaard- of fallback-lettertype. Wanneer een webfont later wordt geladen en tekst daardoor breder of hoger wordt, kan de pagina onverwacht verspringen en de CLS-score verslechteren. Test verschillende lettertypecombinaties en stel waar mogelijk een vergelijkbaar fallback-lettertype in, zodat de tekst tijdens het laden zo min mogelijk verschuift.

Controleer CLS regelmatig in Google Search Console.

Controleer de CLS regelmatig in Google Search Console via het rapport voor Core Web Vitals. Daar zie je welke URL’s op mobiel of desktop goed presteren en welke pagina’s onverwachte verschuivingen vertonen. Bekijk de gemelde URL’s, zoek naar terugkerende oorzaken, zoals afbeeldingen zonder vaste afmetingen of laat geladen banners, en controleer na aanpassingen of de prestaties verbeteren. Zo houd je de gebruikservaring in de gaten en kun je CLS-problemen tijdig aanpakken.

Test pagina’s met PageSpeed Insights en verbeter de grootste verschuivingen.

Test je pagina’s regelmatig met PageSpeed Insights om te ontdekken welke onderdelen onverwacht verspringen en je CLS-score beïnvloeden. Bekijk de aanbevelingen en pak eerst de grootste verschuivingen aan, zoals afbeeldingen zonder vaste afmetingen, advertenties die ruimte innemen nadat de pagina is geladen of banners die content verplaatsen. Test daarna opnieuw om te controleren of de aanpassingen de pagina stabieler maken op zowel mobiel als desktop.