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.
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 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.
- Hardware concurrency: Configure the value reported by the
navigator.hardwareConcurrency.
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: