Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is een Core Web Vitals-metriek die meet hoeveel visuele stabiliteit een webpagina biedt tijdens het laden. De score geeft aan in welke mate elementen zoals tekst, afbeeldingen of knoppen onverwacht verschuiven terwijl een bezoeker de pagina bekijkt. Een lage CLS-score (onder 0,1) betekent dat de pagina stabiel laadt, een hoge score (boven 0,25) wijst op frustrerende verschuivingen die leiden tot verkeerde klikken en een slechtere gebruikerservaring. Voor MKB-bedrijven is CLS relevant omdat Google het sinds 2021 meeneemt in de ranking en omdat verschuivende elementen direct conversies schaden.

Hoe Cumulative Layout Shift ontstaat en wordt berekend

CLS ontstaat wanneer elementen pas laat in het laadproces hun definitieve ruimte innemen. Denk aan een banner die na 2 seconden inlaadt en daardoor de hele tekst naar beneden duwt, of een knop die verschuift net op het moment dat een bezoeker erop wil klikken. De score wordt berekend door de impact fraction (hoeveel van het scherm verschuift) te vermenigvuldigen met de distance fraction (hoe ver het element beweegt). Google meet dit met velddata uit Chrome-gebruikers via de Chrome User Experience Report. Elke verschuiving telt mee, dus meerdere kleine shifts kunnen samen een hoge score opleveren. In de praktijk zien we dat vooral mobiele bezoekers last hebben van layout shifts, omdat schermen kleiner zijn en verschuivingen relatief groter aanvoelen.

Waarom Google Cumulative Layout Shift als rankingfactor gebruikt

Google introduceerde CLS in 2020 als onderdeel van de Core Web Vitals en maakte het in juni 2021 officieel een rankingfactor binnen de Page Experience-update. Het doel: websites dwingen om visuele stabiliteit serieus te nemen, omdat verschuivende pagina's leiden tot frustratie en een slechte gebruikerservaring. Onderzoek van Google toonde aan dat bezoekers tot 25% vaker een pagina verlaten als ze worden verrast door onverwachte verschuivingen. Voor zoekmachines is CLS ook een signaal van technische kwaliteit. Een site die layout shifts niet onder controle heeft, mist vaak ook andere fundamentele optimalisaties. Hoewel CLS niet de zwaarste rankingfactor is, kan het wel het verschil maken in competitieve sectoren waar meerdere partijen inhoudelijk sterk scoren.

Wat Cumulative Layout Shift oplevert voor webshops en zakelijke websites

Bij MKB-klanten merken we vaak dat een hoge CLS-score leidt tot meetbare conversieverlies. Een webshop met verschuivende productfoto's of een 'Toevoegen aan winkelwagen'-knop die springt, verliest direct omzet. Een B2B-dienstverlener met een contactformulier dat verschuift tijdens het invullen, ziet minder leads binnenkomen. Door CLS te verbeteren naar onder de 0,1, zie je vaak een directe stijging in doorklikratio's en formulierinvullingen. Daarnaast helpt een lage CLS-score bij technische SEO: Google beloont stabiele pagina's met een lichte rankingboost, vooral op mobiel. Voor bedrijven die investeren in professioneel webdesign is CLS-optimalisatie een logische vervolgstap na de lancering, omdat het de waarde van je investering direct verhoogt door betere prestaties en hogere conversies.

Cumulative Layout Shift optimaliseren is geen doel op zich, maar een middel om concrete problemen op te lossen. In de praktijk zie je de impact vooral bij webshops, leadgeneratie-sites en content-platforms waar bezoekers snel beslissingen nemen. Hieronder drie situaties waarin CLS-verbetering direct meetbare resultaten oplevert, plus een keuzehulp wanneer je prioriteit wel of niet bij CLS moet liggen.

Webshops met dynamische productpagina's en advertenties

Webshops laden vaak meerdere elementen asynchroon: productfoto's, reviews, aanbevelingen en soms advertenties of pop-ups. Als deze elementen geen vaste ruimte krijgen, verschuiven ze tijdens het laden. Een veelgemaakte fout is dat de 'Toevoegen aan winkelwagen'-knop pas na 1 tot 2 seconden zijn definitieve positie inneemt. Bezoekers klikken dan per ongeluk op een ander element, raken gefrustreerd en verlaten de pagina. Door vaste afmetingen te reserveren voor afbeeldingen, iframes en advertentieblokken los je dit op. In webshop-projecten zien we dat een CLS-verbetering van 0,3 naar 0,08 kan leiden tot 5 tot 10% meer conversies, vooral op mobiel waar de impact van verschuivingen relatief groter is.

Landingspagina's voor Google Ads en sociale media campagnes

Landingspagina's moeten snel en stabiel laden, omdat bezoekers vanuit advertenties hoge verwachtingen hebben. Een verschuivend formulier of call-to-action kost direct geld: je betaalt per klik, maar de bezoeker converteert niet. Veel MKB-bedrijven gebruiken externe scripts voor tracking, chatwidgets of video-embeds die laat inladen en de layout verstoren. Door deze scripts asynchroon te laden met vaste ruimte-reservering, of door ze uit te stellen tot na de eerste interactie, verbeter je de CLS-score. Een B2B-dienstverlener met een leadformulier zag na CLS-optimalisatie het percentage voltooide formulieren stijgen van 18% naar 24%, simpelweg omdat het formulier niet meer verschoof tijdens het typen. Combineer dit met een goede conversie-optimalisatie-aanpak voor maximaal rendement.

Content-websites met advertenties en embedded media

Nieuwssites, blogs en kennisbanken laden vaak advertenties, YouTube-video's of social media-embeds. Als deze elementen geen vaste hoogte krijgen, verschuift de tekst zodra ze inladen. Dit is frustrerend voor lezers die halverwege een alinea hun plek kwijtraken. Google straft dit af met een hogere CLS-score en lagere ranking. De oplossing: reserveer ruimte met CSS aspect-ratio of vaste hoogte-attributen in HTML. Voor advertenties kun je placeholder-blokken gebruiken die de ruimte vasthouden tot de advertentie laadt. Bij een kennisbank-project verlaagden we de CLS van 0,42 naar 0,06 door alle embeds van vaste afmetingen te voorzien en advertenties pas na scroll in te laden. Het resultaat: 12% langere sessieduur en 8% meer organisch verkeer binnen drie maanden.

Wanneer Cumulative Layout Shift prioriteit heeft en wanneer niet

CLS-optimalisatie is zinvol als je al verkeer hebt en conversies wilt verhogen, of als je Core Web Vitals-score in Google Search Console rood of oranje kleurt. Investeer hier niet in als je site nog nauwelijks bezoekers heeft of als andere technische problemen (zoals een trage Largest Contentful Paint) veel ernstiger zijn. Begin altijd met een CLS-meting via PageSpeed Insights of Chrome DevTools. Een score onder 0,1 is goed, tussen 0,1 en 0,25 moet je verbeteren, boven 0,25 is urgent. Let op: CLS meet alleen verschuivingen zonder gebruikersinteractie. Een menu dat opent na een klik telt niet mee, maar een banner die spontaan inschuift wel.