CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) is een [Core Web Vitals](/glossary/core-web-vitals)-metriek die de visuele stabiliteit van een pagina meet tijdens het laden. In plaats van snelheid of responsiviteit te meten, richt CLS zich op of zichtbare content onverwacht verschuift tijdens en na het laadproces. Telkens wanneer een element beweegt zonder gebruikersinteractie, registreert de browser de afstand en grootte van de verschuiving. Deze individuele scores worden gegroepeerd in sessievensters, en het grootste sessievenster wordt de CLS-score van de pagina. Een score van 0,1 of lager is goed, 0,1 tot 0,25 moet worden verbeterd, en alles boven 0,25 is slecht.

Onverwachte layoutverschuivingen verslechteren de gebruikerservaring direct. Een lezer die op het punt staat een knop in te drukken, kan per ongeluk het verkeerde element raken wanneer de content springt. Een kijker die door een document scrollt, kan zijn plek volledig kwijtraken. Deze frustraties verhogen het [bouncepercentage](/glossary/bounce-rate) en verminderen de tijd op de pagina. Google gebruikt CLS als een van de drie Core Web Vitals in zijn ranking-algoritme, dus pagina's met slechte visuele stabiliteit worden zowel op engagement als SEO afgestraft. Voor digitale uitgevers die interactieve content zoals flipbooks embedden, is CLS-controle bijzonder belangrijk omdat embeds van derden een van de meest voorkomende oorzaken van layoutverschuivingen zijn.

De viewer van FlipLink is ontworpen om CLS te minimaliseren door vaste afmetingen voor de [flipbook](/glossary/flipbook)-container te reserveren voordat de pagina-inhoud volledig is geladen. Afbeeldingen en interactieve elementen worden gerenderd binnen vooraf toegewezen ruimtes zodat de layout niet verschuift wanneer assets binnenkomen. De [Three.js](/glossary/three-js) flipbook-renderer en de [PDF.js](/glossary/pdf-js) documentviewer initialiseren beide met een stabiel frame, waardoor de paginaomslag-animatie geen layout-sprongen veroorzaakt. De [responsieve inbeddingscode](/features/sharing-and-distribution) die FlipLink genereert gebruikt beeldverhoudingcontainers die onmiddellijk de juiste ruimte op de hostpagina claimen. Dit ontwerp komt zowel de ingebedde viewer op je website als de gehoste publicatie op go.fliplink.me ten goede.

CLS wordt gemeten met twee componenten per verschuiving: **impact fraction** (het percentage van het [viewport](/glossary/viewport) dat wordt beïnvloed) en **distance fraction** (hoe ver het element is verplaatst ten opzichte van het viewport). De layout shift-score voor een enkel frame is gelijk aan de impact fraction vermenigvuldigd met de distance fraction. Verschuivingen die plaatsvinden binnen 500 milliseconden na gebruikersinvoer (zoals een klik of tik) worden uitgesloten omdat de gebruiker beweging verwacht als reactie op zijn actie. Chrome DevTools, Lighthouse, PageSpeed Insights en de Web Vitals JavaScript-bibliotheek rapporteren allemaal CLS. Veldgegevens uit het Chrome User Experience Report (CrUX) leveren real-world CLS-scores verzameld van daadwerkelijke bezoekers.

CLS gebruikt een **sessievenster-benadering** om de eindscore te berekenen. Een sessievenster is een groep layout shifts die binnen één seconde van elkaar plaatsvinden, met een maximale vensterduur van vijf seconden. De CLS-score van de pagina is het grootste enkele sessievenster, niet de som van alle verschuivingen. Deze methode werd in 2021 bijgewerkt om langlevende pagina's en single-page applicaties waar content progressief wordt geladen beter weer te geven. Veelvoorkomende oorzaken van hoge CLS zijn afbeeldingen zonder breedte- en hoogte-attributen, dynamisch ingevoegde advertenties of banners, webfonts die een flash of unstyled text (FOUT) veroorzaken, en embeds van derden die asynchroon laden zonder gereserveerde ruimte.

**"CLS doet er alleen toe tijdens het initiële laden van de pagina."** CLS volgt verschuivingen gedurende de hele levenscyclus van de pagina, inclusief die veroorzaakt door lazy-loaded afbeeldingen, infinite scroll-content of dynamisch ingevoegde elementen. Single-page applicaties die content wisselen bij navigatie kunnen CLS ophopen als transities niet zorgvuldig worden afgehandeld. **"Het doel is een CLS-score van 0."** Hoewel nul ideaal is, wordt een score van 0,1 of lager als goed beschouwd. Het najagen van absolute nul kan leiden tot overoptimalisatie. Het praktische doel is om verschuivingen onmerkbaar te houden voor gebruikers. **"CLS meet hoe snel een pagina laadt."** CLS heeft niets met snelheid te maken. Een pagina kan in minder dan een seconde laden en toch een verschrikkelijke CLS hebben als elementen rondspringen tijdens het renderen. Snelheid wordt gemeten door [LCP](/glossary/lcp) en andere tijdmetrieken, niet door CLS.