Analyze runtime performance

Kayce Basques

Runtime performance is how your page performs when it is running, as opposed to loading. This tutorial teaches you how to use the Chrome DevTools Performance panel to analyze runtime performance. In terms of the RAIL model, the skills you learn in this tutorial are useful for analyzing the Response, Animation, and Idle phases of your page.

Get started

In this tutorial, we will use the Performance panel to find a performance bottleneck on a live page. To begin:

Open Google Chrome in Incognito Mode. Incognito Mode ensures that Chrome runs in a clean state. For example, if you have a lot of extensions installed, those extensions might create noise in your performance measurements.
Load the following page in your Incognito window. This is the demo that you're going to profile. The page shows a bunch of little blue squares moving up and down.

https://googlechrome.github.io/devtools-samples/jank/
Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools.

Note: For the rest of the screenshots, DevTools is undocked to a separate window so that you can see its contents better.

Simulate a mobile CPU

Mobile devices have much less CPU power than desktops and laptops. Whenever you profile a page, use CPU Throttling to simulate how your page performs on mobile devices.

In DevTools, click the Performance tab.
Make sure that the Screenshots checkbox is enabled.
Click Capture Settings . DevTools reveals settings related to how it captures performance metrics.
For CPU, select 4x slowdown. DevTools throttles your CPU so that it's 4 times slower than usual.

Note: When testing other pages, if you want to ensure that they work well on low-end mobile devices, set CPU Throttling to 20x slowdown. This demo doesn't work well with 20x slowdown, so it just uses 4x slowdown for instructional purposes.

Set up the demo

It's hard to create a runtime performance demo that works consistently for all readers of this website. This section lets you customize the demo to ensure that your experience is relatively consistent with the screenshots and descriptions you see in this tutorial, regardless of your particular setup.

Keep clicking Add 10 until the blue squares move noticeably slower than before. On a high-end machine, it may take about 20 clicks.
Click Optimize. The blue squares should move faster and more smoothly.

Note: If you don't see a noticeable difference between the optimized and un-optimized versions, try clicking Subtract 10 a few times and trying again. If you add too many blue squares, you're just going to max out the CPU and you're not going to see a major difference in the results for the two versions.
Click Un-Optimize. The blue squares move slower and with more jank again.

Record runtime performance

When you ran the optimized version of the page, the blue squares move faster. Why is that? Both versions are supposed to move each square the same amount of space in the same amount of time. Take a recording in the Performance panel to learn how to detect the performance bottleneck in the un-optimized version.

In DevTools, click Record . DevTools captures performance metrics as the page runs.
Wait a few seconds.
Click Stop. DevTools stops recording, processes the data, then displays the results in the Performance panel.

Wow, that's an overwhelming amount of data. Don't worry, it'll make more sense shortly.

Analyze the results

Once you have a performance recording, you can analyze just how poor the page's performance is, and find the cause(s).

Analyze frames per second

The main metric for measuring the performance of any animation is frames per second (FPS). Users are happy when animations run at 60 FPS.

Look at the FPS chart. Whenever you see a red bar above FPS, it means that the framerate dropped so low that it's probably harming the user experience.