Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

Use Chrome DevTools’ Performance panel to measure local LCP and CLS, capture INP by interacting with the page, and inspect a performance trace to find the browser work, network request or layout change behind a poor result. A local run describes the browser, device, network and actions you tested—not every visitor’s experience—so compare it with available Chrome UX Report (CrUX) field data.

What DevTools can tell you—and what it cannot

Chrome for Developers describes the Performance panel this way: “The Performance panel lets you record CPU performance profiles of your web applications.” In practice, it connects page metrics with a timeline of browser activity. A metric flags a problem; reproducing it and recording a trace helps explain it.

Google’s good-experience targets are:

  • LCP: 2.5 seconds or less.
  • INP: 200 milliseconds or less.
  • CLS: 0.1 or less.

These targets help interpret results; they do not guarantee a local run will match field experience. For a useful comparison, keep the measurement context aligned: local versus field data, URL versus origin, mobile versus desktop, page load versus interaction, and CPU or network settings.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Run a local measurement and compare it with field data

  1. Open the page and DevTools. In Chrome, open the page you want to diagnose, then open DevTools and select Performance.
  2. Check the local metrics. DevTools can show local LCP and CLS. To capture local INP, perform the interactions that matter on the page. Use the Interactions and Layout shifts views to relate measurements to events and elements.
  3. Enable field data if it is available. Compare local measurements with the panel’s CrUX data. Note the collection period and whether the field result represents the origin or the specific URL, and desktop or mobile.
  4. Make the local run more comparable. Use the suggested environment settings shown by DevTools, then reload the page and repeat the relevant interactions. Treat the result as a controlled local reproduction, not as a substitute for field data.
  5. Reproduce the issue and record a trace. Repeat the same page state and action that produced the problem, then record it in Performance. Inspect the relevant timeline, main-thread work and network activity instead of treating the metric score as an explanation.

Diagnose a slow LCP

Select the LCP marker or element in the Performance recording and inspect the timing breakdown. It separates the path to the largest contentful paint into four diagnostic intervals:

  • Time to First Byte (TTFB): Time before the response starts. A large value points to delay before the browser begins receiving the response.
  • Resource load delay: Time before the LCP resource begins loading. A large value suggests the asset was discovered or requested late.
  • Resource load time: Time spent fetching the LCP resource. A large value puts the resource transfer itself under scrutiny.
  • Element render delay: Time between the resource finishing and the element being painted. A large value points to a delay after the asset is available.

Use the largest interval to decide where to investigate, then verify the cause in the trace. The breakdown categorizes when time was spent; by itself, it does not establish why the delay occurred.

Find the interaction behind a poor INP

INP depends on interactions, so a page-load recording alone may not reproduce the problem. Repeat the particular click, tap or keyboard action that feels slow, and inspect its event in the Interactions view and Performance trace. Follow the interaction timing phases and the associated main-thread activity to see where time was spent.

Test multiple representative interactions and page states. One click or one local run may not characterize all the interactions visitors experience. If a field result is poor but the local interaction appears fast, first check whether you matched the field-data context and reproduced the same kind of action.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Trace the layout shifts behind CLS

In the Performance recording, inspect the Layout shifts track and its screenshots. When shifts are grouped into session windows, start with the largest window. Then inspect the affected elements and the changes around them in the timeline to identify what moved and when. The score indicates the extent of layout instability; the track and screenshots help locate the shifts contributing to it.

Use Lighthouse for an audit, not as a substitute for diagnosis

Run Lighthouse when you want an automated audit and recommendations. Review its individual metrics and opportunities, then use a Performance trace to investigate the interaction or browser work behind a real-world issue. A Lighthouse run is not field data, and it does not replace a trace of the interaction that caused a problem.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Use the current Performance panel

Look for Performance > Insights in current Chrome DevTools. Do not follow instructions for the old standalone Performance insights panel: Chrome’s documentation says it was deprecated and removed starting with Chrome 132, and points users to Insights within Performance instead.

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.