Cumulative Layout Shift (CLS)

Understanding Cumulative Layout Shift (CLS)

CLS is calculated as the sum of all unexpected layout shifts during a page session, weighted by impact area. Google's threshold for "good" CLS is under 0.1; 0.1-0.25 is "needs improvement"; above 0.25 is "poor".

The biggest CLS contributors on Shopify product pages are: images without explicit width/height attributes (so the browser doesn't reserve space), web fonts that swap in late and shift surrounding text, app widgets that load content into placeholder DOM elements, and third-party content (ads, embeds, social proof notifications) that injects after initial render.

Review widgets are a notorious CLS source. A widget that loads a review section after page render pushes everything below it down, generating a layout shift. Stores running heavy review apps often see CLS in the 0.05-0.10 range from review-widget injection alone.

The fixes: reserve space for late-loading content with placeholder dimensions, use explicit width/height on images, preload fonts to avoid late-swap shifts, and use server-rendered review sections that ship with the initial HTML rather than injecting later.