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

Sofia Emelianova
Sofia Emelianova

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

Overview

The Performance insights panel lets you do the following:

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 and displays 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 in the future based on your feedback, for example, interactivity.
  • 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 issues.

Introduction

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

Open the Performance insights panel

  1. Open DevTools.
  2. Click on More options > 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 can record general and use-case-driven (for example, page load) performance.

  1. Open this demo page in a new tab and, on the page, open the Performance insights panel.
  2. You can throttle the network and CPU while recording. For this tutorial, check Disable cache and set CPU to 4x slowdown in the drop-down menu:

    Throttling.

  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.

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 drop-down.
  • 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.

To zoom and move the timeline left and right, use the corresponding navigation buttons:

  • Click on the Timeline to move the playhead to view a particular frame.
  • Click the Zoom in and Zoom out controls at the bottom to zoom. In this case, you zoom based on the playhead.
  • Drag the horizontal scroll bar at the bottom to move the timeline left and right.

Alternatively, you can use keyboard shortcuts. Click on the button to view the shortcuts. Keyboard shortcuts.

When using shortcuts, you zoom based on your mouse cursor.

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, for example, the render blocking request, to open it in the Details pane. To understand the issue further, examine its File, Issue, How to fix sections, and more.

Insight details.

View Web Vitals performance metrics

Web Vitals 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.

Discover delays of the largest contentful paint

Largest Contentful Paint (LCP) is one of the Core Web Vitals metrics. It reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

LCP thresholds.

A good LCP score is 2.5 seconds or less.

If the largest contentful paint on your page takes longer to render, in the timeline, you will see the LCP badge with a yellow square or red triangle.

The LCP badge.

To open the Details pane, click the LCP badge on the timeline or on the Insights pane on the right. In the pane, you can discover potential causes for the delays and suggestions on how to fix them.

The details pane.

In this example, a request blocks rendering and you can apply critical styles inline to fix it. To learn more, see Eliminate render-blocking resources.

To view the sub-parts of LCP render time, scroll down to the Details > Timings breakdown section.

Timings breakdown.

LCP render time consists of the following sub-parts:

LCP sub-part Description
Time to first byte (TTFB) The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response.
Resource load delay The delta between TTFB and when the browser starts loading the LCP resource.
Resource load time The time it takes to load the LCP resource itself.
Element render delay The delta between when the LCP resource finishes loading until the LCP element is fully rendered.

If an LCP element doesn't require a resource load to render, the resource load delay and time are omitted. For example, in case the element is a text node rendered with a system font.

View layout shifts activity

View layout shifts activity in the Layout Shifts track.

Layout Shifts track.

Layout shifts are grouped in a session window. In the example, there are two session windows. Session windows have gaps between them.

Session window and gap.

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

Always start with the largest session window when improving CLS metric. In our example, session window 1 is the largest 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. To learn how to fix it, see Optimize Cumulative Layout Shift.

identify potential root causes.

Understand layout shifts score

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

If the whole page is shifted, the maximum score of each layout shift is 1. 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 increases over time. The Cumulative score of the layout shift reflects the increase at that point of time.

Cession 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. To enable it, check GPU in Settings.

View GPU activity.

View user timings

To get custom performance measures, you can use User Timing and visualize your timings with the Timing track. For more information, see the User timing API.

Check out this demo page that calculates the elapsed time of text loading.

To view user timings:

  1. Mark places in your application with performance.mark().
  2. Measure the elapsed time between marks with performance.measure().
  3. Record performance.
  4. View the measurements on the Timings track. If you can't see the track, check User timings in Settings.
  5. To view details, click the timing on the track. The Timings track.

Customize the UI

To customize the Timeline and Tracks, click the panel's Settings icon and check the options you prefer.

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

To delete a recording:

  1. Click Delete. A confirmation dialog opens. Delete the recording.
  2. In the dialog, click Delete to confirm the deletion.