How to fix cwv cls on Wix

Steps for Wix

1. Images: In the Wix Editor, click any image element > Settings > ensure you have defined both the width and height of the image container. Wix automatically reserves the container's space in its layout engine — the key is not leaving image containers set to 'auto' height.
2. Use Wix's built-in Image component rather than HTML embed widgets for product images; the native component handles space reservation automatically.
3. Fonts: Wix loads fonts via its own font system. In the Editor, go to Site Design (paint bucket icon) > Text Themes, and stick to Wix-hosted fonts (Wix Fonts or Google Fonts loaded through Wix). Avoid pasting custom @font-face code in Custom CSS unless you add font-display: swap; manually via Settings > Custom Code.
4. Promotional/announcement bars: Use a Wix Strip or Box element pinned at the top with a fixed pixel height. Avoid using third-party HTML widgets injected above the main content area, as these can shift the DOM.
5. Third-party apps and widgets: In your Wix dashboard, review any installed Wix Apps (e.g. chat, reviews, pop-ups). In the App Market or the app's settings panel, configure widgets to load in a fixed-position overlay or below the fold rather than inline above content.
6. Cookie consent: Use a Wix-native cookie consent solution (Settings > Cookie Banner) which is rendered in a fixed bottom position and does not cause layout shift.

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