Terug naar begrippenlijst
Cumulative Layout Shift (CLS)
Met Cumulative Layout Shift (kortweg CLS) meet je hoe stabiel je website is tijdens het laden. Het geeft aan hoeveel elementen onverwacht van plaats veranderen terwijl de pagina nog bezig is met opbouwen. Je kent het wel: je wil op een knop klikken, maar die springt ineens een stukje omlaag omdat er net een afbeelding inlaadt. Frustrerend? Jazeker. En dat vindt Google ook.
Inhoudsopgave
Waarom alles op z’n plek moet blijven
CLS is onderdeel van de Core Web Vitals: een set van kwaliteitsmetingen waarmee Google bepaalt of een website prettig werkt. Spoiler: een lage CLS-score is beter. Hoe minder verschuiving, hoe fijner de ervaring en hoe beter je site scoort in de zoekresultaten.
Een verspringende website voelt rommelig en onbetrouwbaar. Het stoort je bezoekers, verlaagt de kans op conversie en kan zelfs tot verkeerde kliks leiden. Denk aan een gebruiker die op “Afrekenen” wil klikken, maar per ongeluk op “Annuleren” drukt omdat de knop opschoof.
Google heeft dit feilloos door. Daarom telt CLS mee in de ranking van je website. Niet als allesbepalende factor, maar wel als signaal: een site die rustig en stabiel laadt, wordt beloond.
Hoe ontstaat CLS?
CLS ontstaat meestal doordat elementen op je pagina onverwachts verschijnen of verschuiven terwijl de site nog aan het laden is. Dat kan verschillende oorzaken hebben en dit zijn de meest voorkomende boosdoeners:
- Afbeeldingen of video’s zonder vaste afmetingen
- Webfonts die langzaam inladen en tekstverspringing veroorzaken
- Advertentieblokken die plotseling in beeld schuiven
- Dynamische content die achteraf wordt ingeladen zonder ruimte te reserveren
Het komt erop neer dat je pagina bij het laden elementen toevoegt zonder dat de browser weet waar ze naartoe moeten. Het gevolg is dat content ineens opschuift zodra iets ‘zwaarders’ geladen wordt.
Begin klein, maar wel slim
Een goede CLS-score begint met duidelijke afspraken in je code. Geef je content vanaf het begin een vaste plek en voorkom verrassingen voor de gebruiker. Hier zijn een paar slimme acties waarmee je direct verbetering boekt:
- Geef afbeeldingen en video’s een vaste hoogte en breedte in je HTML of CSS
- Reserveer ruimte voor banners en advertenties (ook als ze pas later laden)
- Gebruik fonts die niet te veel layoutverschuiving veroorzaken, of laad ze ‘slim’ in
- Test je pagina’s met tools zoals Google PageSpeed Insights of Lighthouse
- Check of content ‘onder water’ niet pas later binnenvalt en elementen opzij duwt
Met een paar technische ingrepen zorg je ervoor dat je site kalm blijft – en dat loont.
Veelgestelde vragen
Een score onder de 0.1 wordt als goed beschouwd. Alles daarboven betekent dat er werk aan de winkel is.
Gebruik tools zoals Google PageSpeed Insights, Lighthouse of de Core Web Vitals-extensie in Chrome. Ze laten precies zien waar de verschuivingen plaatsvinden.
Nee, CLS wordt gemeten op alle apparaten, zowel mobiel als desktop. Maar op mobiel merk je het vaak sterker, omdat schermen kleiner zijn.
Ja, sinds Google de Core Web Vitals heeft opgenomen in hun algoritme is CLS een rankingfactor geworden.
Stan Classens Front-end developer
Gerelateerde begrippen
- 301 redirect
- 302 redirect
- Above the Fold
- Abstraction
- Access Control
- Accessible Rich Internet Applications (ARIA )
- Alt tag
- Anchor tekst
- Animatie
- API
- Array
- Back-end
- Binary Tree
- Bootstrap
- Bug
- Caching
- CAPTCHA
- Card layout
- Codebase
- Content Management Systeem
- Create, Read, Update & Delete (CRUD)
- CSS
- CSS Grid Layout
- Database Management System (DBMS)
