CLS can be measured using multiple tools, each with different strengths. Understanding the difference between lab data and real-user field data is essential for accurately diagnosing and tracking layout shift issues.
Before choosing a measurement tool, it is essential to understand the difference between lab data and field data, because the two frequently produce different CLS scores for the same page — and both matter for different reasons.
Lab data is produced by simulating a page load in a controlled environment using a defined set of conditions: a specific network speed (typically Fast 3G or a cable connection emulation), a specific device configuration, and a scripted browser session. Tools like Lighthouse and Google PageSpeed Insights produce lab data. Lab measurements are deterministic — running the same test multiple times on the same page tends to produce similar results — which makes lab data useful for diagnosing specific issues and verifying that a fix worked.
Field data comes from real users. It is collected from Chrome browsers that have opted into usage reporting and aggregated across all real-world page visits. Field data is what Google uses for the official Core Web Vitals assessment in Search Console. Field data captures the full variability of real-user sessions: different devices, different network conditions, different ad loads, different personalization states, and different user behaviors. A page can pass CLS in lab conditions but fail in field data if the shifts are caused by factors the simulation does not reproduce — such as ad content that varies by user, or a chat widget that loads differently depending on whether the user is a returning visitor.
The fastest way to get a CLS score and understand what is causing it is to use the free CLS checker on this site. Enter any URL, select desktop or mobile (or both), and the tool returns your CLS score, a rating of Good / Needs Improvement / Poor, field data from the Chrome UX Report (when available), and a breakdown of the specific elements that shifted — with an automated diagnosis of the likely cause for each one.
This tool uses the Google PageSpeed Insights API and provides the same underlying data as running PSI manually, but presents the element-level breakdown in a more actionable format. It is the most efficient starting point for diagnosing a CLS problem on a specific page.
Google PageSpeed Insights is the most widely used CLS measurement tool. Navigate to pagespeed.web.dev, enter your URL, and select either Mobile or Desktop analysis. PSI returns both lab data (from a Lighthouse simulation) and field data (from the Chrome UX Report) for the same URL side by side.
In the lab results, the Cumulative Layout Shift audit shows your CLS score along with a "Avoid large layout shifts" section that lists the specific elements contributing to shifts, including their individual shift scores and, in many cases, the preceding and current positions of each element. This element-level breakdown is the most direct way to identify what needs to be fixed.
Note that PSI does not always return element-level detail for every page. Some pages have measurable CLS scores but the Lighthouse simulator does not capture granular shift data for them. In these cases, Chrome DevTools provides better diagnostic capability.
Google Search Console's Core Web Vitals report is the authoritative source for field data across your entire site. Found under Experience → Core Web Vitals, it shows the percentage of URLs on your site that are rated Good, Needs Improvement, and Poor for each Core Web Vital, including CLS.
Clicking into a specific issue groups affected URLs by status and issue type, allowing you to see which templates or page types are experiencing the worst CLS. This is particularly valuable for large sites where individual-URL testing is impractical — you can identify patterns (for example, all product pages or all blog posts have poor CLS) and address the root cause in the template.
Search Console field data is based on the previous 28 days of real-user Chrome visits. After you implement CLS fixes, expect a delay of several weeks before the improvement is fully reflected in Search Console, because the data window needs to roll forward past the period when the old scores were recorded.
Chrome DevTools provides the most granular, interactive CLS measurement available. Open DevTools (F12 or Cmd+Option+I), navigate to the Performance tab, and click Record. Load or reload the page, then stop the recording.
In the recording, look at the Experience row in the timeline. Purple bars labeled Layout Shift mark each individual shift event. Clicking a Layout Shift bar reveals the shift score, the session window it belongs to, and the list of source elements that moved. You can also see exactly when in the page load timeline the shift occurred, which helps you correlate the shift with a specific network request — often revealing that a particular image, script, or API response is the trigger.
DevTools also provides the Rendering panel (accessible via the three-dot menu → More tools → Rendering) with a "Layout Shift Regions" option that highlights shifting areas with a blue overlay in real time as you interact with the page. This is useful for identifying shifts triggered by user scrolling or interaction.
Lighthouse is the open-source performance auditing tool that powers PSI's lab data. You can run it directly from Chrome DevTools under the Lighthouse tab, or from the command line using the Lighthouse CLI. The DevTools version is straightforward: select your target device (Mobile or Desktop) and click Analyze page load.
Running Lighthouse from the CLI is valuable when you want to automate CLS measurement as part of a CI/CD pipeline or compare CLS across multiple pages programmatically:
The resulting JSON report contains the full CLS audit under audits["cumulative-layout-shift"], including the numeric score, display value, and element details. This enables automated regression testing — you can set a threshold and fail a build if CLS exceeds it.
Google's web-vitals JavaScript library provides a lightweight way to collect CLS measurements from real users visiting your site and send those measurements to any analytics endpoint. This is the recommended approach for building a real-user monitoring (RUM) solution for CLS.
The library correctly implements the session-window CLS calculation and reports the final CLS value when the user leaves the page (using the visibilitychange event). Sending this data to Google Analytics 4, a custom data warehouse, or a third-party RUM platform enables you to track CLS by page, by device type, by geography, and by user segment — providing much richer insight than the aggregated CrUX data in Search Console.
The Chrome User Experience Report is the underlying dataset that powers both Search Console's Core Web Vitals report and the field data shown in PageSpeed Insights. For organizations that need to analyze CLS data at scale — across thousands of URLs or for competitive benchmarking — CrUX is available in two ways.
The CrUX API is a free REST API that returns CLS field data for any URL or origin with sufficient real-user traffic. It is rate-limited but sufficient for programmatic lookups across hundreds of pages.
The CrUX BigQuery dataset provides monthly snapshots of CWV data for millions of origins worldwide. Querying BigQuery allows you to analyze historical CLS trends, compare your performance against industry benchmarks, and identify which URL patterns on your site have the worst field data — at a scale that is not possible through the Search Console interface.
The right measurement approach depends on what you are trying to accomplish. For diagnosing a specific page's CLS issues, PageSpeed Insights or the CLS checker on this site provides the fastest result. For interactive debugging during development, Chrome DevTools gives you the most granular view of individual shift events. For tracking CLS across your entire site and confirming that fixes have taken hold in the real world, Search Console is the authoritative source. For building a custom monitoring solution that captures user-level data your analytics team can segment and analyze, the web-vitals library is the correct tool.
Most production sites benefit from using at least three of these methods: a lab tool during development and QA, Search Console for site-wide field data monitoring, and a RUM solution for detailed user-level reporting.
Get your CLS score, field data from real Chrome users, and a full breakdown of which elements are shifting — all in one free test. No sign-up required.
Check My CLS Score