Je opent een website, wilt op een knop klikken, en op het laatste moment schuift alles op omdat er een advertentie of afbeelding boven laadt. Nu heb je per ongeluk op iets anders geklikt. Frustratie. Dat probleem meet Google met CLS: Cumulative Layout Shift.
Wat zijn goede CLS-waardes?
- Onder 0,1: goed. De pagina blijft stabiel tijdens het laden.
- 0,1 tot 0,25: matig. Bezoekers merken 't.
- Boven 0,25: slecht. Ergerlijk en Google straft je rankings.
Wat veroorzaakt hoge CLS?
- Afbeeldingen zonder afmetingen: als je HTML niet vertelt hoe groot een afbeelding wordt, laat de browser een leeg gat en vult het pas als de afbeelding is geladen. Alles daaronder springt dan naar beneden.
- Advertenties die pas later laden: populair bij nieuwssites, vaak de grootste boosdoener.
- Fonts die later inladen: tekst wordt eerst in systeem-font getoond, dan omgevlogen naar je custom font. Als de grootte anders is, verspringt de tekst.
- Ingesloten videos of iframes zonder vaste afmetingen
Wat kan je websitebouwer doen?
Concrete acties:
- Zet altijd
widthenheightop afbeeldingen en iframes - Reserveer ruimte voor advertenties met een vaste containerhoogte
- Gebruik
font-display: swapmet een goede fallback-font - Laat above-fold content eerst laden zonder onderbreking
Waarom is dit een ranking-factor?
Google noemt CLS een 'Core Web Vital'. Sinds 2021 telt het officieel mee voor ranking. Twee sites die inhoudelijk identiek zijn: de site met CLS 0,05 wint van de site met CLS 0,4.