How to fix cwv cls on Adobe Commerce (Magento)
Eliminate unexpected layout shifts by reserving explicit space for every image, video, embed, ad, and late-loading widget before it loads, so nothing on your page jumps around as it renders.
Steps for Adobe Commerce (Magento)
- Images: In your theme's layout XML and template .phtml files, ensure all <img> tags include width and height attributes. For product images, edit app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/view/gallery.phtml and confirm width/height are output from the product image data object.
- Responsive images: Add CSS to your theme's web/css/source/ files: .product-image-container { aspect-ratio: 1/1; } to reserve square image space on product and category pages.
- Fonts: In web/css/source/_typography.less (or .scss), find @font-face declarations and add font-display: swap;. If using Google Fonts, add &display=swap to the URL in your layout XML <head> block.
- Banners and sliders (PageBuilder): If using Page Builder, open the Row or Banner element > Advanced and set a fixed min-height. Avoid 'auto-height' banner rows above the fold.
- Third-party modules: Audit app/design/frontend/<Vendor>/<Theme>/requirejs-config.js and layout XML for any module loading scripts in the <head>. Use the 'defer' or 'async' attribute for non-critical scripts. Move chat and review widget scripts to the footer by setting <move> in layout XML.
- Full Page Cache: In Stores > Configuration > Advanced > System > Full Page Cache, ensure Varnish or the built-in FPC is enabled. Cached pages paint faster and reduce the window in which late-loading elements can cause CLS.
<img
src="product-photo.jpg"
alt="Red running shoes"
width="800"
height="800"
style="aspect-ratio: 1/1; width: 100%; height: auto;"
>
/* CSS: reserve space for an ad slot before it loads */
.ad-container {
min-height: 90px; /* match your largest ad unit height */
width: 100%;
}
/* CSS: prevent font-swap layout shift */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}What is cwv cls?
Cumulative Layout Shift (CLS) measures how much the visible content on your page unexpectedly moves while it is loading. Every time an image pops in and pushes a button out of reach, a font swaps and reflowing text, or a banner ad shoves your product description down the page, that counts as a layout shift. Google's "good" threshold is a CLS score below 0.1; a score of 1.05 — as in the example above — means content is shifting dramatically, which is easily noticeable to shoppers. The most common causes are images and videos without explicit width/height attributes, web fonts that change character sizes when they load, third-party widgets (chat bubbles, review carousels, cookie banners, email pop-ups) injected above existing content, and dynamically inserted banners or promotional bars.
CLS is one of Google's three Core Web Vitals, which are a direct ranking signal in Google Search — a poor score can push you below competitors even if your content is better. Beyond rankings, layout shift is a serious conversion killer: a shopper who taps "Add to Cart" while the page is still loading can accidentally hit the wrong element, leading to frustration and cart abandonment. Google's own research links poor page experience scores to higher bounce rates and lower revenue per session. On mobile devices — where Google indexes first — layout shift is even more pronounced because screens are small and a single banner inserting itself at the top can move everything else off screen.
See the complete Cwv cls guide for every platform and the full background.
Not sure if your Adobe Commerce (Magento) store has this?
Run a free SEOLZ audit — we’ll find cwv cls and every other issue across your whole site.
Scan my site free