What is Cumulative Layout Shift (CLS)?
Definition
Cumulative Layout Shift (CLS) measures visual stability — how much page elements unexpectedly move during loading. A button that shifts as an image loads above it, causing you to click the wrong thing, is a CLS event. Google includes CLS in Core Web Vitals with a target score below 0.1.
Why Cumulative Layout Shift (CLS) matters for Shopify stores
Shopify themes often cause CLS through lazy-loaded product images without explicit dimensions, late-loading chat widgets that push content, and cookie banners that appear after the page renders. CLS above 0.25 is classified as 'Poor' and directly affects mobile rankings.
Shopify example
A product page loads product images without specifying width and height attributes. As images load, the 'Add to Cart' button shifts down — causing shoppers to accidentally click the wrong variant. This causes a CLS score of 0.3, pushing the page into 'Poor' territory.
How Sauron handles Cumulative Layout Shift (CLS)
Sauron's Lighthouse integration measures CLS for each product page and identifies the specific elements causing layout shifts, with actionable fixes prioritised by impact.
See Product SEO on Autopilot feature →Common mistakes
- ✕ Not setting explicit width and height on images — the most common CLS cause
- ✕ Loading third-party widgets (chat, reviews, loyalty) that inject content after paint
- ✕ Cookie consent banners that appear after the page renders and push content down
- ✕ Using CSS animations that change element size or position after load
Automate your Shopify SEO
Understanding Cumulative Layout Shift (CLS) is step one. Sauron handles the implementation — automatically, for your entire Shopify store.