CLS (Cumulative Layout Shift)
Cumulative Layout Shift measures visual instability — how much page elements unexpectedly move while the page is loading. A CLS score under 0.1 is "Good." High CLS makes pages feel jumpy and causes accidental clicks on the wrong elements.
Why It Matters for Shopify Stores
CLS is a Core Web Vitals metric that Google uses as a ranking signal. For Shopify stores, common CLS causes include images without explicit width and height attributes, banner ads that load after content, and dynamically injected elements like cookie consent bars or popup offers. A high CLS score frustrates shoppers — especially on mobile, where a layout shift can cause someone to accidentally tap the wrong button. Fixing CLS often results in both better rankings and a better user experience.
How to Check Your Store
Use Google PageSpeed Insights or Chrome DevTools' Performance panel to measure CLS. In Search Console, the Core Web Vitals report shows your real-user CLS data across all pages.
Use the free shopify speed test toolHow to Fix It
Add explicit width and height attributes to all images and videos. Reserve space for ads and embeds before they load. Avoid inserting content above existing content unless responding to user interaction.
Related Terms
LCP (Largest Contentful Paint)
Core Web VitalsLargest Contentful Paint measures how long it takes for the largest visible content element on a page — usually a hero image or headline — to finish loading.
INP (Interaction to Next Paint)
Core Web VitalsInteraction to Next Paint measures the responsiveness of your page to user interactions — clicks, taps, and keyboard input.
Core Web Vitals
Core Web VitalsCore Web Vitals are Google's set of user experience metrics that measure loading performance (LCP), visual stability (CLS), and interactivity (INP).
Lazy Loading
PerformanceLazy loading is a technique where images and other resources are only loaded when they're about to enter the user's viewport — rather than all at once when the page first loads.
Render-Blocking Resources
PerformanceRender-blocking resources are CSS or JavaScript files that prevent a browser from displaying page content until they've fully downloaded and parsed.
Check your store's CLS with our free tools
Get a full audit across all 6 performance categories — including core web-vitals — in under 60 seconds.
Run a Free Store Audit