Measure runtime performance of a page using the Performance monitor tool
Use the Performance monitor tool to get a real-time view of the runtime performance of a webpage.
The Performance monitor tool helps determine where performance problems come from. There are various reasons why a website might run slowly. This tool provides clues to understand whether the problems are related to causes such as the following:
- High memory or CPU usage.
- Too frequent layout and style calculations.
- Too many DOM nodes and event listeners.
Open the Performance monitor tool
To open the Performance monitor tool:
To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.
In DevTools, on the Activity Bar, select the Performance monitor tab. If that tab isn't visible, click the More Tools () button:
The Performance monitor shows graphs of various performance metrics that update in real time:
Select performance metrics to monitor
The Performance monitor tool shows three performance metrics by default, and additional metrics are available.
|CPU usage||The percentage of CPU used by the web page. Shown by default.|
|DOM Nodes||The number of DOM nodes in the browser (across tabs). Shown by default.|
|Documents||The number of document objects in the browser (across tabs).|
|Document Frames||The number of document frames in the browser (across tabs).|
|Layouts / sec||The number of times per second the browser engine constructs the layout of the page.|
|Style recalcs / sec||The number of times per second the browser engine calculates the CSS style of the page.|
To enable or disable any of the available performance metrics, click the labels in the sidebar: