Chrome DevTools: New performance metrics with the Performance Monitor
Last updated: 21st September 2019
The DevTools Performance Monitor features a live-updating visualisation which highlights performance bottlenecks in your page. As you interact with the page (scrolling, navigating etc.), the visualisation updates along with it.
The Performance Monitor is a great starting point for a high-level performance overview. Unexpected spikes (e.g. a spike in CPU usage when you scroll the page) can then be investigated further with the Performance Panel.
You can open the Performance Monitor by searching for 'Show Performance Monitor' in the DevTools Command Menu (Cmd + Shift + P).
The performance metrics (the categories on the left side) can be toggled on and off, which can help make the visualisation digestible. These categories are:
- CPU Usage
- JS Heap Size
- DOM Nodes
- JS Event Listeners
- Documents
- Document Frames
- Layouts
- Style Recalculations