What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures the total amount of unexpected layout movement that occurs during a page's entire lifespan. It is calculated as the sum of all individual layout shift scores — where each shift is the product of the shifted area (fraction of the viewport) and the distance the element moved.
What CLS Measures
CLS quantifies visual instability: how much page elements jump around while loading. A high CLS score means users will accidentally click the wrong thing as content shifts under their cursor or finger. Common examples are images without dimensions pushing text down, ads that load and push content up, or web fonts that cause text to reflow when they finally load.
What is a Good CLS Score?
What Causes Poor CLS Scores?
- ✗Images and iframes without explicit width and height attributes — the browser cannot reserve space before the resource loads
- ✗Ads, embeds, or iframes injected into the page without reserved dimensions
- ✗Web fonts causing FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text) that reflows text when the font loads
- ✗Content dynamically injected above existing content (e.g., banners, cookie notices, chat widgets)
- ✗CSS animations that modify layout-triggering properties (width, height, top, left) instead of transform
How to Fix CLS
- ✓Always set width and height attributes on <img> and <video> elements — even with responsive CSS, this lets the browser reserve aspect-ratio space
- ✓In CSS, use aspect-ratio to reserve space for dynamic content containers
- ✓For web fonts, use font-display: optional or font-display: swap plus a sufficiently similar fallback font to minimise reflow
- ✓Reserve space for ads and dynamic widgets with min-height CSS to prevent layout shifts when they load
- ✓Move cookie banners, consent modals, and chat widgets so they appear in reserved space or do not shift existing content
- ✓Use CSS transform for animations instead of top/left/width/height changes
CLS Score Calculation: A Worked Example
CLS is not a time-based metric — it is calculated as impact fraction × distance fraction for every unexpected shift, then summed for the whole page session.
Example: a cookie banner appears 1.2 seconds into page load and pushes the hero section down. The shifted region covers 40% of the viewport (impact fraction = 0.4), and it moves 15% of the viewport height (distance fraction = 0.15). That single shift scores 0.4 × 0.15 = 0.06. If a second, smaller shift later in the session adds 0.03, the page's total CLS is 0.09 — just inside the "good" range.
This is why fixing the single largest shift usually matters more than chasing several tiny ones: a shift affecting most of the viewport by a large distance can single-handedly push a page from "good" into "poor."
Real-World Examples of Cumulative Layout Shift
- →A blog with hero images missing width/height attributes: CLS 0.28 (poor) before fix, 0.04 (good) after adding explicit dimensions.
- →An e-commerce product page where a "free shipping" banner injects above the header after 800ms: contributes 0.15 CLS on its own — larger than every other issue on the page combined.
- →A SaaS marketing site using Google Fonts without font-display: causes visible text reflow when the web font swaps in, adding 0.08–0.12 CLS depending on how much text is above the fold.
- →A news site with in-article ad slots that lack a reserved aspect-ratio container: each ad load event adds 0.02–0.05 CLS, and a page with 5 ad slots can accumulate 0.1–0.25 CLS from ads alone.
Check Your CLS Score
Run a Lighthouse audit at speedexporter.com to get your exact CLS score. The exported JSON identifies the specific elements causing layout shifts with their impact scores, so you can fix the worst offenders first.
Run a free Lighthouse audit →Frequently Asked Questions
What is a good CLS score?
Google considers CLS "good" at 0.1 or less. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor. A score of 0 means no unexpected layout shifts occurred.
Does CLS affect SEO?
Yes. CLS is one of Google's three Core Web Vitals and is a direct ranking factor via the Page Experience signal. A poor CLS score (above 0.25) can negatively impact organic search rankings.
What causes CLS on Shopify?
Common Shopify CLS sources: product images without explicit dimensions, app widgets (live chat, reviews, loyalty banners) that inject content above existing elements, and announcement bars that push page content down on load.
What is the difference between CLS and LCP?
LCP measures loading speed — how quickly the largest element renders. CLS measures visual stability — how much elements jump around during load. They are both Core Web Vitals but measure entirely different aspects of user experience.
How is the CLS score calculated?
CLS is the sum of every individual layout shift score during a page's lifespan. Each shift score = impact fraction (the percentage of the viewport affected) × distance fraction (how far the content moved, as a percentage of viewport height). A single shift affecting 25% of the viewport that moves 10% of the viewport height scores 0.25 × 0.10 = 0.025.
What does "Avoid large layout shifts" mean?
"Avoid large layout shifts" is the Lighthouse diagnostic audit that lists the specific DOM elements causing your CLS score, ranked by impact. It appears whenever your CLS is above the "good" threshold and shows exactly which element to fix first.
What does a "CLS issue" in Google Search Console mean?
Search Console's Core Web Vitals report groups URLs into "CLS issue: More than 0.1" (Needs Improvement) and "CLS issue: More than 0.25" (Poor), reported separately for Mobile and Desktop. These labels use 28 days of real-user CrUX data, so a fix takes 1–4 weeks to clear the report after deployment.
Can CLS be 0?
Yes — a CLS of exactly 0 means Chrome detected no unexpected layout shifts during the page's lifespan. This is achievable on static pages with correctly sized images, self-hosted fonts, and no dynamically injected content, but is uncommon on pages with ads, embeds, or third-party widgets.