CLS verbeteren: einde aan verspringende lay-out
Je verbetert CLS door ruimte te reserveren voor alles wat later laadt. Geef afbeeldingen en video's vaste afmetingen, laad webfonts met font-display: swap en een passende fallback, en geef banners, embeds en advertenties een container met een vaste hoogte. Een CLS-score van 0,1 of lager geldt als goed, gemeten op het 75e percentiel van echte bezoeken. Meet eerst welke elementen verschuiven, los de grootste veroorzaker op en controleer het effect daarna in Search Console.
- Een CLS van 0,1 of lager geldt als goed, gemeten op het 75e percentiel.
- Reserveer ruimte voor alles wat later laadt: afbeeldingen, embeds, banners en advertenties.
- Zet altijd width- en height-attributen op afbeeldingen, want thema's slopen ze soms weg.
- Laat cookiemeldingen als overlay zweven in plaats van de content omlaag te duwen.
Een knop die net verspringt op het moment dat iemand wil klikken: dat is precies wat een hoge CLS-score meet. Het kost conversies en drukt je Core Web Vitals. Hieronder vind je de concrete oorzaken en fixes, zodat je lay-out stil blijft staan tijdens het laden.
Eerst meten: waar komen de verschuivingen vandaan?
CLS staat voor Cumulative Layout Shift, een van de drie Core Web Vitals. De score telt alle onverwachte verschuivingen van zichtbare elementen tijdens het laden bij elkaar op. Een score van 0,1 of lager is goed, tussen 0,1 en 0,25 matig en boven 0,25 slecht. Google meet dit op het 75e percentiel van echte bezoeken, apart voor mobiel en desktop.
Meet daarom eerst met echte gebruikersdata en pas daarna in het lab:
- Search Console: het rapport Core Web Vitals toont welke groepen pagina’s slecht scoren op CLS.
- PageSpeed Insights: combineert velddata met een labtest en benoemt de elementen die verschuiven.
- Chrome DevTools: het Performance-paneel markeert elke layout shift, handig om de exacte veroorzaker te vinden.
Let op het verschil tussen lab en praktijk. Op jouw snelle verbinding met gevulde cache verspringt er vaak niets, terwijl bezoekers op een traag mobiel netwerk wel degelijk een springende pagina zien.
Geef afbeeldingen en video's vaste afmetingen
De grootste veroorzaker van layout shifts is media zonder gereserveerde ruimte. De browser weet dan niet hoe hoog een afbeelding wordt en schuift de tekst omlaag zodra het bestand binnenkomt.
Zo los je het op:
- Zet altijd
width– enheight-attributen op je afbeeldingen. WordPress doet dit automatisch voor afbeeldingen in de contentbewerker, maar thema’s en pagebuilders slopen ze soms weer weg. - Gebruik voor responsive media de CSS-eigenschap
aspect-ratio, zodat de browser de hoogte alvast kan berekenen. - Geef iframes en video-embeds zoals YouTube of kaarten een container met een vaste beeldverhouding.
- Reserveer ook ruimte voor sliders en hero-afbeeldingen die via JavaScript laden.
Controleer na elke themawissel of grote update of de attributen nog aanwezig zijn. Eén sjabloonwijziging kan de winst zo weer ongedaan maken.
Laad webfonts zonder verspringende tekst
Webfonts veroorzaken een subtiele maar meetbare shift: de tekst rendert eerst in een fallback-lettertype en springt daarna naar het echte font, dat vaak breder of hoger uitvalt. Hele alinea’s verschuiven dan een paar pixels, en op tekstzware pagina’s telt dat flink op.
De aanpak in volgorde van impact:
- Host je fonts lokaal en preload het belangrijkste bestand met
<link rel="preload">, zodat het er vroeg is. - Gebruik
font-display: swapzodat tekst direct leesbaar is, en kies een fallback-font met vergelijkbare afmetingen. - Beperk het aantal fontvarianten. Elke extra dikte of stijl is een extra bestand dat te laat kan komen.
size-adjust stem je de fallback bovendien exact op het webfont af, waardoor de wissel vrijwel onzichtbaar wordt.Tem banners, embeds en andere late content
Alles wat na de eerste render in de pagina wordt gespoten, duwt bestaande content opzij. Denk aan cookiemeldingen, reviewwidgets, advertenties en breadcrumbs die een plugin pas na het laden boven je content injecteert.
- Laat een cookiemelding als overlay over de pagina zweven in plaats van de content omlaag te duwen.
- Geef advertentie- en widgetcontainers een
min-heightdie past bij het formaat dat erin komt. - Render vaste elementen zoals breadcrumbs en uitgelichte berichten server-side mee, niet achteraf met JavaScript.
- Animeer met
transformin plaats van eigenschappen zoalstopofmargin, want die triggeren telkens een nieuwe lay-outberekening.
Twijfel je welk element de dader is? Laad de pagina met een lege cache op een gesimuleerde trage verbinding en kijk wat er als laatste inschuift.
CLS fixen in WordPress en pagebuilders
Werk je met WordPress, dan zit de oorzaak vaak niet in je eigen code maar in het thema of een plugin. Een paar gerichte checks:
- Thema-opties: veel thema’s laden sliders, popups of aankondigingsbalken via JavaScript. Zet uit wat je niet gebruikt, of reserveer er ruimte voor.
- Pagebuilders: scroll-animaties waarbij secties invliegen of infaden veroorzaken verschuivingen op trage verbindingen. Beperk ze tot elementen onder de vouw.
- Optimalisatieplugins: agressieve instellingen voor CSS-optimalisatie kunnen de pagina eerst ongestileerd tonen en daarna laten verspringen. Test na elke wijziging opnieuw.
- Pluginconflicten: een reviewwidget of chatknop die laat inlaadt, duwt content weg. Kies varianten die hun eigen ruimte reserveren.
Test na elke aanpassing één representatieve pagina per template, dan zie je meteen welke ingreep het verschil maakt.
Veelgemaakte fouten bij het verbeteren van CLS
Deze missers kom ik in de praktijk het vaakst tegen:
- Alleen op labdata sturen. Je lokale test scoort groen, maar echte bezoekers zien iets anders. Fix: geef de velddata in Search Console de doorslag.
- Afbeeldingen alleen met CSS schalen. Zonder width en height in de HTML blijft de browser gokken. Fix: attributen toevoegen en CSS voor de weergave laten zorgen.
- De cookiemelding vergeten. Die verschijnt op elk eerste bezoek en duwt alles omlaag. Fix: als overlay tonen.
- Lazy loading boven de vouw. De hero-afbeelding komt te laat en schuift content weg. Fix: sluit de eerste afbeelding uit van lazy loading.
- Alles tegelijk aanpassen. Je weet dan niet welke ingreep werkte. Fix: los de grootste shift eerst op en meet opnieuw.
Layout shifts opsporen blijft handwerk als je elke pagina los moet testen. ViRank scant je hele WordPress-site op technische problemen zoals CLS, laat zien welke pagina’s het slechtst scoren en zet de verbeteringen met de grootste impact op je omzet bovenaan. Wil je weten waar jouw site nu staat? Doe de gratis SEO-check van ViRank en zie binnen enkele minuten je score, inclusief technische knelpunten. Aanpassingen voert de software pas door als jij akkoord geeft, en elke wijziging is terug te draaien. Proberen kan 14 dagen zonder creditcard.