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:
To open DevTools, right-click the webpage, and then select Inspect. Or, press
I(Windows, Linux) or
I(macOS). DevTools opens.
In DevTools, on the main toolbar, select the Performance monitor tab. If that tab isn't visible, click the More tabs () button, or else 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 side bar.
Submit and view feedback for