Get Started

  • Open 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 you performance meaturements.

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

  • Press Command + Option + I in Mac to open DevTools.

Simulate a Mobile CPU

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

  • In DevTools, click the Performacne tab.

  • Make sure that the Screenshots checkbox is enabled.

  • Click Capture Setting(the gear icon). DevTools reveals settings related to how it captures performances metrics.

  • For CPU, select 2x slowdown. DevTools throttle your CPU so that it’s 2 times slower than usual.

Set up the demo

  • Keep clicking Add 10 until the blue squares move noticeably slower than before.

  • Click Optimize, the blue squares should move faster and more smoothly.

  • 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 version are supposed to move each square the same amount of spaces in the same amount of time. Take a recording in the Performance panel to learn how to detect the performance bottlenect in the un-optimized version.

  • In DevTools, click Record DevTools captures performance metrics as the page run.

Profiling the Page

  • Wait a few seconds

  • Click Stop, DevTools stops recording, processes the data, then displays the results on the Performance panel.

Analyze the results

The main metrics for measuring the performance of any animation is frames per second (FPS). Users are happy when animations runs 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 propably harming the user experience. In general, the highter the green bar, the higher the FPS.

  • Below the FPS chart you see the CPU chart.

The colors in the CPU chart corresponds to the colors in the Summary tab, at the bottom of the Performance panel. The fact that the CPU chart is full of color means that the CPU was maxed out during the recording.

  • Hover your mouse over the FPS, CPU, or NET charts. DevTools shows a screenshot of the page at that point in time. Move your mouse left and right to replay the recoding. This is called srubbing, and it’s useful for manually analyzing the progression of animations.

  • In Frames section, hover your mouse over one of the green squares, DevTools shows you the FPS for that particular frame.

Of course, with this demo, it’s pretty obvious that the page is not performing well. But in real scenarios, it may not be so clear, so having all of these tools to make measurements comes in handy.

Find Bottleneck

the summary tab. When no events are selected, this tab shows you a breakdown of activity. The page spent most of its time rendering. Since performance is the art of doing less work, your goal is to reduce the amount of time spent doing rendering work.

  • Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recoding, over time. Each bar represents an event. A wider bar means that event took longer. The y-axis represents the call stack. When you see events stacked on top of each other, it means the upper events caused the lower events.

  • There’s a lot of data in the recording. Zoom in on a single Animation Frame Field event by clicking, holding, and dragging your mouse over the Overview, which is the section that includes CPU, FPS, and NET charts. The Main section and Summary tab only display information for the selected portion of the recording.

the red triangle in the top-right of the Animation Frame Fired event. Whenever you see a red triangle, it’s a warning that there may be an issue related to this event.

  • Click the Animation Frame Fired event. The Summary tab now shows you information about that event. Note that reveal link. Click that causes DevTools to highlight the event that initiate the Animation Frame Fired event.

  • Under the app.update event, there’s a bunch of purple events. If they were wider, it looks as though each one might have a red triangle on it. Click one of the purple Layout events now. DevTools provides more information about the event in the Summary tab.