How to fix cwv cls on Next.js (Headless)

Steps for Next.js (Headless)

1. Use next/image for ALL images and always supply explicit `width` and `height` props (or use `fill` with a sized wrapper). Never let an `<img>` tag render without known dimensions — this is the single largest CLS source in headless storefronts.
2. For above-the-fold hero/banner images, add the `priority` prop so they are preloaded and the space is claimed before first paint, preventing a late swap from a placeholder to the real image.
3. For videos and third-party embeds (YouTube, Vimeo, ads, chat widgets), wrap them in an aspect-ratio container using Tailwind's `aspect-video` class or a CSS `aspect-ratio` rule so the browser reserves the exact rectangle before the iframe/script loads.
4. For late-loading widgets (reviews, personalisation banners, cookie notices), set an explicit `min-height` on their mount-point element and use a matching skeleton/placeholder component rendered on the server so the DOM node already occupies space during hydration.
5. Audit dynamic content injected via `useEffect` (cart drawer, announcement bars, sticky headers) — wrap each in a container with fixed or min-height so the rest of the page is not pushed when they mount.
6. Run Lighthouse or the Vercel Speed Insights panel after each change to confirm the CLS score drops; target CLS < 0.1.

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.