![Dale St. Marthe](https://web.dev/images/authors/dalestmarthe.jpg) Dale St. Marthe [LinkedIn](https://www.linkedin.com/in/dale-st-marthe)

<br />

Use the **Performance monitor** to quickly get an idea of your site's load and runtime performance.

## Overview

The **Performance monitor** panel displays a timeline that graphs performance metrics in real-time. Click a metric to show or hide it. Then see how the graph changes as you interact with your app.

![The Performance monitor panel.](https://developer.chrome.com/static/docs/devtools/performance-monitor/image/performance-monitor-screenshot.png)

The performance monitor tracks the following metrics:

- CPU usage.
- JavaScript heap size.
- The total number of DOM nodes, JavaScript event listeners, documents, and frames on the page.
- Layouts and style recalculations per second.

## Open the Performance monitor panel

To open the **Performance monitor** panel:

1. [Open DevTools](https://developer.chrome.com/docs/devtools/open).
2. Open the **Command menu** by pressing:
   - macOS: <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>
   - Windows, Linux, ChromeOS: <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> ![Command Menu with](https://developer.chrome.com/static/docs/devtools/performance-monitor/image/command-menu-performance-monitor.png)
3. Start typing `Performance monitor`, select **Show Performance monitor** , and press <kbd>Enter</kbd>. DevTools displays the **Performance monitor** panel at the bottom of your DevTools window.

Alternatively, in the top right corner, select **More options** \> **More tools** \> **Performance monitor**.

## Use the Performance monitor panel

The **Performance monitor** gives a general idea of your website's runtime performance.

Observing how metric values change as you interact with your website can reveal opportunities for improvement.

A useful feature of the **Performance monitor** is that it persists throughout page navigation. So, as frontend developer, you can avoid issues like [layout thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing) by opening the **Performance monitor** , scrolling through their website, and keeping an eye on the **DOM Nodes** and **Layout/sec** metrics.

If users are reporting sluggish load times on your site, the **Performance monitor** can help you identify problem areas.

For example, a large spike in **CPU usage** can point to inefficient code. And generally, if a page contains a high number of **JS event listeners** then it may be beneficial to refactor your code and reduce those numbers to free up memory.

If you're just starting out with analyzing performance, the recommended path is to first use the **Lighthouse** panel, and then investigate further using the **Performance** panel or **Performance monitor**.