The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Cumulative Layout Shift (CLS) is a unitless Core Web Vital that measures unexpected movement of visible page elements. A CLS of 0.1 or lower is considered good at the 75th percentile; a score above 0.25 is poor. To improve it, measure both real-user field data and a reproducible browser trace, then reserve space for images, ads, embeds and dynamic content before they load.
What CLS measures
A layout shift occurs when a visible element changes position between rendered frames without the visitor intentionally causing that change. CLS combines how much of the affected viewport is involved with how far elements move, producing a unitless score rather than a time measurement.
The current metric does not simply add every shift for the entire visit. It records the largest session window: shifts less than one second apart are grouped together, and a window cannot exceed five seconds. This windowing method replaced the earlier lifetime-sum approach and is used across Google’s listed web performance tooling.
Google’s guidance evaluates the score at the 75th percentile, separately for mobile and desktop:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors| CLS at the 75th percentile | Interpretation |
|---|---|
| 0.10 or lower | Good |
| Above 0.10 to 0.25 | Needs improvement |
| Above 0.25 | Poor |
The percentile means at least three quarters of visits in that device segment meet the displayed value or better. A page can therefore look fine in one test while still failing for a substantial share of visitors.
Why field and lab CLS scores differ
Field data and lab tests answer different questions, so their scores are not expected to match.
Rank #2
- Used Book in Good Condition
Field data: what real visitors experienced
Real-user monitoring collects visits across devices, networks and page interactions. A visitor may encounter shifts after the initial render while scrolling, opening an accordion, loading a recommendation widget or completing a form. PageSpeed Insights can display this data when available, using Chrome User Experience Report (CrUX) data. The result may describe the exact URL or fall back to the broader origin; check which scope is shown. Search Console groups CrUX performance by pages.
Lab data: what a controlled run reproduced
Lighthouse and the PageSpeed Insights lab section run a synthetic browser session. These diagnostics are useful for reproducing load-time movement and identifying likely contributors, but they commonly emphasize the initial page load. A lab run may never scroll far enough to trigger a lazy-loaded image, ad, embed or interactive component that shifts later.
Rank #3
- Used Book in Good Condition
Compare like with like
- Compare field results with field results, and lab results with lab results.
- Check whether the field report is URL-level or origin-level.
- Compare mobile with mobile and desktop with desktop; do not combine their percentiles.
- Separate shifts during initial loading from shifts caused by later scrolling or user actions.
How to measure CLS
1. Check real-user data first
- Open PageSpeed Insights and review the field section if data is available.
- Confirm whether the report is for the tested URL or an origin fallback.
- Record the mobile and desktop 75th-percentile CLS values and the date range represented.
- Use Search Console’s page groupings to find URL patterns with consistently weak field performance.
Field attribution can identify elements that moved and help prioritize work, but it does not expose every cause. In particular, layout-shift entries inside an iframe are not exposed to the parent page’s browser API, even though visitors can see those shifts and CrUX may include them.
2. Reproduce the movement in Chrome
- Open the page in Chrome, launch DevTools, and select the Performance panel.
- Start a recording, load the page, and continue through the interactions that matter: scroll, open menus or accordions, submit forms and reveal deferred content.
- Stop the recording and inspect the Layout Shifts track. Select individual events to see the affected elements and timing.
- Use DevTools’ live metrics view while interacting when you need immediate feedback rather than a full trace.
Repeat the test on representative mobile and desktop viewports. Clear differences between a load-only recording and a full user flow often explain why lab and field values diverge.
3. Use diagnostics as clues, not proof
Lighthouse diagnostics can point to shifted nodes, but the node shown is not always the original cause. An element may have moved only because another element was inserted or resized above it. In the trace, look for what appeared or changed immediately before the visible movement.
What causes layout shifts and how to fix them
Images and video without reserved dimensions
If the browser does not know an asset’s dimensions, it may lay out surrounding content and then push it down when the file arrives. Give images and video explicit width and height attributes, or reserve an equivalent aspect ratio in CSS. This lets the browser allocate the correct box before downloading the asset.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
Ads, embeds, iframes and widgets
Reserve a stable slot at the expected size before an ad, video player, map, social post or third-party widget loads. Avoid injecting one above existing content without accounting for the resulting movement. If several creative sizes are possible, design a container that accommodates the approved range rather than collapsing to zero height.
Unexpected dynamic content
Do not insert banners, notices, recommendations or validation messages into the visible page without reserving their space. When a visitor action legitimately changes the interface, make the transition predictable and keep unrelated content from jumping. A change caused directly by an intentional interaction is treated differently from an unexpected shift, but poor positioning can still create a disruptive experience.
Web fonts changing geometry
A late font can alter line breaks, text widths and element heights. Check whether the fallback and final font have materially different metrics. Choose loading and fallback strategies that minimize reflow, and test headings, navigation, buttons and cards at the viewport widths your visitors use.
Lazy-loaded content
Lazy loading saves bandwidth but can create movement when content appears during scrolling. Reserve the image, card or media slot before it enters the viewport, including content below the fold. Test a long, realistic scroll rather than stopping after the first screen.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →A practical debugging workflow
- Find the failing segment: identify whether the problem is mobile, desktop or both, and whether field data covers the URL or only the origin.
- Classify timing: determine whether movement occurs during initial rendering, after scrolling or after a specific interaction.
- Trace the trigger: in DevTools, inspect the layout-shift event and the element that appeared, resized or changed immediately beforehand.
- Reserve geometry: add dimensions or a stable container for the responsible asset or component.
- Retest the whole flow: repeat the same load, scroll and interaction sequence, then compare mobile and desktop traces.
- Validate with field data: deploy the change and watch subsequent real-user data; a single lab run cannot establish that every visitor is fixed.
Common measurement mistakes
- Calling CLS a duration or reporting it in milliseconds. It is unitless.
- Adding every shift over a visit as though the current metric were a lifetime sum.
- Treating a lab score as a complete account of post-load movement.
- Comparing an origin-level field value with a URL-level lab result without noting the scope.
- Fixing the highlighted shifted element while leaving the injected or resized element that pushed it in place.
- Testing only the first viewport and missing shifts triggered by scrolling or interaction.
What a good CLS result means
A good 75th-percentile score indicates that most visits in the measured device segment experience limited unexpected movement; it does not prove that every template, browser, iframe or user flow is stable. Conversely, a poor field score can persist even after a local lab run looks clean because real visitors encounter different content, timing and interactions. Use the lab trace to locate causes and field data to judge whether the fix improved the experience at scale.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
