Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures visual stability by tracking how much page elements unexpectedly move around during loading. It sums individual layout shifts and scores the largest 5-second window. A score of 0.1 or less is Good, 0.1-0.25 is Needs Improvement, and above 0.25 is Poor.
CLS is the metric everyone recognizes but no one names: the ad drops in, you tap the wrong button, and rage-close the tab. Google made it a ranking factor because it maps directly to conversion loss.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is one of three Core Web Vitals metrics (alongside Largest Contentful Paint and Interaction to Next Paint) that Google uses to score page experience. Where LCP measures how fast the main content appears and INP measures responsiveness, CLS measures whether the page stays put while it loads.
A "layout shift" is counted when:
- A visible element changes position between two rendered frames.
- The change is not caused by user interaction (clicks, scrolls, taps in the last 500ms).
- The change affects content already visible in the viewport.
Good: ≤ 0.1. Needs Improvement: 0.1 to 0.25. Poor: > 0.25. The target is 0.1 or less for at least 75% of page loads across all URLs, measured over 28 days of field data.
Why CLS matters
CLS shows up in every performance audit because it hits two things at once — user experience and revenue.
- 3x higher abandonment. Users are 3x more likely to bounce on pages with high CLS.
- 10-15% ecommerce conversion drops. Retail sites with poor CLS lose double-digit percentages of transactions.
- 20% bounce-rate lift on news sites. The classic case: users mis-tap because content shifted under their thumb.
- It's a confirmed Google ranking factor. Part of page experience since 2021, still weighted in 2026.
- It reveals shipping-discipline issues. High CLS is almost always a symptom of engineering shortcuts that add up.
How CLS is calculated
Each individual layout shift score is:
Layout shift score = Impact Fraction x Distance Fraction
# Impact fraction: how much of the viewport was affected
# Distance fraction: how far elements moved as a fraction of viewport
# CLS = sum of all shift scores in the largest 5-second session window
Only shifts that were not caused by user interaction count. If the user taps a button and content moves as a result, that shift is excluded — Google gives you a 500ms grace period after every user input.
Common causes of high CLS
| Cause | Why it shifts | Fix |
|---|---|---|
| Images without dimensions | Browser doesn't know how much space to reserve | Add explicit width/height or aspect-ratio CSS |
| Late-loading ads | Iframe injects after content renders | Reserve fixed slot with min-height |
| Custom fonts (FOUT/FOIT) | Text reflows when webfont loads | Preload font, use font-display: optional, match metrics |
| Dynamically injected content | Banner, promo, or notification appears after paint | Reserve space or inject below fold |
| Pop-ups and cookie banners | Interstitial shifts main content | Overlay, not push-down |
| Embeds without dimensions | YouTube, Twitter, Instagram iframes | Wrap in aspect-ratio container |
Real CLS examples
1. Image with reserved dimensions
<img src="hero.jpg" alt="Hero" />
// Good — reserves space, zero shift
<img src="hero.jpg" alt="Hero" width="1200" height="630" />
2. Aspect-ratio container for embeds
.embed-container {
aspect-ratio: 16 / 9;
width: 100%;
}
3. Ad slot reservation
.ad-slot {
min-height: 250px;
background: #f5f5f5;
}
CLS vs LCP vs INP — the three Core Web Vitals
CLS measures
- Visual stability during loading
- Whether elements shift unexpectedly
- Target: 0.1 or less
- Fixed by reserving space
- Feels like: page won't stop jumping
LCP and INP measure
- LCP: how fast main content paints (target 2.5s)
- INP: how quickly the page responds to input (target 200ms)
- Fixed by reducing render-blocking + JS work
- All three together = page experience score
- Every URL needs to hit all three
7 best practices for keeping CLS under 0.1
- Always ship width and height on images. Or use aspect-ratio CSS. Never let the browser guess.
- Reserve ad and embed slots. Fixed min-height on the container prevents the drop-in shift.
- Preload critical fonts. Use font-display: optional or swap with matched metrics.
- Use skeleton screens. Placeholder blocks that match content dimensions before data loads.
- Position dynamic content below the fold. Notifications, banners, promo bars — inject them where they don't shift viewport content.
- Overlay, don't push. Cookie banners and modals should overlay content, not shove it down.
- Monitor field data, not lab. PageSpeed Insights and Search Console show real-user CLS, which is what Google actually ranks on.
Lab data underestimates CLS almost every time. Real users have slower connections, ad injections, and content variations that lab tests skip. Always cross-check CRUX field data via PageSpeed Insights or Search Console.
Common CLS mistakes to avoid
- Optimizing lab CLS but ignoring field data. The score that ranks is the field score.
- Ignoring third-party embeds. Chat widgets, review widgets, and social embeds are common CLS culprits.
- Adding animations without will-change. Non-transform animations can trigger layout shift.
- Serving different HTML to mobile vs desktop. Mobile CLS is often worse than desktop.
- Chasing 0 CLS. Under 0.1 is Good. Chasing zero wastes engineering time.
How theStacc helps you fix CLS
theStacc audits the Core Web Vitals data in your Search Console and PageSpeed Insights, identifies the URLs that fail CLS thresholds, and hands your engineering team a prioritized list of fixes ordered by traffic impact — so the highest-traffic URLs get the fix first.
Frequently asked questions
A CLS score of 0.1 or less is Good. 0.1-0.25 is Needs Improvement, and above 0.25 is Poor. Target: keep CLS under 0.1 for at least 75% of page loads across your site.
The most common causes are images and videos loading without width and height attributes, ads and iframes injected without reserved space, custom web fonts causing FOUT or FOIT, and dynamically injected content pushing existing elements down.
Reserve space for images with explicit width/height or aspect-ratio CSS, preload critical fonts, allocate slots for ads and embeds, and position dynamically injected content below the fold where possible.
Yes. CLS is one of three Core Web Vitals (with LCP and INP) that Google uses as part of the page experience ranking signal. Users are also 3x more likely to abandon pages with high CLS.
CLS is Impact Fraction x Distance Fraction, summed for all layout shifts during a 5-second session window that were not caused by user interaction. The largest session window of shifts is used as the page's score.
Related glossary terms
Sources
