Skip to main content
Glossary

CLS (Cumulative Layout Shift)

By ยท Updated
Quick definition

The Core Web Vitals metric for visual stability โ€” measures how much page content unexpectedly jumps around during load. Target: under 0.1.

CLS (Cumulative Layout Shift) in plain English

CLS measures the sum of all unexpected layout shifts that happen while a page is loading. A layout shift is anything that moves visible content from one position to another after it first rendered โ€” an image loading and pushing text down, an ad slot expanding mid-scroll, a font swap that changes line heights. The score is calculated as shift impact times distance fraction, summed across the page load.

Google's thresholds are: under 0.1 is good, 0.1 to 0.25 is needs-improvement, over 0.25 is poor. Roughly 75% of your pageviews need to hit the good threshold for the page to be classified as good in Search Console.

The most common culprits on ecommerce stores are: product images without width/height attributes (browser doesn't reserve space, so when the image loads it pushes everything down), web fonts that swap from a fallback to the custom font and change line metrics, banner notifications that inject above the fold after page render, and third-party widgets (review badges, chat boxes, ad slots) that load into unreserved space.

The fix pattern is the same across all causes: reserve the space before the content loads. Set explicit width and height attributes on every <img> and <iframe>. Use the CSS aspect-ratio property for responsive media. Preload critical web fonts and use font-display: optional to skip the swap entirely. Reserve space for late-loading widgets with min-height. For dynamic content like notifications, place them in fixed-position elements so they don't push the document flow.

Why cls (cumulative layout shift) matters for ecommerce

For ecommerce, CLS directly affects conversion. Shoppers who go to tap an Add to Cart button just as the page shifts and accidentally tap something else lose trust immediately โ€” they bounce or refund. Google has data showing a strong correlation between CLS scores and bounce rate. For mobile especially, where thumb-tap precision is small, even a 0.15 CLS can cost meaningful conversion. Fix the layout shifts and you improve both ranking signal and revenue at the same time.

Deeper dives on this term

Focused pages that go deeper than the definition โ€” comparisons, platform-specific guides, operational walkthroughs.

Compare

CLS (Cumulative Layout Shift) vs Core Web Vitals: What's the Difference?

CLS vs Core Web Vitals: understand the difference, how they overlap, and which metric to fix first for ecommerce SEO and UX.

Read →
Compare

CLS (Cumulative Layout Shift) vs INP (Interaction to Next Paint): What's the Difference?

CLS measures visual stability; INP measures interaction responsiveness. Learn how these two Core Web Vitals differ, overlap, and a

Read →
Compare

CLS (Cumulative Layout Shift) vs JavaScript SEO: What's the Difference?

CLS vs JavaScript SEO: understand the definitions, mechanics, overlaps, and key differences ecommerce operators need to act on.

Read →
Compare

CLS (Cumulative Layout Shift) vs LCP (Largest Contentful Paint): What's the Difference?

CLS measures visual stability; LCP measures loading speed. Learn how these two Core Web Vitals differ, overlap, and affect your ec

Read →
Compare

CLS (Cumulative Layout Shift) vs Mobile-First Indexing: What's the Difference?

CLS measures visual stability; Mobile-First Indexing determines how Google crawls your site. Learn how these two distinct signals

Read →
Platform

CLS (Cumulative Layout Shift) for Shopify Stores

CLS on Shopify: platform-specific causes, Liquid template fixes, app conflicts, and theme limitations that affect your Core Web Vi

Read →
Platform

CLS (Cumulative Layout Shift) for Wix Stores

CLS on Wix stores: platform-specific causes, Wix Editor limitations, app conflicts, and concrete fixes for ecommerce operators cha

Read →
Platform

CLS (Cumulative Layout Shift) for WooCommerce Stores

How CLS manifests in WooCommerce stores, which plugins cause layout shifts, and the exact fixes for WordPress-hosted product pages

Read →
How-to

How to implement cls (cumulative layout shift) for an Ecommerce Store

A step-by-step guide to fixing Cumulative Layout Shift on ecommerce stores โ€” reserve space for images, ads, and dynamic elements t

Read →
Checklist

CLS (Cumulative Layout Shift) Checklist: 12 Items Every Ecommerce Store Should Audit

12-item CLS audit checklist for ecommerce stores. Each check includes pass/fail criteria to eliminate layout shift and protect con

Read →

Frequently asked questions

Which layout shifts count toward CLS โ€” does every move matter?

Only unexpected shifts within 500ms of user input count. Shifts caused directly by user interaction (clicking an accordion to expand it, opening a menu) are excluded. Shifts that happen continuously during load โ€” image loading late, font swapping, ad injection โ€” are what accumulates. The lifetime sum across the page session is the metric.

How do I find which element is causing my CLS score?

Use Chrome DevTools Performance panel: record a page load, then look for the Experience track which highlights layout shifts with their score and which element moved. Lighthouse also reports the top contributing elements in its CLS audit. Google Search Console's Core Web Vitals report shows which URLs have CLS issues at the page-template level.

Do CSS animations and transitions count as layout shifts?

No, animations using the transform property don't cause layout shifts โ€” they happen on the compositor thread without affecting layout. But animations on properties like top, left, margin, or width DO cause shifts and count toward CLS. If you're animating, always use transform and opacity for performance and to avoid CLS damage.

Why does my CLS look fine in Lighthouse but poor in real-user metrics?

Lighthouse measures a single load in a controlled environment with no ads, no third-party scripts, and a fast simulated network. Real users have ad blockers that fail, slow networks that delay font loads, and third-party widgets that load unpredictably. Always trust the Search Console field data (CrUX) over lab data for CLS โ€” it reflects what real shoppers experience.

Is fixing CLS hard for Shopify stores specifically?

Most Shopify CLS issues come from theme code that omits image dimensions or app widgets that inject without reserving space. The fastest wins are: edit theme.liquid to ensure all product images render with width/height, set aspect-ratio on the image CSS, and audit installed apps for layout-injecting behavior. Shopify's own Storefront performance app reports CLS by template if you need to localize the issue.

MG
Written by

Matt is the founder of RunOctopus. He built All Angles Creatures from zero to page-1 rankings in reptile feeder insects in under 60 days using exactly this method โ€” turning a hard, entrenched niche into RunOctopus's proof store for programmatic SEO and AI search citation.

Connect on LinkedIn →

See what Otto would build for your store

Free architecture preview. No card required. Five minutes.

Generate Preview →