Performance panel: Analyze your website's performance

Dale St. Marthe
Dale St. Marthe
LinkedIn

Use the Performance panel to analyze your website's performance.

Overview

The Performance panel lets you record CPU performance profiles of your web applications. Analyze profiles to find potential performance bottlenecks and ways you can optimize resource use.

Use the Performance panel to do the following:

  • Record a performance profile.
  • Change capture settings.
  • Analyze a performance report.

For a comprehensive guide on improving your website's performance, see Analyze runtime performance.

Open the Performance panel

To open the Performance panel, open DevTools and select Performance from a set of tabs at the top.

Alternatively, follow these steps to open the Performance panel with the Command menu:

  1. Open DevTools.
  2. Open the Command menu by pressing:
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Control+Shift+P Command Menu with
  5. Start typing Performance panel, select Show Performance panel, and press Enter.

Observe Core Web Vitals live

When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics tells you their score (good, needs improvement, or bad).

If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INP) and its score, which, in addition to LCP and CLS, gives you a complete overview of Core Web Vitals of your page using your network connection and device.

The Performance panel provides a list of captured interactions under the three metric cards. To clear the list, click Clear.

To get a breakdown of a metric score, hover over the metric value to see a tooltip.

Compare your experience to the experience of your users

You can also fetch field data from the Chrome UX Report and compare the experience of your site's users to your local metrics.

To add field data:

  1. In Performance > Next steps > Field data, click Set up.

    The 'Set up' button in the Next steps section.

  2. In the Configure field data fetching dialog, note the Privacy disclosure, and click Ok.

    Advanced: Set up a mapping between development and production environments...

    Optionally, to automatically get the most relevant field data, you can set up (multiple) mappings between your development and production origins:

    1. In the dialog window, expand the Advanced section and click + New.

    2. In the mapping table, enter your development and production URLs and click +.

      The mapping between a development and production origins in the advanced section.

      For example, a mapping of http://localhost:8080 to https://example.com will bring up field data for example.com/page1 when you navigate to localhost:8080/page1.

      Additionally, if for some reason you can't get the field data automatically, you can turn on Always show field data for the below URL and provide a URL. The Performance panel will attempt to fetch field data for this URL first and then show you this field data no matter what page you navigate to.

      To change your field data fetch settings after setup, click Field data > Configure

    With the field data fetch set up, the Performance panel now shows you a comparison between your local metric scores and those that your users experience. You can see the collection period in the Field data section on the right.

    The collection peried of field data after it has fetched.

    To get a breakdown of a metric score, hover over the metric value to see a tooltip.

Configure your environment to better match that of your users

With the field data fetch set up as described in the previous section, the Performance panel provides you with recommendations on how to configure your environment to better match the experience of your users.

To configure your environment:

  1. In each metric card, expand the Consider your local test conditions section, if any, and read the recommendations.

    The 'Consider your local test conditions' sections expanded in each metric card.

    Looks like in this example, to better match the experience of your users, you might want to use a common desktop screen size and throttle down the CPU and network.

  2. To match the environment configuration for this example:

    1. Set your viewport to one of the common screen sizes (for example, 720p or 1080p). To emulate specific devices and screen sizes, you can use the Device mode in the Elements panel.
    2. 82% users of the website in this example use desktops to browse. To make sure that you compare your local metric scores to the correct field data, you can select Desktop from the Field data > Device drop-down list.
    3. In the Environment settings section, set the Network drop-down list to, for example, Fast 4G, and CPU to, for example, 20x slowdown. You may also make sure to Disable network cache in the same section.

  3. With your environment configured, reload the page, interact with it to capture your local INP, and compare the metric scores again.

    The environment is configured to match the real-world user experience.

    Looks like the metric scores are now more similar to those that your users experience. Accordingly, the Consider your local test conditions sections disappeared from the metric cards.

With that, you can now start improving the Core Web Vitals of your website:

Capture and analyze a performance report

In the next sections, follow guidance on how to record a profile, change capture settings, and analyze the report.

Record a performance profile

When you are ready to record, the Performance panel gives you the following options:

Change capture settings

Capture settings let you change how DevTools captures performance recordings and can give you additional information in the report. Click Capture settings to access the Capture settings menu.

Select the following options from the Capture settings menu:

Analyze a performance report

See Analyze a performance recording for a complete guide on how to use the Performance panel.

The following presents a grouping of topics from the guide, plus other helpful documentation:

To learn how to navigate the report:

To learn how to focus on what matters for your workflow:

To learn about the Bottom-up, Call tree, and Event log tabs:

To learn how to analyze the report:

Improve performance with these panels

Discover other panels that can help you improve your website's performance: