Hoe je CLS verbetert en layoutverschuivingen voorkomt

Als tekst tijdens het lezen verspringt, een knop plotseling van plaats verandert of een afbeelding de rest van de pagina naar beneden duwt, heeft je website een probleem met visuele stabiliteit.

Deze onverwachte bewegingen worden gemeten met Cumulative Layout Shift (CLS), een van Google’s Core Web Vitals. Een score van 0,1 of lager is goed; boven 0,25 is de score slecht.

Wat is CLS?

CLS meet onverwachte verplaatsingen van zichtbare elementen tijdens een bezoek. Een advertentie kan bijvoorbeeld boven een link verschijnen net wanneer iemand wil klikken. Ook kan een grote afbeelding de tekst verplaatsen zodra het laden klaar is.

De score wordt berekend op het 75e percentiel van bezoeken, afzonderlijk voor mobiel en desktop. Daarmee meet CLS wat bezoekers echt ervaren, niet alleen hoe snel een bestand wordt gedownload.

Veelvoorkomende oorzaken

De browser kent de uiteindelijke afmetingen van een element vaak nog niet. Veel voorkomende oorzaken zijn afbeeldingen zonder afmetingen, video’s en iframes zonder gereserveerde ruimte, advertenties, widgets van derden, wisselende webfonts, banners die later bovenaan worden ingevoegd en JavaScript-inhoud zonder placeholder.

Afbeeldingen, embeds en advertenties stabiliseren

Geef afbeeldingen altijd width en height, zodat de browser het juiste formaat vooraf kan reserveren:

<img src="voorbeeld.jpg" alt="Voorbeeld" width="1200" height="800">

Met max-width: 100%; height: auto blijft de afbeelding responsive. Gebruik voor video’s, kaarten, formulieren en sociale embeds een container met aspect-ratio: 16 / 9. Reserveer bij advertenties vooraf de verwachte hoogte.

Dynamische inhoud en lettertypen

Cookiebanners, promoties, zoekresultaten, aanbevelingen en API-antwoorden mogen zichtbare inhoud niet achteraf wegduwen. Reserveer de ruimte vooraf of gebruik skeletons en voorspelbare minimumhoogtes.

Een fallback-lettertype kan andere tekenbreedtes hebben dan de webfont. Kies een vergelijkbare fallback, laad fonts zorgvuldig en onderzoek eventueel size-adjust voordat je een eigen font verwijdert.

Animaties en onderzoek

Animaties van top, left, width, height of margin veranderen de layout. Gebruik voor beweging liever CSS-transforms zoals transform: translateX(20px).

Gebruik PageSpeed Insights, Lighthouse en Chrome DevTools. Velddata toont echte apparaten en netwerken; labdata is nuttig om een implementatie te debuggen. Test ook scrollen, menu’s, cookiemeldingen, meer laden en widgets.

Snellere hosting lost CLS niet automatisch op. Zoek eerst het element dat beweegt en verbeter daarna de HTML, CSS, JavaScript, media of externe dienst.

Veelgestelde vragen

Welke CLS-score is goed?

0,1 of lager is goed, 0,1 tot 0,25 moet worden verbeterd en boven 0,25 is slecht.

Veroorzaakt lazy loading CLS?

Niet op zichzelf. Het probleem ontstaat als er geen afmetingen of beeldverhouding zijn om ruimte te reserveren.

Verbetert een betere CLS-score SEO?

Core Web Vitals worden gebruikt door de rankingsystemen van Google, maar CLS is slechts één van veel signalen.

Bouw een stabielere website

De belangrijkste regel: de browser moet zo vroeg mogelijk weten hoeveel ruimte elk element nodig heeft. Reserveer die ruimte, test echte interacties en controleer zowel veld- als labdata.