Runtime Performance refers to how your page performs when the browser is running, not when the page is being downloaded. This guide will show you how to use Chrome DevToos Performance to analyze runtime Performance. In the RAIL performance evaluation model, you can learn how to use the performance function to analyze Response, Animation and Idle performance indicators in this guide.

Let’s get started

In this tutorial, we will analyze an existing online DEMO using the Performance tool and show you how to analyze it to find Performance bottlenecks.

  1. Open Anonymous mode in Chrome. Anonymous mode keeps Chrome running in a relatively clean environment. For example, if you have a number of Chrome plug-ins installed, these plug-ins may affect our performance analysis.

  2. In anonymous mode, open the link on the right, DEMO, and this page is the DEMO we’re going to analyze. This page is full of little blue squares moving up and down.

  3. Press Command+Opiton+I (Mac) or Control+ Shift +I (Windows, Linux) to open Devtools

Simulate the CPU of a mobile device

Mobile devices typically have much weaker cpus than desktops and laptops. When you want to analyze a page, you can use CPU Throttling to simulate a mobile device CPU.

  1. In DevTools, click the TAB for Performance.
  2. Make sure Screenshots Checkbox is checked
  3. Click the Capture Settings (⚙️) button and DevTools displays a number of Settings to simulate various situations
  4. For the analog CPU, select 2x Slowdown, and Devtools begins to simulate the 2x low grade CPU

Set up the DEMO

In order for this DEMO to have relatively uniform performance (different audience, machine performance varies greatly). The DEMO provides customizations to ensure consistent performance.

  1. Keep clicking on the Add 10 button until you can see that the little blue box is slowing down, about 20 times on better machines.

  2. Click the Optimize button, and you’ll see the blue cubes change quickly and the animation becomes smooth.

  3. Click the UN-optimize button, and the blue box will be the same again.

Record runtime performance

In the previous DEMO, when you run optimization mode, the blue squares move very fast. Why is that? Both modes move the same number of cubes in the same amount of time. Now let’s record everything that happens in the Performance screen and learn how to analyze this record to find Performance bottlenecks in non-optimized mode.

  1. In DevTools, click Record. At this point Devtools starts recording various performance metrics

  2. Wait a few minutes

  3. Click the Stop button, Devtools stops recording, processes the data, and displays the performance report

Wow, it looks like a lot of data, don’t be afraid, let’s go through it one by one

Analysis report

Once you have a performance report for your page, you can use it to analyze your page’s performance to find performance bottlenecks.

Analyze frames per second

FPS (Frames per second) is a major performance metric used to analyze animation. If you can keep it at 60 FPS, then the user experience is good.

  1. Look at the FPS chart, and if you see a long red bar, then there is a serious problem with these frames, which can lead to a very poor user experience. In general, the higher the green bar, the higher the FPS and the better the user experience.

  2. Just below the FPS chart, you’ll see the CPU chart. The colors in the CPU chart correspond to the colors in the Summary panel, which is just below the Performance panel. The various colors in the CPU chart represent the amount of time the CPU spent on various processes during that time period. If you see a process taking up a lot of time, that could be a clue to a performance bottleneck.

  3. Hover the mouse over the FPS, CPU, or NET chart and DevToos will show a screenshot of the interface at that point in time. Move the mouse left and right, you can replay the screen video. This is called scrubbing, and it can be used to analyze the details of animation.

  4. In the Frames chart, move the mouse over the green bar and Devtools displays the FPS for that frame. Every frame might be below 60, and none of them would meet the 60 threshold.

Of course, this is a fairly easy DEMO to observe performance issues. But in real-world scenarios, it’s not so easy to observe. Use these tools frequently to analyze pages.

Small feature: Display real-time FPS panel

Another handy gadget is the live FPS panel, which displays the FPS metrics of a page in real time

  1. Press Command+Shift+P (Mac) or Control+Shift+P(Windows, Linux) to open the Command menu

  2. Enter Rendering and click Show Rendering

  3. Activate the FPS Meter in the Rendering panel. The FPS live panel appears at the top right of the page.

  4. To turn off the FPS Meter, just press Escape. This feature is not currently available in this guide.

Locate bottlenecks

Now that we know that the animation performance to this page is not good, the next step is to find out why

  1. If you look at the Summary panel, you’ll notice that the CPU spends a lot of time on rendering. Because improving performance is the art of subtraction, your goal is to reduce rendering time

  2. Expanding the Main diagram, Devtools shows the Main thread health. The X-axis represents time. Each bar represents an event. The longer the bar, the longer the event takes. The Y-axis represents the Call stack. In the stack, the event above calls the event below.

  3. In performance reporting, there is a lot of data. You can double-click, drag, and so on to zoom in and out of the report, and view the analysis report from a variety of time periods.

  4. If a small red triangle appears in the upper right corner of the event bar, it indicates that the event is problematic and needs special attention.

  5. Double-click the event with the little red triangle. You can see the details in the Summary panel. Note the reveal link. Double-clicking it highlights the event that triggered the event. If you click on the link app.js:94, it will jump to the corresponding code.

  6. Below the bar for the app.update event, there are many purple bars that are triggered. If you zoom in on these event bars, you’ll see that they each have little red triangles. Click on one of the purple event bars, and Devtools displays more information about the event in the Summary panel. Indeed, there are plenty of reflow caveats.

  7. Click the app.js:70 link in the Summary panel and Devtools will jump to the code that needs to be optimized

OK! There are many more metrics to explore in Devtools, but you now have a basic idea of how to use Devtools to analyze the runtime performance of a web page.

Translator’s blog post links