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
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.