How to fix cwv cls on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Images: In your theme's Magento_Catalog module override (app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/), open list.phtml and view.phtml. Add width and height attributes to every <img> tag. For the product image widget, set these in the image configuration: app/etc/view.xml under <images> → set width and height for each image ID.
2. view.xml: Open app/design/frontend/<Vendor>/<theme>/etc/view.xml and confirm every <image id='...'> entry has both <width> and <height> child elements. These values flow into Magento's image helper and automatically add the HTML attributes.
3. Cookie / consent notices: Adobe Commerce ships with no built-in cookie notice. Third-party cookie extension settings should be configured to display as a fixed bottom bar — check the extension's admin configuration under Stores → Configuration → [Extension Name].
4. Fonts: In your theme's web/css/source/_typography.less (or .scss equivalent), add font-display: swap to all @font-face rules. Run bin/magento setup:static-content:deploy after changes.
5. Page Builder / banners: In Content → Pages or Blocks, edit any Page Builder row containing a banner or slider. Set a fixed minimum height on the row (Advanced → Minimum Height) so the container does not collapse before images load.
6. Verify: Run bin/magento cache:flush, then test with PageSpeed Insights; target CLS < 0.1.

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.