Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures the visual stability of a web page during loading — specifically, how much visible content unexpectedly shifts position.

CLS thresholds:

• Good: Under 0.1
• Needs Improvement: 0.1–0.25
• Poor: Over 0.25

CLS is scored as the sum of all unexpected layout shift scores — each individual shift contributes based on both the fraction of the viewport affected and the distance elements moved.

Why CLS Matters for Conversion

Layout shifts are not just an annoyance — they directly cause conversion failures:

The misclick problem: A visitor is about to tap a “Add to Cart” button on mobile. As they tap, an ad loads above the button and shifts it 80px down. The visitor taps the product image instead. The cart was not added. The conversion was lost.

This scenario is common enough that Google included CLS as a ranking signal precisely because it correlates with poor user experience and higher session abandonment rates. CrUX data shows pages with good CLS scores have 24% lower session abandonment than pages with poor CLS.

Trust erosion: Unstable pages that “jump around” signal low quality. Visitors subconsciously associate visual instability with unreliability — the same way a physical store with disorganized shelves signals unprofessionalism.

CLS Score Components

CLS is calculated per layout shift event:

Layout Shift Score = Impact Fraction × Distance Fraction

• Impact fraction: What percentage of the viewport was affected by the shift?
• Distance fraction: How far did the element move as a fraction of the viewport?

A shift affecting 50% of the viewport and moving 10% of the viewport distance produces a shift score of 0.05.

CLS Benchmarks by Industry

Google’s CrUX data shows significant variation across verticals:

Industry	% pages with Good CLS (<0.1)	Common cause
Technology / SaaS	52%	Late-loading chat widgets
E-commerce	35%	Image carousels, dynamic recommendations
News / Media	28%	Ad injection above editorial content
Financial services	44%	Third-party compliance widgets
Healthcare	41%	Third-party booking embeds

Source: Google CrUX dataset, 2024

E-commerce has the worst CLS performance of major verticals — and it’s also the vertical where misclicks have the most direct revenue impact.

Common CLS Causes

Images Without Defined Dimensions

The most common CLS cause. When a browser encounters <img src="hero.jpg"> without width and height attributes, it doesn’t know how much space to reserve. When the image loads, it pushes all content below it down — a large, visible shift.

Fix: Always include explicit dimensions:

<img src="hero.webp" width="1200" height="630" alt="...">

Or use CSS aspect-ratio:

img { aspect-ratio: 16/9; width: 100%; }

Ads and Dynamically Injected Content

Third-party ads, cookie consent banners, and chat widgets often inject into the page after initial render — pushing existing content down.

Fix: Reserve space for dynamic content:

.ad-slot { min-height: 250px; }
.cookie-banner { position: fixed; bottom: 0; } /* doesn't push content */

Web Fonts (FOIT/FOUT)

Fonts that load late cause text to first render in a fallback font (different size) then reflow when the custom font loads.

Fix: Preload the font and use font-display: optional (no reflow if font loads too late) or font-display: swap with matched fallback font metrics.

CSS Animations Affecting Layout

Animating properties like top, left, height, or width triggers layout recalculation.

Fix: Use transform and opacity for animations — these run on the compositor thread and don’t trigger layout:

/* Causes CLS */
.slide-in { animation: shift-top; } /* animates top: value */

/* No CLS */
.slide-in { animation: slide-down; } /* uses transform: translateY() */

Dynamic Content Injection

Personalization engines, A/B testing tools, and recommendation widgets frequently inject content after the initial page render. This is one of the most overlooked CLS sources on mature e-commerce sites. Each injected block can add 0.05–0.15 to your CLS score.

Fix: Pre-render placeholder containers with fixed dimensions so injected content fills reserved space rather than pushing content.

CLS on Mobile vs Desktop

CLS issues are almost always more severe on mobile because:

• Viewport is smaller — a 50px shift is a larger percentage of the screen
• Mobile connections are slower — more assets load with delays between them
• Touch targets are smaller — shifted elements are harder to re-target accurately
• Third-party scripts (ads, chat) load proportionally later on slower connections

For any page where mobile represents significant traffic (typically 50–70%+ for most sites), CLS on mobile should be the primary CLS diagnostic focus. See Mobile Conversion Rate Optimization for the full mobile performance optimization context.

CLS and the Conversion Impact Calculation

It’s possible to estimate the revenue cost of poor CLS directly:

Example calculation:

• 50,000 monthly product page visits
• Current CVR: 2.5%
• Current CLS: 0.28 (poor)
• Industry data: improving CLS from poor to good correlates with ~15% CVR improvement
• Projected CVR after CLS fix: ~2.9%
• Revenue per conversion: €80
• Monthly revenue uplift: 50,000 × 0.004 × €80 = €16,000/month

CLS fixes are frequently among the highest-ROI technical improvements in a CRO audit precisely because the fix is often straightforward (add image dimensions, fix font loading) while the revenue impact compounds across every page affected.

Measuring and Monitoring CLS

Google PageSpeed Insights — Reports field CLS (real user data) from CrUX and lab CLS from Lighthouse. The field data is what matters for SEO and ranking. Available at pagespeed.web.dev.

Chrome DevTools → Performance tab — Run a performance profile to see layout shifts highlighted in the timeline as red/pink bands.

Google Search Console → Core Web Vitals — Shows CLS data by page URL group across real users. The most actionable view for identifying which specific pages need fixing. Access at search.google.com/search-console.

WebPageTest.org — Frame-by-frame filmstrip view highlights exactly when and where shifts occur. Essential for diagnosing which element is causing a shift.

CLS in the CRO Audit Process

In a technical CRO audit, CLS is evaluated in order of:

1. Measure CLS per page group — Product pages, checkout, landing pages separately
2. Identify the shift source — Use Chrome DevTools Performance tab to pinpoint the element
3. Categorize by fix complexity — Image dimensions (10 minutes), font loading (1 hour), third-party widgets (requires coordination)
4. Estimate revenue impact — Calculate based on traffic × CVR improvement estimate
5. Fix and monitor — CLS improvements should be verified in Search Console within 28 days (data update cycle)

For the full Core Web Vitals context, see Core Web Vitals and Page Speed. CLS fixes are included in every technical CRO audit.