How to fix cwv cls on Webflow

Steps for Webflow

1. Images: In the Webflow Designer, click any image element → Element Settings (gear icon) → ensure 'Width' and 'Height' are set to explicit values (not 'auto' for both simultaneously). For CMS-bound images, set a fixed aspect ratio container: create a div wrapper with padding-top: 75% (for 4:3) and position the image absolutely inside it, or use the CSS aspect-ratio property in Webflow's Style panel.
2. Lazy loading: Webflow automatically adds loading='lazy' to images below the fold. Ensure images in the hero/above-the-fold area have loading='eager' (set in Element Settings) so they load immediately without a shift.
3. Fonts: In Project Settings → Fonts, Webflow inlines font-display: swap for Google Fonts automatically. For custom uploaded fonts (Project Settings → Fonts → Upload), add font-display: optional via a global CSS embed in Project Settings → Custom Code → Head code: <style>@font-face { font-display: optional; }</style>.
4. Interactions / animations: In Webflow Interactions panel, review any 'Page Load' animations that move elements downward on trigger — replace with opacity-only animations that do not affect layout.
5. Embeds: For any HTML Embed element (e.g. a reviews widget), wrap it in a div with a min-height style set in the Style panel to the expected rendered height.
6. Verify: Publish your site and run PageSpeed Insights; check CLS < 0.1 on mobile.

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.