How to fix cwv cls on Shopify

Steps for Shopify

1. Images: In your theme editor (Online Store → Themes → Edit code), open the Liquid snippet that renders product/collection images — typically sections/product-template.liquid or snippets/product-image.liquid. Find every <img> tag and add width and height attributes matching the rendered dimensions, e.g. width='800' height='800'. Alternatively install the free 'Booster SEO' or 'TinyIMG' app which patches image dimensions automatically across your theme.
2. Lazy-loading: Shopify's Dawn and most modern themes already add loading='lazy' and explicit dimensions via Liquid's | image_url filter with width parameter. If yours does not, update image_url calls to use: {{ image | image_url: width: 800 }} and render the img tag with width and height set.
3. Announcement bar / cookie banner: In the theme editor (Customize → Header), move any announcement bar to a server-rendered position rather than injecting it via JavaScript after load. For third-party cookie apps, choose ones that render as fixed overlays (bottom of viewport), not top-push banners.
4. Fonts: In your theme's layout/theme.liquid, add font-display: optional to any @font-face declarations. If using Shopify's font picker, edit the generated CSS in assets/base.css to add the descriptor.
5. Ads / embeds: Wrap any review widgets (e.g. Judge.me, Yotpo) or social feed apps in a <div style='min-height:200px'> container in the relevant section file so space is reserved before the widget JS loads.
6. Verify: Use PageSpeed Insights on your homepage and top product pages; confirm CLS < 0.1 on both mobile and desktop.

What is cwv cls?

Cumulative Layout Shift (CLS) measures how much page content unexpectedly moves around while a visitor is looking at it. Every time an image pops in and shoves text down, a banner slides in from a cookie notice, or a font swap causes a paragraph to reflow, that counts as a layout shift. Google adds all those shifts together into a single score; anything above 0.1 is considered "needs improvement," and above 0.25 is "poor." A score of 1.35 (like the example above) means the page is shifting dramatically — visitors are misclicking, losing their place, and bouncing before they buy.

CLS is one of Google's three Core Web Vitals and is a direct ranking signal in Google Search — a poor score actively suppresses your position in search results, reducing organic traffic and revenue. On mobile, where most ecommerce shopping happens, layout shifts are especially jarring: a customer tapping "Add to Cart" can accidentally tap a shifted link instead, killing the conversion. High CLS also signals a low-quality page experience, which increases bounce rate and reduces the trust visitors place in your store. Google's own data shows that sites meeting Core Web Vitals thresholds see measurably better business outcomes than those that don't.

See the complete Cwv cls guide for every platform and the full background.