Real-user CLS (field data)

What this check does

Reads the 75th-percentile Cumulative Layout Shift from the Chrome User Experience Report — aggregated over a rolling 28-day window from opted-in real Chrome users. CLS is unitless; it sums the impact of every unexpected layout movement during the visit, capped at the largest 5-second window of activity.

Field CLS (p75)	Verdict
≤ 0.10	Good
0.10–0.25	Needs improvement
> 0.25	Poor

Why field CLS is different from lab CLS:

• Lab CLS runs once. Lighthouse loads the page, waits a few seconds, and totals the shifts.
• Field CLS runs for the whole visit. Real users scroll, click, and interact for minutes. Every shift counts — including late-loading ad networks, lazy-loaded images, A/B variants, and recommendation widgets that hydrate after first paint.

That’s why field CLS is usually worse than lab CLS, and why fixing it requires thinking about the full user journey, not just the first 5 seconds.

Why it matters

CLS is one of Google’s three Core Web Vitals and a direct ranking signal. Poor CLS isn’t just an SEO problem — it’s a usability bug that gets worse the longer the user stays:

• Users misclick the wrong button when an ad pushes content down.
• Forms get submitted with the wrong values when a late-loaded banner shifts the layout.
• Conversion rates drop measurably above CLS 0.25 (Google’s threshold for “poor”).

If your field CLS is high but lab CLS is good, the failure is almost always content that loads after first paint — and lab tools don’t wait long enough to see it.

How to improve it

1. Reserve space for everything async. Every image, video, embed, ad, or widget that loads after first paint needs explicit dimensions before it loads:

<!-- For images, always include width + height -->
<img src="/photo.jpg" width="600" height="400" alt="..." />

<!-- For iframes (YouTube, Twitter), wrap in a fixed-ratio container -->
<div style="aspect-ratio: 16 / 9;">
  <iframe src="https://www.youtube.com/embed/abc" width="100%" height="100%"></iframe>
</div>

<!-- For ad slots, declare the min-height in CSS before the SDK loads -->
<div class="ad-slot" style="min-height: 250px;"></div>

2. Avoid injecting content above existing content. If you must show a cookie banner, push it to the bottom of the page or use a top sticky bar with position: fixed — never inject it into the document flow.

3. Use font-display: optional (or swap with a careful fallback). Webfonts arriving late cause the headline to jump from the fallback’s metrics to the webfont’s metrics. The size-adjust CSS descriptor can match the fallback to the webfont’s x-height so the swap is invisible:

@font-face {
  font-family: "Inter-Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

4. Set transform instead of top / left / margin for animations. Transform-based animations don’t trigger layout, so they don’t contribute to CLS.

5. Watch out for late-binding <script> tags that mutate the DOM. Personalization tools, GTM, Hotjar, Intercom — all common offenders. If a third-party script injects an element above the fold after the page has rendered, that’s CLS.

6. Test with extensions enabled. Lab tools run a clean browser; real users have ad-blockers that remove placeholders, leaving collapsed layouts that then re-shift. Reserve space with CSS that survives ad-blocker DOM manipulation.

Frequently asked questions

My CLS is great in development but poor in production. Why?

Production has things dev doesn’t: real ad inventory, real A/B variants, real recommendation widgets, real personalization. Set up the CrUX API or web-vitals JS library to measure live in production — npm i web-vitals and call onCLS(reportFn) to log live shifts.

Are layout shifts on user input counted?

No. CLS only counts unexpected shifts — anything within 500 ms of a user click, tap, or keypress is excluded. So a tab that opens an accordion doesn’t count even though it visibly shifts content.

What about anchor links jumping the page?

Anchor scrolls aren’t counted as CLS — the spec excludes any shift that happens during a programmatic scroll. If your CLS is mysteriously high, anchor jumps aren’t the cause.