Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Use the Performance tool to analyze your website's performance. There are two main views:
- The home page shows local metrics as you interact with the current webpage.
- Record a profile and view a performance timeline.
Detailed contents:
For a walkthrough of using the Performance tool to improve your website's performance, see Analyze runtime performance (tutorial).
Overview
The Performance tool displays local metrics for page interactions, and lets you record CPU performance profiles of your web applications. Analyze profiles to find potential performance bottlenecks and ways that you can optimize resource use.
Open the Performance tool
To open the Performance tool:
Go to a webpage, such as the Exploring the universe demo, in a new window or tab.
Right-click the webpage, and then select Inspect.
DevTools opens.
In the Activity Bar at top, click the
Performance tool.If the
Performance tool isn't shown in the Activity Bar, click the More tools (
) button and then select the Performance tool.
Using the Command Menu
To open the Performance tool by using the Command Menu:
Go to a webpage, such as the Exploring the universe demo, in a new window or tab.
Right-click the webpage, and then select Inspect.
DevTools opens.
In the upper right of DevTools, click Customize and control DevTools, click Run command.
Or, press:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
The Command Menu opens, and reads Run >Command.
Start typing performance, select Show Performance [panel], and then press Enter.
Local metrics for page interactions
Use the Performance tool to view Core Web Vitals metrics in the initial, Local metrics view. The home page of the Performance tool shows Local metrics, which is performance metrics about the rendered webpage:
- Largest Contentful Paint (LCP) - How quickly the main content of the page loaded.
- Cumulative Layout Shift (CLS) - A measure of the most recent unexpected page layout shift.
- Interaction to Next Paint (INP) - The responsiveness of the most recent user interaction on the page.
When you initially open the Performance tool, Core Web Vitals metrics are displayed, in three cards in a Local metrics section:
Recorded profile timeline
Also use the Performance tool to view a recorded performance trace, including:
- Record a performance profile.
- Change capture settings.
- Analyze a performance report. Shows information about the performance of the page over the period of time where the recording occurred, such as:
- The user interactions that occurred during the recording.
- The JavaScript code that ran.
- The styling and layout operations that occurred.
- Other performance metrics over time, such as network requests and layout shifts.
After you record a performance trace, the performance trace is displayed instead of Local metrics.
Switching to viewing local metrics or another profile
To switch to displaying the initial, Local metrics view, click the Go back to the live metrics page (
) button.
To switch to displaying a different opened recorded profile timeline, click the Show recent timeline sessions dropdown, to the right of the Go back to the live metrics page () button.
Monitor Core Web Vitals metrics
Use the Performance tool to view Core Web Vitals metrics in the initial, Local metrics view. The home page of the Performance tool shows Local metrics, which are performance metrics about the rendered webpage:
- Largest Contentful Paint (LCP) - How quickly the main content of the page loaded.
- Cumulative Layout Shift (CLS) - A measure of the most recent unexpected page layout shift.
- Interaction to Next Paint (INP) - The responsiveness of the most recent user interaction on the page.
Terminology
| Term | Description | Docs |
|---|---|---|
| Web Vitals | A large set of metrics giving unified guidance to delivering a great user experience on the web. | Web Vitals |
| Core Web Vitals | The subset of Web Vitals that apply to all web pages, and should be measured by all site owners. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. | Core Web Vitals in Web Vitals |
| Largest Contentful Paint (LCP) | Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. The render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page. | Largest Contentful Paint (LCP), Optimize LCP |
| Cumulative Layout Shift (CLS) | Measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less. The largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. | Cumulative Layout Shift (CLS), Optimize CLS |
| Interaction to Next Paint (INP) | Measures interactivity. To provide a good user experience, pages should have a INP of 200 milliseconds or less. The page's overall responsiveness to user interactions, based on the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. | Interaction to Next Paint (INP), Optimize INP |
| local metrics, local data | The LCP, CLS, and INP metrics. They are captured locally on the inspected webpage, and are updated as you interact with the page. |
Use the demo page
To produce a poor or needs improvement metric on the LCP, CLS, and INP cards in the Performance tool:
Open a webpage, such as the Exploring the universe demo, in a new window or tab.
The Exploring the universe demo page is designed to load and handle interactions slowly on purpose, in order to illustrate how the LCP, CLS, and INP metrics can be used in the Performance tool to identify and fix performance issues.
Right-click the webpage and then select Inspect.
DevTools opens.
In the Activity Bar at top, select the
Performance tool.If the
Performance tool isn't shown in the Activity Bar, click the More tools () button and then select the Performance tool.Maximize the window, and make the demo page pane wide, such as 60% of the width of the window.
If the demo page pane is too narrow, some cards might continue showing good, with a green value, which is not the intended result.
Select Next steps pane > Environment settings card > CPU throttling dropdown > select 4x slowdown - recommended.
Or, select Capture settings (
) > CPU throttling dropdown > 4x slowdown - recommended.Select Next steps pane > Environment settings card > Network throttling dropdown > select Slow 4G.
Select Next steps pane > Environment settings card > select the Disable network cache checkbox.
Right-click (or long-click) the Refresh button to the left of the Address bar, and then select Empty cache and hard refresh.
This ensures that the image is loaded again from the server, rather than from the local cache.
The LCP and CLS cards show an orange value and needs improvement, or a red value and poor, instead of a green value and good.
If the LCP or CLS card remains green and says good after the galaxy image finishes rendering, maximize the window and make the demo page pane wider.
The LCP card shows that the galaxy image took a long time to load. The card shows an orange value and needs improvement, or a red value and poor, instead of a green value and good. The engine identifies this image as the largest item to be rendered.
In the LCP card, hover over the metric value to see information in a tooltip.
The CLS card illustrates that sudden, unexpected jumps in the layout can negatively impact users. This is also due to the image taking some time to load. By design, the demo webpage neglects to specify a height for the image, and so the page initially loads without reserving much space for the image. When the image starts appearing, the content below it suddenly jumps down.
In the CLS card, hover over the metric value to see information in a tooltip.
After the galaxy image finishes rendering, in the rendered demo page, click one of the headings in the right-hand Discoveries column, such as Heliocentric Theory (1543).
The INP card changes from not showing a value, to showing an orange value and needs improvement, or a red value and poor. An INP value is displayed.
In the INP card, hover over the metric value to see information in a tooltip.
In the INP card, click the INP value.
In the demo page, the Discoveries cards are designed to expand and re-render slowly, so that it takes a long time between clicking the heading and rendering the expanded card content. The delay is a random value between 100ms and 1000ms, resulting in a high INP value.
Below the Local metrics cards, the Interactions tab and Layout shifts tabs are populated.
Interactions tab
The Interactions tab displays information about your interactions with the webpage:
The Interactions tab includes:
- Phases.
- Elements.
- Timings.
To clear the Interactions tab, click the Clear the current log (
) button to the right of the Interactions tab.
Layout shifts tab
The Layout shifts tab displays information about layout shifts:
The Layout shifts tab includes:
- Scores.
- Elements.
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 tool gives you the following options:
- Record runtime performance in Performance features reference.
- Record load performance in Performance features reference.
- Capture screenshots while recording in Performance features reference.
- Force garbage collection while recording in Performance features reference.
- Save and share a recording in Performance features reference.
- Load a recording in Performance features reference.
- Clear the previous recording in Performance features reference.
Change capture settings
Capture settings let you change how DevTools captures performance recordings and can give you additional information in the report. Click the Capture settings (
) button to access the Capture settings menu.
Select the following options from the Capture settings menu:
Select the Disable JavaScript samples checkbox: Disables the recording of the JavaScript call stacks displayed in the Main track that are called during the recording. Reduces performance overhead. See Disable JavaScript samples in Performance features reference.
Select the Enable advanced rendering instrumentation (slow) checkbox: Captures advanced paint instrumentation. Significantly hinders performance. See Enable advanced paint instrumentation in Performance features reference.
Select the Enable CSS selector stats (slow) checkbox: Captures CSS selector statistics. Significantly hinders performance. See View CSS selector costs in the Performance tool sidebar in What's New in DevTools (Microsoft Edge 131).
CPU throttling: Simulate slower CPU speeds. See Throttle the CPU while recording in Performance features reference.
Network throttling: Simulate slower network speeds. See Throttle the network while recording in Performance features reference.
Analyze a performance report
For a complete guide on how to use the Performance tool, see Analyze a performance recording in Performance features reference.
To navigate a performance report:
See Navigate the recording in Performance features reference.
See Search activities in Performance features reference.
See Track event initiators in Performance features reference.
To focus on what matters for your workflow:
Zoom on portions of a recording and switch between zoom levels in Performance features reference.
To learn about the Bottom-up, Call tree, and Event log tabs:
- View activities in a table in Performance features reference.
To analyze a performance report:
- View main thread activity in Performance features reference.
- Read the flame chart in Performance features reference.
- View a screenshot in Performance features reference.
- View memory metrics in Performance features reference.
- View the duration of a portion of a recording in Performance features reference.
- Analyze CSS selector performance during Recalculate Style events.
- Analyze frames per second (FPS) in Performance features reference.
- Performance recording event reference
Improve performance with these tools
Discover other tools that can help you improve your website's performance:
| Tool | Article |
|---|---|
| Lighthouse tool | Optimize website speed using Lighthouse |
| Memory tool | Fix memory problems |
| Performance tool > Insights tab | Get actionable insights in Performance features reference. |
| Rendering tool | Rendering tool, to see what a webpage looks like with different display options or vision deficiencies |
| Issues tool | Find and fix problems using the Issues tool |
| Performance tool | View layers information in Performance features reference |
Note
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Dale St. Marthe and Sofia Emelianova.
This work is licensed under a Creative Commons Attribution 4.0 International License.