CLS (Cumulative Layout Shift)

What is CLS (Cumulative Layout Shift)?

CLS measures how much visible elements unexpectedly shift while a page loads or is used. The score is unitless and calculated as impact fraction (how much of the viewport is affected) times distance fraction (how far the elements move). CLS is one of the three Core Web Vitals alongside LCP and INP, and a good score is 0.1 or lower at the 75th percentile — anything above 0.25 is considered poor.

Why does CLS (Cumulative Layout Shift) matter?

Layout jumps are directly harmful in an online store: a shopper is about to tap “Buy,” but a banner or a late-loading image pushes the button and the tap lands on something else. That creates frustration, misclicks, and distrust right before conversion. CLS is also part of Google’s page experience signals, so persistently high values can drag rankings down. A stable page feels faster and more professional — even when the raw speed is identical.

Common use cases

• Images and video without dimensions. Without width/height or aspect-ratio the browser cannot reserve space in advance, so content jumps when the media loads — pair this with proper alt text.
• Cookie banners and popups. Content injected at the top or middle of the page pushes everything below it.
• App widgets. Reviews, “recently viewed,” and upsell blocks that load after the rest reflow the layout.
• Web fonts. Swapping from a fallback font to the final font can cause text to reflow and shift.
• Ads and iframes with no reserved space in the area above the fold.

Shopify perspective

In Shopify, most layout jumps come from apps and theme edits rather than the core platform. Always reserve space for dynamic blocks, set fixed dimensions on product images, and load cookie banners and popups so they do not push content around. Measure the effect with PageSpeed Insights or Lighthouse on both mobile and desktop, and watch the speed report under Online Store in the Shopify admin, which is built on Google Lighthouse data.