Free tools Windows power users keep installed
One-click scans. No signup required.
Cumulative Layout Shift (CLS) measures how much a page moves unexpectedly while it is being viewed. It is a unitless score, not a time measurement. A good CLS score is 0.1 or lower for at least 75% of visits, assessed separately for mobile and desktop; a score above 0.25 is poor. To improve it, first identify when the movement happens, then reserve space for content and prevent late-loading elements from pushing other content around.
What CLS measures
A layout shift occurs when a visible element changes position between rendered frames. CLS accounts for the impact and distance of unexpected movement, then summarizes the worst cluster of shifts in a page session.
The current calculation uses the largest session window: shifts must be less than one second apart, and a window cannot last longer than five seconds. CLS is therefore not a simple lifetime sum of every shift that happens on a page. Google’s listed web performance tools adopted this windowing method in 2021 (Google web.dev: Cumulative Layout Shift; Google web.dev: CLS session windows).
How to interpret the score
| CLS score | Interpretation |
|---|---|
| 0.1 or lower | Good. Google recommends meeting this threshold for at least 75% of page visits. |
| Above 0.1 through 0.25 | Needs improvement. |
| Above 0.25 | Poor. |
Evaluate the 75th percentile separately for mobile and desktop rather than combining the two device groups. A site can pass on one and need work on the other. These thresholds are Google’s guidance; they do not identify which element is responsible for a particular page’s score.
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 →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →How to measure CLS
Use field data to understand what visitors experience, then use a lab recording to reproduce and inspect the movement. The two views complement each other rather than serving as interchangeable scores.
1. Check real-user field data
- Open PageSpeed Insights and enter the page URL.
- Review the field data when it is available, and check whether it describes the exact URL or falls back to origin-level data for the site. The scope affects how specifically you can apply the result to that page.
- Compare mobile and desktop results where both are shown. PageSpeed Insights uses Chrome UX Report (CrUX) field data; Search Console also groups field performance data by pages.
Field data reflects real visits and can include shifts that occur after the initial page load. Availability and the scope of data shown can vary, so do not assume every URL has its own field measurement.
Rank #2
- Used Book in Good Condition
2. Record and inspect the movement
- In Chrome, open DevTools, select the Performance panel, and record a page session.
- Inspect the Layout Shifts track in the recording to find when shifts occurred and which elements moved.
- Use the live metrics view while interacting with the page when you need to observe movement as it happens.
- Run Lighthouse or review the lab diagnostics in PageSpeed Insights to identify likely contributors during a synthetic page load.
A lab run is useful for investigating initial rendering, but it commonly focuses on page load. It may miss movement caused later by scrolling, expanding an interactive element, or completing a user flow. To investigate those cases, use the page as a visitor would: scroll through it, open controls, and watch for content that loads or resizes after it enters view.
Attribution can help identify shifted elements, but the element that moved is not necessarily the cause. An advertisement or other content inserted above it may have pushed it down. Inspect what appeared or resized immediately before the shift. Browser APIs also do not expose layout-shift entries inside iframes to the parent page, although visitors can experience those shifts and CrUX may include them (Google web.dev: Cumulative Layout Shift).
Rank #3
- Used Book in Good Condition
Why CLS differs between PageSpeed Insights and Lighthouse
The tools can report different results because they answer different questions. PageSpeed Insights may show field data from real visits as well as a lab result; Lighthouse’s lab result comes from a synthetic test. Field data can include movement later in a page’s lifecycle, while a lab run commonly captures the page-load experience under its test conditions. The comparison is meaningful only when you distinguish the data type, device, time period, and page or origin scope.
- Field versus lab: Field data describes real-user experiences; lab data helps reproduce and diagnose a controlled run.
- URL versus origin: A URL-level result concerns the specific page; an origin-level fallback describes the broader site.
- Mobile versus desktop: The recommended threshold is assessed separately for each device segment.
- Load versus post-load: A page-load test may not include shifts that occur later during scrolling or interaction.
Common causes of layout shifts and how to fix them
Images and video without reserved dimensions
If the browser does not know an image or video’s dimensions before it loads, it may not reserve its space. Specify width and height, or an equivalent aspect ratio, so the layout can account for the asset before it appears.
Ads, embeds, iframes, and widgets
Reserve a stable slot at the expected size for third-party content. Avoid injecting an ad, embed, or widget above existing content unless the layout has accounted for the space it will occupy.
Unexpected dynamic content
Do not insert content unexpectedly into the visible page. When a change follows a user action, make the transition predictable and avoid an unexpected page-wide movement after the interaction.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Best Value
Late-loading web fonts
A font swap can change text wrapping and the dimensions of surrounding elements. Check whether late font loading changes the geometry, and choose font-loading and fallback behavior that limits those differences.
Lazy-loaded content
Reserve space for content before it loads, including content below the fold. Otherwise, scrolling can trigger loading that changes the positions of content already on screen.
Quick Recap
A practical order for CLS fixes
- Establish the scope: note whether the result is field or lab data, URL or origin level, and mobile or desktop.
- Locate the shift: use a Performance recording or live metrics while reproducing the relevant visit, including scrolling and interaction if the shift occurs after load.
- Find the trigger: inspect what loaded, resized, or was inserted immediately before the movement; do not assume the shifted element caused it.
- Stabilize the layout: reserve space for the triggering content, or change when and how it enters the page so existing content does not move unexpectedly.
- Measure again: repeat the same relevant action and compare the result in the same tool and scope. Use field data to judge real-visitor performance when it becomes available.
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.
