Cumulative Layout Shift
A Core Web Vital measuring visual stability — the total amount of unexpected content movement that occurs during a page's lifetime as resources load and the layout reflows.
Simple Explanation
Cumulative Layout Shift (CLS) measures how much your page content unexpectedly jumps around while loading. You've experienced high CLS when you try to click a button and an ad loads above it, pushing everything down so you click the wrong thing. Or when you're reading an article and the text shifts because an image above it finished loading. Google scores CLS from 0 (no movement) upward — lower is better. Under 0.1 is Good; over 0.25 is Poor and significantly hurts user experience.
Advanced SEO Explanation
CLS is calculated as the sum of individual layout shift scores throughout the page load and lifetime. Individual shift score = impact fraction × distance fraction, where impact fraction is the viewport area affected and distance fraction is how far the element moved. Common causes: images without explicit width/height (browser doesn't reserve space), ads injected above existing content, web fonts causing text reflow (FOUT), dynamically inserted elements (cookie banners, chat widgets), and iframes that resize post-render. The 2021 CLS update changed to windowed calculation — grouping shifts into 1-second windows, taking the largest window. This prevents accumulated CLS on long-lived single-page applications.
Why Cumulative Layout Shift Matters for Rankings
Directly causes mis-clicks and user frustration
High CLS makes users click wrong elements as content shifts under their cursor or finger. This causes accidental purchases, form errors, and immediate abandonment.
Particularly severe on mobile
Mobile viewports are smaller, making layout shifts more disruptive. Mobile users experience CLS more acutely than desktop users with larger screens.
Often invisible during development
CLS happens during load — developers reviewing finished pages see stable layouts. Field data from real users often reveals significant CLS that lab testing misses.
Real-World SEO Examples
CLS cause and fix: images without dimensions
The most common CLS cause and its simple one-line fix.
<!-- No dimensions: browser reserves 0 space --> <img src="product.jpg" alt="Product"> → Text renders above image slot → Image loads → pushes text down → CLS penalty applied
<!-- Explicit dimensions: browser reserves correct space --> <img src="product.webp" alt="Product photo" width="800" height="600" loading="lazy" > → 800×600 space reserved before image loads → No content shifts → CLS = 0
CLS cause and fix: cookie banners
Injected banners are a common CLS source — fix with CSS pre-sizing.
Cookie banner injected above page content after initial render: → All content shifts down by banner height → CLS score increases significantly
Solutions: 1. Reserve space in CSS before banner loads (min-height) 2. Show as fixed/overlay (doesn't affect document flow) 3. Pre-render banner server-side in initial HTML 4. Inject at bottom rather than top
Common Cumulative Layout Shift Mistakes
✗ Mistake
Omitting width and height on all images
✓ The Fix
Add explicit width and height attributes to every <img>. Use CSS aspect-ratio for responsive sizing while maintaining reserved space.
✗ Mistake
Injecting ads above existing content
✓ The Fix
Always reserve space for ad slots in your layout before ads load. Use min-height on ad containers.
✗ Mistake
Web fonts causing text reflow
✓ The Fix
Use font-display: optional or font-size-adjust to minimize font-swap layout shifts when web fonts replace system fonts.
Free Tools for Cumulative Layout Shift
Related Articles
Cumulative Layout Shift FAQs
Frequently Asked Questions
People Also Search For
Continue Learning: Next Terms
Core Web Vitals
Google's standardized page experience metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — used as ranking signals and user experience benchmarks.
Intermediate⚙️Largest Contentful Paint
A Core Web Vital measuring how long it takes for the largest visible content element — typically a hero image or main heading — to render in the viewport after page load begins.
Intermediate⚙️Interaction to Next Paint (INP)
A Core Web Vital measuring how long it takes for a page to visually respond to user interactions — clicks, taps, and keyboard input — throughout the entire page session. Replaced First Input Delay (FID) in March 2024.
Advanced⚙️Lazy Loading
A performance technique that defers loading of non-critical resources — images, iframes, and components below the fold — until they're actually needed as the user scrolls toward them.
Intermediate