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:
- Open DevTools.
- Open the Command menu by pressing:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- 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:
In Performance > Next steps > Field data, click Set up.
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:
- In the dialog window, expand the Advanced section and click + New.
In the mapping table, enter your development and production URLs and click +.
For example, a mapping of
http://localhost:8080
tohttps://example.com
will bring up field data forexample.com/page1
when you navigate tolocalhost: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.
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:
In each metric card, expand the Consider your local test conditions section, if any, and read the recommendations.
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.
To match the environment configuration for this example:
- 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.
- 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.
- 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.
With your environment configured, reload the page, interact with it to capture your local INP, and compare the metric scores again.
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:
- Record runtime performance
- Record load performance
- Capture screenshots while recording
- Force garbage collection while recording
- Save a recording
- Load a recording
- Clear a recording
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:
- Disable JavaScript samples: Disables the recording of the JavaScript call stacks displayed in the Main track that are called during the recording. Will reduce performance overhead.
- Enable advanced paint instrumentation (slow): Captures advanced paint instrumentation. Significantly hinders performance.
- Enable CSS selector stats (slow): Captures CSS selector statistics. Significantly hinders performance.
- CPU throttling: Simulate slower CPU speeds.
- Network throttling: Simulate slower network speeds.
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:
- Change the order of tracks and hide them
- Hide functions and their children in the flame chart
- Create breadcrumbs and jump between zoom levels
To learn about the Bottom-up, Call tree, and Event log tabs:
To learn how to analyze the report:
- View main thread activity
- Read the flame chart
- View a screenshot
- View memory metrics
- View the duration of a portion of a recording
- Analyze CSS selector performance during Recalculate Style events
- Profile Node.js performance with the Performance panel
- Analyze frames per second (FPS)
- Timeline event reference
Improve performance with these panels
Discover other panels that can help you improve your website's performance: