CLS verbeteren: einde aan verspringende lay-out

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- en height-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:

1. Host je fonts lokaal en preload het belangrijkste bestand met <link rel="preload">, zodat het er vroeg is.
2. Gebruik font-display: swap zodat tekst direct leesbaar is, en kies een fallback-font met vergelijkbare afmetingen.
3. Beperk het aantal fontvarianten. Elke extra dikte of stijl is een extra bestand dat te laat kan komen.

Met de CSS-eigenschap 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-height die past bij het formaat dat erin komt.
• Render vaste elementen zoals breadcrumbs en uitgelichte berichten server-side mee, niet achteraf met JavaScript.
• Animeer met transform in plaats van eigenschappen zoals top of margin, 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.

Wat ViRank hierbij doet

Layout shifts opsporen blijft grotendeels handwerk, maar een meting laat je zien of er werk ligt. ViRank meet in het onderdeel Techniek onder meer de Core Web Vitals van je homepage, waaronder CLS, en zet de gevonden technische punten op volgorde van impact. Wil je weten waar jouw site nu staat? Start de gratis proefperiode van ViRank en zie na de eerste analyse je score, inclusief technische knelpunten. CLS zelf los je op in je thema, plugins of code; wat ViRank wel zelf kan oplossen, zoals ontbrekende meta descriptions of SEO-titels, voert de software standaard pas door als jij akkoord geeft, en elke wijziging is terug te draaien. Proberen kan 14 dagen zonder creditcard.

Veelgestelde vragen