How to fix cwv cls on Webflow

Steps for Webflow

1. Images: In the Webflow Designer, click any Image element > Settings panel (gear icon). Set an explicit Width and Height, or use the Style panel to add an aspect-ratio property (e.g. aspect-ratio: 4/3) to the image's wrapper div. This ensures the browser reserves the right space.
2. CMS images: For CMS Collection images (e.g. product photos), select the image in the Collection List and in the Style panel set the image wrapper to a fixed aspect-ratio or percentage-based height. Do not leave image wrappers at height: auto without a defined aspect ratio.
3. Fonts: Go to Project Settings > Fonts. Webflow loads Google Fonts and Adobe Fonts automatically with font-display: swap for Google Fonts. For custom uploaded fonts, go to Project Settings > Fonts > Upload Font and ensure font-display is set (add custom CSS in the global stylesheet: @font-face { font-display: swap; }).
4. Announcement bars and sticky headers: Build announcement bars as a fixed-height Section at the top. Set an explicit min-height in the Style panel so the space is always reserved, even before any CMS content or dynamic text loads.
5. Third-party embeds and scripts: Add non-critical third-party scripts (chat, analytics, reviews) via Project Settings > Custom Code > Footer Code section, not the Head section, so they load after the main content is painted.
6. Interactions/animations: In the Webflow Interactions panel, avoid 'Move' or 'Size' entrance animations on above-the-fold elements that trigger on page load — these count as layout shifts. Use opacity-only animations for reveal effects instead.

<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.