Cwv cls

What it is

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.

Why it matters

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.

How to fix it

1. Audit your CLS: open Google PageSpeed Insights (pagespeed.web.dev) or run a Chrome Lighthouse report on your most important pages (homepage, collection/category pages, product pages). Expand the 'Avoid large layout shifts' diagnostic to see exactly which elements are causing shifts.
2. Fix images and videos: add explicit width and height attributes to every <img> and <video> element in your HTML (or the equivalent settings in your platform's media uploader). This lets the browser reserve the right amount of space before the file downloads. For responsive images, also set aspect-ratio via CSS (e.g. aspect-ratio: 16/9) so the reserved space scales correctly.
3. Fix web fonts: add font-display: swap (or font-display: optional for minimal shift) to every @font-face declaration, and if you self-host fonts, preload the primary font file with <link rel='preload' as='font'>. This prevents invisible-text flashes that cause reflow.
4. Fix banners, announcements, and promotional bars: never inject content above existing page content after load. Place announcement bars and cookie/GDPR consent banners in a fixed position (CSS position: fixed or sticky) or reserve their exact pixel height in the layout from the start using a placeholder element.
5. Fix third-party widgets and ads: for ad slots, set a min-height container matching the largest ad unit before the ad loads. For review widgets, chat buttons, and similar third-party embeds, configure them to load in a pre-sized container or move them below the fold so a late load does not shift above-the-fold content.
6. Re-test after each change using PageSpeed Insights or Chrome DevTools > Performance panel, and confirm your CLS score drops below 0.1. Use the Web Vitals Chrome extension for a real-time, field-data view while browsing your store.

<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;
}

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• Page experience & Core Web Vitals — Google Search Central
• Core Web Vitals — web.dev
• Mobile-first indexing — Google Search Central