Cumulative Layout Shift (CLS)
Cumulative Layout Shift is the Core Web Vital that measures unexpected visual movement of content during page loading. The 'Good' threshold is 0.1 or less at the 75th percentile of real users. CLS is the least-failed CWV in 2026 (~17% of sites fail) but the most user-visible — pages that jump around feel broken regardless of how fast they load.
Also called: CLS · Last updated: May 27, 2026 · By Joseph W. Anady
Why it matters.
CLS measures the visual stability of a page. Every time content moves unexpectedly during load (an image without dimensions pushes text down, a late-loading ad inserts itself above the fold, a font swap shifts text reflow), CLS accumulates. The score is calculated as a function of impact fraction (how much of the viewport moved) and distance fraction (how far it moved).
How it works.
Chrome tracks every unexpected layout shift during page load and the first 5 seconds after each interaction. Each shift is scored by impact fraction × distance fraction. CLS is the sum of the largest 5 shift events in a session window. Expected shifts (those triggered by user action within 500ms) are excluded from the score.
2026 reality check.
CLS is the least-failed CWV in 2026 because the optimization techniques are well-established and most modern CMS templates handle them by default. The remaining failures usually trace to: WordPress themes with auto-injecting ad slots, dynamic banner notifications, social-feed embeds, late-loading hero rotators. Manual auditing usually catches and fixes these.
Data points
- Good threshold: <=0.1 at 75th percentile of CrUX field data
- Needs Improvement: 0.1-0.25
- Poor: >0.25
- Calculated as impact fraction × distance fraction, summed over largest 5 shift events in session window
- Approximately 17% of sites fail CLS at p75 in 2026 (industry data) — least-failed CWV
First-hand insight from ThatDeveloperGuy.
ThatDeveloperGuy's CLS optimization stack: all images have explicit width/height attributes (preserves layout space during load), all custom fonts use font-display: swap with size-adjust to match fallback metrics, no auto-injecting ad slots without reserved space, no late-loading hero images that resize content. Most TDG client sites maintain CLS at 0.00-0.03 (well under the 0.1 threshold).
How TDG approaches it
TDG's CLS discipline: explicit width/height attributes on every image and video, font-display: swap + size-adjust on custom fonts, no auto-injecting elements (notifications, ads, social embeds) without pre-reserved containers, content-aware skeleton loading where async content is required.
Common mistakes.
- Images without explicit width/height (browser doesn't reserve space)
- Custom fonts without size-adjust matching fallback metrics (FOIT/FOUT shifts text)
- Ads or social embeds that insert dynamically without reserved containers
- Notification banners that drop in above the fold after page load
- JavaScript that injects content above existing content
FAQ.
What causes CLS?
Most common: images without dimensions, custom fonts swapping, ads/embeds inserting after load, notification banners, late-loading content that pushes existing content.
How do I fix CLS for ads?
Reserve the ad container space at server-render time with min-height matching the ad slot size. Don't let the ad insert into 0-height container and push other content.
Does CLS affect ranking even at small values?
Score under 0.1 is 'Good' and contributes positively to Page Experience signal. 0.1-0.25 is 'Needs Improvement' (small ranking dock). >0.25 is 'Poor' (larger dock).
Can I test CLS in development?
Yes via Chrome DevTools Performance panel or Lighthouse. But lab-test CLS often differs from real-user CLS — always validate with PageSpeed Insights CrUX data after deploy.
What about expected layout shifts (user-triggered)?
Layout shifts that occur within 500ms of a user interaction are excluded from CLS calculation. Click an accordion to expand it = expected shift = not counted.
Maintained by Joseph W. Anady at ThatDeveloperGuy. Back to glossary · Suggest a term