Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect JavaScript ArrayBuffer Network conditions: Override the user agent string Recorder: Record, replay and measure user flows Security: Understand security issues WebAuthn: Emulate authenticators
Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect JavaScript ArrayBuffer Network conditions: Override the user agent string Recorder: Record, replay and measure user flows Security: Understand security issues WebAuthn: Emulate authenticators

Performance insights: Get actionable insights on your website's performance

Published on

Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

This is a preview feature in Chrome 102. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Why a new panel?

The new Performance insights panel is an experiment to address these 3 developer pain points when working with the existing Performance panel:

  • Too much information. With the redesigned UI, the Performance insights panel streamlines the data shown on screen, displaying only relevant information.
  • Hard to distinguish between use cases. The Performance insights panel supports use-case-driven analysis. It only supports page load use-case at the moment, with more to come (e.g. interactivity) in the future based on your feedback.
  • Requires deep expertise of how browsers work to use effectively. The Performance insights panel highlights the key insights in the Insights pane, with actionable feedback on how to fix it.

Introduction

This tutorial teaches you how to measure and understand your page load performance with the Performance insights panel. Read on, or watch the video version of this tutorial, above.

Open the Performance insights panel

  1. Open DevTools.

  2. Click on More options   More   > More tools > Performance insights.

    Performance insights in the menu

    Alternatively, use the Command Menu to open the Performance insights panel.

    Show Performance insights command in the Command menu

Record performance

The Performance insights panel supports record general and use-case-driven (e.g. page load) performance.

  1. Click [Open Demo]. The demo opens in a new tab. Open Demo

  2. You can throttle the network and CPU while recording. For the tutorial, let’s set disable cache and set CPU to 4x slowdown:

    Throttling
    Gotchas

    Throttling is relative to your computer's capabilities. For example, the 4x slowdown option makes your CPU operate 4 times slower than its usual ability. DevTools can't truly simulate the CPUs of mobile devices, because the architecture of mobile devices is very different from that of desktops and laptops.

  3. Click Measure page load. DevTools records performance metrics while the page reloads and then automatically stops the recording a couple seconds after the page load has finished.

    Start options
    Gotchas

    If you want to measure general performance of your web page, use Start recording. Interact with the page and click Stop recording manually to stop recording.

Replay a performance recording

Use the controls at the bottom to control the replay of your recording.

replay controls

Here is an example of how to do it.

  • Click Play to play the recording.
  • Click Pause to pause the replay.
  • Adjust the playback speed with the dropdown.
  • Click Toggle visual preview to show or hide the visual preview.

DevTools automatically zooms out to show the full recording timeline. You can navigate the recording with zoom and move the timeline.

  • Click on the Timeline to move the playhead to view a particular frame.
  • Use the Zoom in and Zoom out control at the bottom to zoom.
  • Drag the horizontal scroll bar at the bottom to move the timeline left and right.
  • Alternatively, you can use keyboard shortcuts to zoom, move the timeline left and right. Click on the ? button to view the shortcuts.
keyboard shortcuts

View performance insights

Get a list of performance insights in the Insights pane. Identify and fix potential performance issues.

Insights pane

Hover over each of the insights to highlight them on the main tracks.

Click on an insight (e.g. Rendering block request) to understand it further in the Details pane - source file, issue, how to fix it and more.

Insight details

View Web Vitals performance metrics

Web Vitals is is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

You can view these metrics on the Timeline and Insights pane.

View Web Vitals performance metrics

Hover over the insights on the Timeline to learn more about the metrics.

View layout shifts activity

View layout shifts activity in the Layout Shifts track.

Layout Shifts track

Layout shifts are grouped in session window. In the example above, there are 2 session windows. There are gaps between session windows.

Gotchas

Think about layout shifts like fireworks, there are times where multiple shifts happen at once, then it pauses for a while, and multiple shifts happen. Each set of multiple shifts is a session window. For more information, see Session window.

session window and gap

Cumulative Layout Shifts (CLS) is one of the core web vitals metrics. Use the Layout Shifts track to identify potential layout shifts issues and causes.

Always start with the largest session window when improving CLS metric. In our example, session window 1 is the largest session window, based on the background color and level.

CLS

Click on a screenshot to view the layout shift’s details, identify potential root causes and impacted elements.

View the layout shift’s details

In our example, the potential root cause is unsized media. See Optimize Cumulative Layout Shift to learn more about how to fix it.

identify potential root causes

Understand layout shifts score

In the Details pane, use the Window section to understand how the scores are calculated. The Window shows which session window the current layout shift belongs to.

The maximum score of each layout shift is 1, if the whole page is shifted. In our example, the first layout shift scored 0.15. The second layout shift scored 0.041.

Understand layout shifts score

The total score for this session window is 0.19. Based on the CLS threshold, it needs improvement. The session window background color reflects the same.

CLS threshold

The session window background graph is increased over time. It is reflect the cumulative score of the layout shift at that point of time.

session window background graph

View network activity

View network activity in the Network track. You can expand the network track to view all the network activities and click on each item to view the details.

View network activity

View renderer activity

View render activity in the Renderer track. You can expand each renderer to view the activities and click on each item to view the details.

View renderer activity

View GPU activity

View GPU activity in the GPU track. The GPU track is hidden by default, enabling that in the settings.

View GPU activity

Customize the UI

Click Settings to customize the Timeline and Tracks.

Settings

Export a recording

To save a recording, click Export.

Export a recording

Import a recording

To load a recording, select Import.

Import a recording

Delete a recording

After making a recording, press Delete to clear that recording from the panel.

Delete the recording

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.