Cumulative Layout Shift (CLS) meet hoeveel content onverwacht verspringt tijdens het laden van een pagina. Een hoge CLS ontstaat meestal door afbeeldingen zonder vaste afmetingen, laat ladende lettertypen, dynamisch ingeladen advertenties of banners, en scripts die content boven in de pagina duwen. Door afmetingen vooraf te reserveren, fonts slim te laden en dynamische elementen te beheersen, breng je CLS structureel omlaag en voorkom je frustrerende klikken op het verkeerde element.
Wat is CLS en waarom is het belangrijk
CLS is een van de Core Web Vitals waarmee Google de gebruikerservaring van een website beoordeelt. Het geeft aan hoe stabiel de visuele weergave van een pagina is terwijl deze laadt. Verspringt een knop net op het moment dat een bezoeker erop wil klikken, dan telt dat mee als een negatieve ervaring. Naast de invloed op zoekresultaten zorgt een lage CLS vooral voor een prettigere, betrouwbaardere website waar bezoekers niet per ongeluk op de verkeerde link klikken.
Veelvoorkomende oorzaken van layout shifts
De meest voorkomende oorzaken van een hoge CLS zijn goed te herkennen:
- Afbeeldingen en video’s zonder width- en height-attributen, waardoor de browser pas na het laden ruimte reserveert.
- Webfonts die zichtbaar inwisselen met een systeemfont (flash of invisible text), waardoor tekstregels van breedte veranderen.
- Advertenties, banners of embeds die zonder gereserveerde ruimte worden ingeladen.
- Content die via JavaScript boven bestaande content wordt ingevoegd, zoals cookiemeldingen of meldingen.
- Animaties die andere elementen verplaatsen in plaats van alleen transform te gebruiken.
Stap voor stap CLS verbeteren
Geef afbeeldingen en video’s vaste afmetingen
Voeg altijd width- en height-attributen toe aan afbeeldingen en video’s, of gebruik CSS aspect-ratio. Zo reserveert de browser direct de juiste ruimte, ook voordat het bestand geladen is.
Laad lettertypen slim in
Gebruik font-display: swap of optional in je CSS en overweeg om kritieke fonts lokaal te hosten in plaats van via een extern lettertype-netwerk. Dit voorkomt grote verspringingen bij het wisselen van font.
Reserveer ruimte voor advertenties en embeds
Geef containers voor advertenties, iframes en embeds een vaste minimumhoogte in CSS, zodat ze geen andere content wegduwen zodra ze laden.
Plaats dynamische content bewust
Toon meldingen, pop-ups of cookiebanners bij voorkeur als overlay in plaats van ze bovenaan de pagina in te voegen. Zo duwen ze bestaande content niet naar beneden.
Gebruik transform voor animaties
Animeer elementen met CSS transform en opacity in plaats van eigenschappen als top, left of margin, zodat de lay-out van andere elementen niet verandert.
CLS meten en controleren
Controleer regelmatig of je verbeteringen effect hebben. Browsertools met prestatiemetingen laten per pagina zien welke elementen verantwoordelijk zijn voor layout shifts, zodat je gericht kunt bijsturen. Let op dat ook caching en serverprestaties invloed hebben op hoe snel content laadt: een trage server vergroot de kans dat afbeeldingen of fonts later binnenkomen en alsnog verspringing veroorzaken. Bij Tandata draait webhosting op NVMe-opslag met LiteSpeed-servers, wat zorgt voor snelle responstijden; via Plesk vind je bovendien eenvoudig instellingen voor caching en SSL die bijdragen aan een stabielere laadervaring. Meer achtergrond over serverinstellingen en optimalisatie vind je in de kennisbank.
Veelgestelde vragen
Wat is een goede CLS-score?
Een lage score, dicht bij nul, betekent dat je pagina nauwelijks verspringt tijdens het laden. Streef naar zo min mogelijk onverwachte verschuivingen in de eerste seconden na het laden.
Veroorzaakt een cookiebanner altijd CLS?
Alleen als de banner bestaande content naar beneden duwt. Toon je de banner als overlay bovenop de pagina, dan heeft deze geen invloed op de lay-out van de rest van de content.
Helpt een snellere server tegen CLS?
Ja, indirect. Een snellere server zorgt dat afbeeldingen, fonts en scripts sneller binnenkomen, waardoor de kans kleiner wordt dat content later alsnog verschuift.
Moet ik CLS fixen voor elke pagina apart?
De meeste oorzaken, zoals ontbrekende afmetingen bij afbeeldingen of verkeerd geladen fonts, komen vaak sitebreed voor. Fix je ze in een thema of sjabloon, dan verbeter je meteen meerdere pagina’s tegelijk.
Conclusie
CLS verbeter je door afbeeldingen en video’s vaste afmetingen te geven, lettertypen slim te laden, ruimte te reserveren voor dynamische content en animaties met transform uit te voeren. Combineer deze aanpassingen met een snelle, betrouwbare hostingomgeving voor het beste resultaat.