Performance features reference

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

This page is a comprehensive reference of Chrome DevTools features related to analyzing performance.

See Analyze runtime performance for a guided tutorial on how to analyze a page's performance using Chrome DevTools.

Live metrics screen

When you first open the Performance panel you will be presented with the Live Metrics screen which gives you an instant performance summary of the current page using the three Core Web Vitals.

Live metrics screen in the Performance Panel showing LCP, CLS, and INP metrics.

The metrics will update as you interact with the page and navigate to new pages. This is a good way to identify performance issues—particularly for INP and CLS if they only appear under certain circumstances. Once a performance issue is consistently repeated you can then record a trace to get more details to debug the underlying issue.

Live metrics screen features

The Live metrics screen has the following features, in addition to the metrics:

  • Field metrics from CrUX when enabled in the Field metrics panel.
  • A summary of any notable differences between the local and field metrics.
  • The LCP element, which can be hovered to highlight this on the page.
  • Details of the CLS cluster and INP type
  • More detail on hovering the metrics (for example LCP and INP subparts, and field histograms)
  • An Interactions and Layout shifts panels recording the history or interactions and layout shifts.
  • A Field metrics panel where the CrUX data can be switched on, details of the time period of that data, ability to switch between origin and URL data (where available) and between desktop and mobile data.
  • An environment settings panel with guidance of which device, CPU and Network throttling to use, based on CrUX data.

For more details see the Monitor your local and real-user Core Web Vitals performance in DevTools blog post.

Record performance

You can record runtime or load performance using the buttons in the top left, or button right of the screen:

Buttons to record performance traces are in the top-left and bottom-right corners of the screen.

Record runtime performance

Record runtime performance when you want to analyze the performance of a page as it's running, as opposed to loading.

  1. Go to the page that you want to analyze.
  2. Click the Performance tab in DevTools.
  3. Click Record Record..
  4. Interact with the page. DevTools records all page activity that occurs as a result of your interactions.
  5. Click Record again or click Stop to stop recording.

Record load performance

Record load performance when you want to analyze the performance of a page as it's loading, as opposed to running.

  1. Go to the page that you want to analyze.
  2. Open the