Cumulative Layout Shift (CLS) meet hoeveel zichtbare elementen op een pagina onverwacht verschuiven tijdens het laden. Het is een van de drie Core Web Vitals. Google beschouwt een CLS-score van 0,1 of lager als "goed". CLS heeft geen tijdseenheid — het is een dimensieloos getal berekend uit impact fraction × distance fraction.
Wat is CLS?
CLS kwantificeert visuele instabiliteit. Elke keer dat een zichtbaar element van positie verandert zonder dat de gebruiker erom vroeg (geen klik, tik of toetsaanslag), telt dat als een layout shift. CLS sommeert de grootste burst van shifts tijdens de paginalevensduur.
De berekening per shift: impact fraction × distance fraction. Impact fraction is het percentage van de viewport dat door het verschuivende element wordt beïnvloed. Distance fraction is de afstand die het element verschuift als percentage van de viewport.
| Score | Waarde | Betekenis |
|---|---|---|
| Goed | ≤ 0,1 | Stabiel |
| Verbetering nodig | 0,1 – 0,25 | Merkbare verschuivingen |
| Slecht | > 0,25 | Ernstig instabiel |
Waarom belangrijk
Slechte CLS frustreert gebruikers direct. Een knop die verschuift terwijl je erop klikt, resulteert in een verkeerde actie. Tekst die verspringt terwijl je leest, is desorienteerend. Google straft dit af als onderdeel van Page Experience.
De meest voorkomende oorzaken: afbeeldingen zonder width en height attributen, laat-ladende fonts die tekst reshapen (FOUT), dynamisch ingevoegde advertenties of banners, en cookie-consent widgets die content naar beneden duwen.
Voorbeeld
Voorkom CLS door altijd afmetingen op te geven voor media:
<img src="/foto.webp" width="800" height="450" alt="Voorbeeld" />
Voorkom font-gerelateerde CLS met font-display: optional:
@font-face {
font-family: 'Bebas Neue';
src: url('/fonts/bebas-neue.woff2') format('woff2');
font-display: optional;
}
Reserveer ruimte voor dynamische content met min-height of aspect-ratio:
.ad-slot { min-height: 250px; }
.video-embed { aspect-ratio: 16 / 9; }
Gerelateerd
- Core Web Vitals: complete gids
- Gerelateerde termen: Core Web Vitals, LCP, INP