Wat is CLS?

Heb je het weleens meegemaakt? Je bent rustig een artikel aan het lezen op je mobiel, je wilt op een knop klikken en plotseling verspringt de hele tekst naar beneden. Gevolg: je klikt per ongeluk op een advertentie of een verkeerde link. Frustrerend, toch? Dit fenomeen noemen we in vaktermen Cumulative Layout Shift, ofwel CLS. Het is niet alleen vervelend voor je bezoekers, maar het is ook een belangrijke factor voor je vindbaarheid in Google.

Bij Jelmoo Studio zien we dagelijks dat een stabiele website direct bijdraagt aan een hogere conversie. Niemand wacht immers op een website die “danst” tijdens het laden. In dit artikel leggen we je precies uit wat CLS is, hoe je het meet en vooral: hoe je het oplost om je websiteverkeer en gebruiksvriendelijkheid een boost te geven.

Waar staat CLS voor?V

CLS staat voor Cumulative Layout Shift. Vrij vertaald naar het Nederlands betekent dit: de cumulatieve verschuiving van de lay-out. Het is een metriek (meetwaarde) die Google gebruikt om de visuele stabiliteit van een pagina te beoordelen. Het maakt onderdeel uit van de zogenaamde Core Web Vitals, een set van factoren die Google essentieel acht voor een goede gebruikerservaring (User Experience of UX).

Simpel gezegd meet CLS hoe vaak en hoeveel de elementen op je pagina onverwacht verschuiven tijdens het laden. Hoe lager je score, hoe stabieler (en dus beter) je website is. Een goede stabiliteit straalt betrouwbaarheid uit en voorkomt dat bezoekers geïrriteerd afhaken.

Wat is een CLS probleem?

Een CLS probleem ontstaat wanneer zichtbare elementen op je pagina van positie veranderen terwijl de gebruiker er al naar kijkt. Dit gebeurt vaak omdat de browser nog niet precies weet hoe groot een bepaald element (zoals een afbeelding of advertentie) moet zijn voordat het volledig is ingeladen.

Stel je voor dat je een webshop bezoekt om een bestelling af te ronden. Je wilt net op “Afrekenen” klikken, maar op dat moment laadt er bovenin nog traag een actiebanner in. De knop “Afrekenen” schuift naar beneden en jouw vinger landt op de knop “Annuleren”. Dit is een tekstboekvoorbeeld van een CLS probleem.

Veelvoorkomende oorzaken van deze verschuivingen zijn:

• Afbeeldingen zonder dimensies: Als er geen hoogte en breedte in de code staat, reserveert de browser geen ruimte.
• Advertenties of iframes: Dynamische blokken die plotseling in beeld verschijnen en de rest wegduwen.
• Lettertypes (Web Fonts): Tekst die kort onzichtbaar is of van grootte verandert wanneer het definitieve lettertype inlaadt.

Voor een goed webdesign is het cruciaal om deze bewegingen te minimaliseren. Een rustige pagina zorgt ervoor dat bezoekers blijven hangen en sneller overgaan tot actie.

Wat is de standaard CLS?

Google hanteert strikte drempelwaarden voor wat wel en niet acceptabel is. Je CLS-score is een getal dat berekend wordt op basis van hoeveel het scherm beweegt en hoeveel impact die beweging heeft.

De standaarden zijn als volgt:

• Goed (Good): Een score van 0.1 of lager. Dit is het doel. Je pagina voelt stabiel en prettig aan.
• Verbetering nodig (Needs Improvement): Een score tussen 0.1 en 0.25. Gebruikers merken af en toe verschuivingen op, wat de ervaring iets minder soepel maakt.
• Slecht (Poor): Een score hoger dan 0.25. Er is sprake van aanzienlijke instabiliteit. Dit kan je rankings in Google serieus schaden.

Wil je weten hoe jouw site presteert? Je kunt dit eenvoudig checken via tools als Google PageSpeed Insights of via een technische audit.

Wat is een CLS-behandeling?

Wanneer we spreken over een “CLS-behandeling”, bedoelen we eigenlijk het technische proces van optimalisatie om die verschuivingen weg te werken. Het is het ‘genezen’ van je website van instabiliteit. Bij de ontwikkeling van een nieuwe website houden we hier bij Jelmoo Studio al direct rekening mee, maar ook bestaande sites kunnen we behandelen.

Hier zijn de meest effectieve methodes voor zo’n behandeling:

1. Reserveer ruimte voor afbeeldingen en video’s

Zorg dat je in de HTML-code altijd de `width` en `height` attributen meegeeft aan afbeeldingen. Hierdoor weet de browser precies hoeveel ruimte er vrijgehouden moet worden, nog voordat het plaatje geladen is. De lay-out staat dan al vast als een huis.

2. Stabiliseer advertenties en embeds

Heb je een blok voor Google Ads of een interactieve kaart? Zet deze in een ‘container’ met een vaste hoogte. Zo voorkom je dat de content eronder verspringt als de advertentie een fractie later laadt.

3. Optimaliseer het inladen van lettertypes

Niets is zo vervelend als tekst die verspringt omdat het lettertype van stijl verandert (Flash of Unstyled Text). Gebruik `font-display: swap` in je CSS of laad fonts lokaal in (preloaden) om schokkerige overgangen te voorkomen.

Ben je niet zo technisch aangelegd? Geen zorgen. Het technisch optimaliseren van een site is vakwerk. Als je overweegt een professionele website te laten maken, zorgen wij ervoor dat deze basisprincipes standaard goed staan.

Waarom CLS direct invloed heeft op je omzet

Misschien denk je: “Is zo’n klein sprongetje in het scherm nu echt zo erg?” Het antwoord is ja. In de online wereld, waar onze aandachtsspanne kort is, zorgt elke frictie voor afhakers.

• SEO-impact: Sinds de Core Web Vitals update is CLS een officiële rankingfactor. Websites die visueel stabiel zijn, krijgen voorrang in de zoekresultaten.
• Conversie: Een bezoeker die per ongeluk misklikt door een verspringende pagina, raakt gefrustreerd. Frustratie is de grootste vijand van conversie.

Bij Jelmoo Studio geloven we in een no-nonsense aanpak: een site moet gewoon werken. Snel, stabiel en duidelijk.

Veelgestelde vragen over Wat is CLS

Wat zijn Core Web Vitals precies?

Core Web Vitals zijn drie specifieke meetwaarden die Google gebruikt om de ‘gezondheid’ van je pagina-ervaring te meten. Naast CLS (visuele stabiliteit) bestaat dit uit LCP (laadsnelheid van het grootste element) en INP (interactiviteit/reactiesnelheid). Samen bepalen ze voor een groot deel hoe Google je site beoordeelt op techniek.

Kan ik mijn CLS-score zelf verbeteren?

Dat hangt van je technische kennis af. Simpele dingen, zoals het toevoegen van formaten aan afbeeldingen, kun je vaak zelf in je CMS doen. Voor complexere zaken zoals het optimaliseren van lettertypes, CSS of server-side instellingen is vaak een webdeveloper nodig. Wij kijken graag met je mee tijdens een vrijblijvend adviesgesprek.

Geldt CLS alleen voor mobiele telefoons?

Nee, CLS wordt gemeten voor zowel desktop als mobiel. Echter, omdat de meeste verschuivingen storender zijn op kleine schermen (en Google oordeelt via ‘Mobile First’), is de mobiele ervaring vaak doorslaggevend voor je SEO-prestaties.

Heb je het idee dat jouw website last heeft van instabiliteit of wil je simpelweg beter gevonden worden? Laten we kletsen. Wij helpen je graag aan een site die niet alleen mooi is, maar ook technisch staat als een huis.