You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- covers basic nav between the two states, and what to use them for, not how to use either view -->
51
54
52
-
The **Performance** tool lets you record CPU performance profiles of your web applications. Analyze profiles to find potential performance bottlenecks and ways you can optimize resource use.
55
+
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.
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:
58
+
59
+
* Largest Contentful Paint (LCP) - How quickly the main content of the page loaded.
60
+
* Cumulative Layout Shift (CLS) - A measure of the most recent unexpected page layout shift.
61
+
* Interaction to Next Paint (INP) - The responsiveness of the most recent user interaction on the page.
62
+
63
+
When you initially open the **Performance** tool, Core Web Vitals metrics are displayed, in three cards in a **Local metrics** section:
56
64
57
-
Use the **Performance** tool to do the following:
65
+
<!--do not reuse -->
58
66
59
-
* View local Core Web Vitals metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP).
67
+
To switch to displaying an opened recorded profile timeline, click the **Show recent timeline sessions** dropdown, to the right of the **Go back to the live metrics page** () button.
68
+
69
+
Also use the **Performance** tool to view a recorded performance trace, including:
60
70
* Record a performance profile.
61
71
* Change capture settings.
62
-
* Analyze a performance report.
72
+
* Analyze a performance report. Shows information about the performance of the page over the period of time where the recording occurred, such as:
73
+
* The user interactions that occurred during the recording.
74
+
* The JavaScript code that ran.
75
+
* The styling and layout operations that occurred.
76
+
* Other performance metrics over time, such as network requests and layout shifts.
77
+
78
+
After you record a performance trace, the performance trace is displayed instead of **Local metrics**.
79
+
80
+
The **Show recent timeline sessions** dropdown, to the right of the **Go back to the live metrics page** () button, enables switching between **Local metrics** (Core Web Vitals) and multiple recorded performance traces (also called _profiles_ or _timeline sessions_).
63
81
64
-
When you initially open the **Performance** tool, Core Web Vitals metrics are displayed, in three cards in a **Local metrics** section. After you record a performance trace, the performance trace is displayed instead of Core Web Vitals. A dropdown menu enables switching between Core Web Vitals (**Local metrics**) and multiple recorded performance traces.
82
+
<!-- do not reuse -->
65
83
66
-
For a comprehensive guide on improving your website's performance, see [Analyze runtime performance (tutorial)](./index.md).
84
+
To switch to displaying the initial, **Local metrics** view, click the **Go back to the live metrics page** () button.
85
+
86
+
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.
87
+
88
+
For a walkthrough of using the **Performance** tool to improve your website's performance, see [Analyze runtime performance (tutorial)](./index.md).
@@ -72,11 +94,13 @@ For a comprehensive guide on improving your website's performance, see [Analyze
72
94
73
95
To open the **Performance** tool:
74
96
75
-
1. Right-click a webpage,<!-- https://microsoftedge.github.io/Demos/devtools-performance-get-started/ --> and then select **Inspect**.
97
+
1. Go to a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab.
98
+
99
+
1. Right-click the webpage, and then select **Inspect**.
76
100
77
101
DevTools opens.
78
102
79
-
1. In the **Activity Bar** at top, select the **Performance** tool.
103
+
1. In the **Activity Bar** at top, click the **Performance** tool.
80
104
81
105
If the **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** () button and then select the **Performance** tool.
82
106
@@ -85,36 +109,34 @@ To open the **Performance** tool:
85
109
#### Using the Command Menu
86
110
<!-- added heading as separator, compared to upstream -->
87
111
88
-
Or, open the **Performance** tool by using the **Command Menu**, as follows:
112
+
To open the **Performance** tool by using the **Command Menu**:
89
113
90
-
1. Right-click a webpage, and then select **Inspect**.
114
+
1. Go to a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab.
115
+
116
+
1. Right-click the webpage, and then select **Inspect**.
91
117
92
118
DevTools opens.
93
119
94
-
1. Open the **Command Menu** by pressing:
120
+
1. In the upper right of DevTools, click **Customize and control DevTools**, click **Run command**.
121
+
122
+
Or, press:
95
123
96
124
* macOS: **Command+Shift+P**
97
125
* Windows, Linux, ChromeOS: **Control+Shift+P**
98
126
99
-
127
+
The **Command Menu** opens, and reads **Run >Command**.
100
128
101
129
1. Start typing **performance**, select **Show Performance [panel]**, and then press **Enter**.
102
130
131
+
<!-- ## Observe Core Web Vitals live https://developer.chrome.com/docs/devtools/performance/overview#live-metrics -->
137
+
<!-- details about using this view -->
107
138
108
-
The home page of the **Performance** tool shows performance metrics about the rendered webpage, such as:
109
-
* Largest Contentful Paint (LCP), which shows how quickly the main content of the page loaded.
110
-
* Cumulative Layout Shift (CLS), which shows a measure of the most recent unexpected layout shift.
111
-
* Interaction to Next Paint (INP), which assesses the responsiveness of the most recent user interaction on the page.
112
-
113
-
In contrast, a recorded performance trace shows information about the performance of the page over the period of time where the recording occurred, such as:
114
-
* The user interactions that occurred during the recording.
115
-
* The JavaScript code that ran.
116
-
* The styling and layout operations that occurred.
117
-
* Other performance metrics over time, such as network requests and layout shifts.
139
+
To view **Local metrics** (Core Web Vitals metrics) instead of a profile, see [Switch between Local metrics view and recorded profile timeline view](#switch-between-local-metrics-view-and-recorded-profile-timeline-view), above.
118
140
119
141
120
142
<!-- ---------------------------------- -->
@@ -145,13 +167,25 @@ To get a breakdown of a metric score, hover over the metric value to see a toolt
145
167
146
168
To interact with a webpage to display the **Interaction to Next Paint (INP)** card:
147
169
148
-
1. Open the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo in a new window or tab.
170
+
1. Open a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab.
149
171
150
-
1. Right-click the webpage and then select **Inspect** to open DevTools, and then select the **Performance** tool.
172
+
1. Right-click the webpage and then select **Inspect**.
173
+
174
+
DevTools opens.
175
+
176
+
1. In the **Activity Bar** at top, click the **Performance** tool.
177
+
178
+
If the **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** () button and then select the **Performance** tool.
0 commit comments