What Is Cumulative Layout Shift? Fixing Pages That Jump

Jul 29, 2026 · SEO Glossary

You've lived this: you're reading an article on your phone, an ad loads above the paragraph, and the text you were reading jumps 300 pixels down. Or worse — you tap "Cancel" and the page shifts at the last instant, so you hit "Confirm purchase." Google built a metric specifically to quantify that experience.

What is Cumulative Layout Shift? CLS measures how much visible content moves around unexpectedly during a page's lifetime. It's one of the three Core Web Vitals, alongside LCP and INP, and it's the only one measured in unitless scores rather than time: 0.1 or below is good, above 0.25 is poor, judged at the 75th percentile of real Chrome users.

How the cumulative layout shift score is computed

Each unexpected shift gets a score: impact fraction × distance fraction.

• Impact fraction: how much of the viewport the moving elements affected (their area before plus after the move).
• Distance fraction: how far they moved, as a share of the viewport's largest dimension.

So an element covering half the screen that jumps a quarter of the screen's height scores 0.75 × 0.25 ≈ 0.19 — already a failing page from one shift. The "cumulative" part: shifts are grouped into session windows (bursts of shifts up to 5 seconds long, with gaps over 1 second starting a new window), and your CLS is the worst window. This 2021 refinement matters for long-lived pages — an infinite-scroll feed no longer accumulates shifts forever; only its worst burst counts.

One exclusion does a lot of work: shifts within 500ms of a user interaction don't count. Content that expands because you tapped it is expected movement, not a defect.

The usual suspects

Almost every CLS failure traces to one of five causes:

1. Media without reserved dimensions. An <img> with no width/height attributes renders at zero height, then snaps to full size when the file arrives, shoving everything below it.
2. Ads, embeds, and iframes. Ad slots that expand from nothing to 280px on load. Worst on mobile, where the slot can occupy most of the viewport.
3. Web fonts. The swap from fallback font to web font changes text metrics and reflows entire paragraphs — visible in field data even when lab tests (with warm caches) miss it.
4. Injected banners. Cookie notices and promo bars that JavaScript inserts at the top of the document after first paint, moving the whole page down.
5. Late-arriving dynamic content. "Related products" blocks that render mid-viewport after an API call.

Reproducing shifts you can't see

CLS is sneaky because on your office machine with a warm cache and fast connection, nothing shifts. To see what users see:

• In Chrome DevTools, open the Performance panel, enable Layout Shift highlighting (or record a trace and look for the red Layout Shift markers), and reload with network throttling set to Fast 3G and cache disabled. Shifting elements get flagged individually with their scores.
• Check field data in PageSpeed Insights or Search Console's Core Web Vitals report — grouped by template, so you can see whether it's your article pages or your category pages that fail.
• Remember lab CLS only captures shifts during load. Field CLS covers the whole visit, which is why field scores often exceed lab scores: the shift happens when a user scrolls to a lazy-loaded section three seconds in.

Fixes that actually work

Reserve space for everything that arrives late. For images, set explicit dimensions — modern browsers compute the aspect ratio from them and reserve the space even in responsive layouts:

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

For ad slots and embeds, set a min-height on the container matching the most common creative size. A slot reserved at 280px that occasionally gets a 250px ad wastes 30px; the same slot unreserved costs you the metric.

Tame the font swap. font-display: swap with a fallback font metrically matched to your web font (adjusted via size-adjust and ascent-override) makes the swap nearly invisible. Preloading the primary font file shortens the window where a swap can happen.

Never insert above existing content without user action. Cookie banners should be overlays (position fixed) or reserved in the initial layout — not injected pushes.

Animate with transform. A CSS transform: translateY() moves pixels without triggering layout, so it produces no shift; animating top or height does.

Finding which pages to fix first

CLS failures cluster by template — fix the article template and you've fixed 800 URLs at once. Cross-reference Search Console's failing-URL groups with a site audit that flags pages carrying oversized or dimension-less images, since image issues are the most common root cause, and the pages with the worst images are usually the same ones jumping. Prioritize templates by traffic, fix the shared components (header banners, ad slots, hero images), and expect field data to reflect the change over the following 28-day collection window.