Je pagina springt alle kanten op: zo los je CLS op

Cumulative Layout Shift, kortweg CLS, meet hoeveel je pagina verschuift tijdens het laden. Je kent het wel: je wilt op een knop tikken, er laadt net een afbeelding in, en je tikt op iets anders. Dat is layout shift.

In het kud-rapport Je pagina springt alle kanten op

Waarom het uitmaakt

Verspringende pagina's zijn irritant en zorgen voor verkeerde klikken, soms op precies de verkeerde knop. Het voelt slordig en kost vertrouwen.

CLS is een van de Core Web Vitals. Een score onder 0,1 is goed, boven 0,25 is slecht.

Zo los je het op

Geef elke afbeelding en video een width en height. De browser reserveert dan meteen de juiste ruimte, ook als het bestand nog laadt.
Reserveer ruimte voor advertenties, embeds en cookiebanners, bijvoorbeeld met een vaste minimale hoogte.
Voeg geen inhoud bovenaan de pagina toe nadat hij geladen is, zoals een balk die later inschuift. Zet zoiets onderaan of over de pagina heen.
Zorg dat je lettertypes niet te veel verspringen als ze inladen. Een fallback-lettertype met vergelijkbare afmetingen helpt.

<img src="/img/team.webp" width="800" height="600" alt="Ons team">

/* en in je CSS, zodat hij toch meeschaalt */
img { max-width: 100%; height: auto; }

Op jouw platform

WordPress: WordPress zet width en height meestal zelf op afbeeldingen uit de mediabibliotheek. Problemen zitten vaak in sliders, paginabouwers en advertentieplugins.
Shopify: Let op apps die balken of pop-ups bovenaan toevoegen; die zijn een bekende bron van verspringen.

Veelgestelde vragen

Wat is een goede CLS-score?

Onder de 0,1. Het getal zegt hoeveel van het scherm verschuift en hoe ver; 0 betekent dat er niks verspringt.

Maakt height: auto de width en height niet zinloos?

Nee. De browser gebruikt width en height om de verhouding te berekenen en reserveert zo alvast de juiste ruimte, terwijl de afbeelding toch meeschaalt.