Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that quantifies how much visible content unexpectedly shifts position during a page's lifetime. It captures the "jumping content" problem where users try to tap a button that moves at the last second.
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that quantifies how much visible content unexpectedly shifts position during a page's lifetime. It captures the "jumping content" problem where users try to tap a button that moves at the last second.
Why It Matters
CLS is a confirmed Google ranking signal and one of the three Core Web Vitals. Google's thresholds: good ≤ 0.1, needs improvement 0.1–0.25, poor > 0.25. High CLS hurts user trust — Google's research shows pages with CLS > 0.15 have 24% higher bounce rates. It's also the cheapest Core Web Vital to fix because almost every cause has a simple remedy.
How CLS Is Calculated
CLS score = impact fraction × distance fraction, summed across all unexpected layout shifts during the page's lifetime.
- Impact fraction: the portion of the viewport affected by the shifting element (before + after union).
- Distance fraction: the largest distance any element moved, as a fraction of the viewport.
Since 2021, Chrome uses "windowed CLS" — only the worst 5-second window counts, so a long-lived SPA isn't punished forever for one bad moment.
Common Causes
Images without dimensions: <img> with no width/height attributes forces the browser to reflow when the image loads.
Ads and embeds without reserved space: Third-party ad slots inserted after initial render push content down.
Web fonts causing FOIT/FOUT: When a custom font loads, text reflows because the fallback font has different metrics.
Dynamically injected content: "You may also like" widgets, cookie banners, and notifications appearing above existing content.
Animations that aren't transform-based: Animating top or left triggers layout; animating transform does not.
How to Fix CLS
Set explicit dimensions on images and videos: <img width="800" height="600"> — the browser reserves space before the file loads.
Reserve ad slot space: Give ad containers fixed min-height so inserted ads don't push content.
Use font-display: optional or preload web fonts to minimize FOUT.
Insert new content below the fold or on user interaction, not above existing content.
Animate with transform and opacity only — these don't trigger layout.
Use aspect-ratio CSS for responsive media without explicit dimensions.
Measuring CLS
Field data: CrUX, Search Console Core Web Vitals report, PageSpeed Insights field section.
Lab data: Lighthouse, Chrome DevTools Performance panel. Note that lab CLS can differ from field because real users trigger different scroll positions and interactions.
CLS is ranked on the 75th percentile of real user data, so field data is what counts for SEO.
Sources: