Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures visual stability — how much page content moves unexpectedly during loading and interaction. A page with high CLS feels broken: text jumps, buttons move, and users click the wrong thing. Google uses CLS as a ranking signal because unstable layouts create poor user experiences.
What CLS actually measures
When an element that's already visible on screen changes its position, the browser records a "layout shift." CLS aggregates these shifts into a single score that represents how much the page layout moved during the user's visit.
The calculation
Each layout shift has two components:
- Impact fraction — The percentage of the viewport affected by the shift
- Distance fraction — How far the element moved, as a percentage of the viewport
Layout shift score = impact fraction × distance fraction
Example: An image placeholder is 400px tall on a 900px viewport. When the real image loads, it pushes content 200px lower.
- Impact fraction = 400 / 900 = 0.44 (the affected region covers 44% of viewport)
- Distance fraction = 200 / 900 = 0.22 (content moved 22% of viewport height)
- Shift score = 0.44 × 0.22 = 0.097
Session windows
CLS doesn't simply sum all shifts. It uses a "session window" approach:
- Group layout shifts that occur within 1 second of each other
- Each session window is capped at 5 seconds total duration
- The CLS score is the maximum session window total
This means a burst of small shifts during page load counts as one session. Isolated shifts later (like a lazy-loaded ad) start a new session. The worst session window becomes the page's CLS score.
CLS thresholds
| Score | Rating | Meaning |
|---|---|---|
| 0 – 0.1 | Good | Users perceive the layout as stable |
| 0.1 – 0.25 | Needs improvement | Noticeable shifts, some misclicks likely |
| > 0.25 | Poor | Disruptive shifts, high frustration |
The 75th percentile of page loads determines the overall rating. If 75% of your visitors experience CLS under 0.1, the page rates "good."
Why Google uses CLS as a ranking signal
Layout stability is a fundamental user experience metric. Research from Google shows that:
- Pages with poor CLS have 15% higher bounce rates
- Users on pages with unexpected shifts are 3x more likely to abandon a task
- Layout shifts cause accidental clicks, which frustrate users and inflate ad click metrics artificially
By including CLS in Core Web Vitals (alongside LCP and INP), Google incentivizes web developers to build visually stable pages.
What causes layout shifts
1. Images without dimensions
The most common CLS source. When an <img> tag has no width and height attributes, the browser allocates zero vertical space. When the image loads, everything below shifts.
<!-- Causes shift: browser doesn't know the height -->
<img src="photo.jpg" alt="Photo" />
<!-- No shift: browser calculates aspect ratio from attributes -->
<img src="photo.jpg" alt="Photo" width="800" height="600" />
2. Web font loading
When a custom font loads and replaces the fallback system font, text metrics change. Lines may become wider or narrower, paragraphs may gain or lose lines, and content height changes.
The shift happens at the moment font-display: swap triggers the font swap. Without metric matching (using size-adjust, ascent-override), the reflow can be significant.
3. Dynamic content insertion
Any content injected into the DOM above already-visible elements causes a shift:
- Cookie consent banners that push the page down
- Ad slots that expand when the ad loads
- "Breaking news" banners injected at the top
- Lazy-loaded above-fold components
4. Late-loading CSS
CSS that arrives after the initial render can change element dimensions, margins, and padding. This is especially common with:
- CSS-in-JS libraries that inject styles at runtime
- Third-party stylesheets loaded asynchronously
- Media queries that apply after fonts load and viewport calculations update
5. Animations that change layout properties
CSS animations or JavaScript transitions that modify width, height, top, left, margin, or padding trigger layout recalculations and create shifts. Animations using transform and opacity are safe because they run on the compositor thread.
CLS vs. other performance metrics
| Metric | Category | What it measures |
|---|---|---|
| CLS | Visual stability | How much content moves unexpectedly |
| LCP | Loading performance | When the largest content element renders |
| INP | Interactivity | How quickly the page responds to input |
| FCP | Loading performance | When the first content renders |
| TBT | Interactivity (lab) | Main thread blocking during page load |
CLS is unique because it's not about speed — it's about stability. A page can load in 500ms but still have terrible CLS if elements shift during that load.
How to check your CLS score
Google Search Console
The Core Web Vitals report groups URLs by CLS performance. This uses real-user field data from the Chrome UX Report.
PageSpeed Insights
Enter a URL to see both field data (real users) and lab data (simulated Lighthouse audit). Field CLS reflects actual user experience; lab CLS captures shifts during a controlled page load.
Chrome DevTools
- Open DevTools → Performance tab
- Record a page load
- Look for "Layout Shifts" in the Experience section
- Click any shift to see which elements moved and by how much
Web Vitals Chrome Extension
Displays real-time CLS, LCP, and INP in a browser badge as you browse your site. Useful for catching shifts during manual testing.
Quick CLS fixes
| Cause | Fix | Effort |
|---|---|---|
| Images without dimensions | Add width/height attributes | Low |
| Font swap reflow | Add size-adjust to @font-face | Low |
| Ad slots expanding | Set min-height on ad containers | Low |
| Cookie banner pushing content | Use position: fixed | Low |
| Lazy-loaded images above fold | Eager-load above-fold images | Low |
| CSS-in-JS runtime injection | Extract CSS at build time or use SSR | Medium |
| Dynamic content insertion | Reserve space or use position: fixed | Medium |
Most CLS issues are fixable with simple HTML and CSS changes. The challenge is finding all the sources, not fixing them.
Frequently Asked Questions
Does CLS only matter during page load?
No. CLS measures shifts throughout the entire page lifecycle — during load, during scrolling, and during interaction. A late-loading ad that fires 30 seconds after page load still contributes to CLS.
Do layout shifts from user interaction count?
Shifts within 500ms of a user input event (click, tap, keypress) are excluded. This means expandable menus, accordion sections, and other interactive elements don't penalize your CLS score, as long as the shift happens promptly after the user action.
Is a CLS of 0 possible?
Technically yes, but rare in practice. Pages with zero dynamic content, properly sized images, inlined fonts, and no third-party scripts can achieve zero CLS. Most real-world pages aim for 0.01-0.05.
How does CLS differ on mobile vs. desktop?
The same pixel shift creates a larger CLS score on mobile because the viewport is smaller (impact fraction is higher). Pages that score well on desktop may fail on mobile if element shifts are significant relative to the smaller screen.
How long does it take for CLS improvements to affect rankings?
Google's CWV assessment uses a 28-day rolling window of field data. After fixing CLS issues, expect 4-6 weeks for the improvement to fully reflect in Search Console and potentially influence search rankings.
Related Resources
- Eliminating Layout Shifts — Step-by-step fix guide
- Preventing Layout Shifts — Architectural patterns for stable layouts
- Cumulative Layout Shift Glossary — Quick CLS reference
- Performance Audit Template — Structured CWV audit framework