Analyze runtime performance  |  Chrome DevTools  |  Chrome for Developers (2024)

Analyze runtime performance | Chrome DevTools | Chrome for Developers (1)

Kayce Basques

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

Get started

In this tutorial, you open DevTools on a live page and use the Performance panel to find aperformance bottleneck on the page.

  1. Open Google Chrome in Incognito Mode. Incognito Mode ensures that Chrome runs in a cleanstate. For example, if you have a lot of extensions installed, those extensions might createnoise in your performance measurements.
  2. 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/

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

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (2)

    Figure 1. The demo on the left, and DevTools on the right

Simulate a mobile CPU

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

  1. In DevTools, click the Performance tab.
  2. Make sure that the Screenshots checkbox is enabled.
  3. Click Capture SettingsAnalyze runtime performance | Chrome DevTools | Chrome for Developers (3).DevTools reveals settings related to how it captures performance metrics.
  4. For CPU, select 2x slowdown. DevTools throttles your CPU so that it's 2 times slowerthan usual.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (4)

    Figure 2. CPU throttling, outlined in blue

Set up the demo

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

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

  3. 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? Bothversions are supposed to move each square the same amount of space in the same amount of time. Takea recording in the Performance panel to learn how to detect the performance bottleneck in theun-optimized version.

  1. In DevTools, click RecordAnalyze runtime performance | Chrome DevTools | Chrome for Developers (5). DevTools capturesperformance metrics as the page runs.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (6)

    Figure 3: Profiling the page

  2. Wait a few seconds.

  3. Click Stop. DevTools stops recording, processes the data, then displays the results on thePerformance panel.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (7)

    Figure 4: The results of the profile

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

Analyze the results

Once you've got a recording of the page's performance, you can measure how poor the page'sperformance 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 arehappy when animations run at 60 FPS.

  1. Look at the FPS chart. Whenever you see a red bar above FPS, it means that the frameratedropped so low that it's probably harming the user experience. In general, the higher the greenbar, the higher the FPS.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (8)

    Figure 5: The FPS chart, outlined in blue

  2. Below the FPS chart you see the CPU chart. The colors in the CPU chart correspond tothe colors in the Summary tab, at the bottom of the Performance panel. The fact that theCPU chart is full of color means that the CPU was maxed out during the recording. Wheneveryou see the CPU maxed out for long periods, it's a cue to find ways to do less work.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (9)

    Figure 6: The CPU chart and Summary tab, outlined in blue

  3. Hover your mouse over the FPS, CPU, or NET charts. DevTools shows a screenshot ofthe page at that point in time. Move your mouse left and right to replay the recording. This iscalled scrubbing, and it's useful for manually analyzing the progression of animations.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (10)

    Figure 7: Viewing a screenshot of the page around the 2000ms mark of the recording

  4. In the Frames section, hover your mouse over one of the green squares. DevTools shows youthe FPS for that particular frame. Each frame is probably well below the target of 60 FPS.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (11)

    Figure 8: Hovering over a frame

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

Bonus: Open the FPS meter

Another handy tool is the FPS meter, which provides real-time estimates for FPS as the page runs.

  1. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
  2. Start typing Rendering in the Command Menu and select Show Rendering.
  3. In the Rendering tab, enable FPS Meter. A new overlay appears in the top-right of yourviewport.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (12)

    Figure 9: The FPS meter

  4. Disable the FPS Meter and press Escape to close the Rendering tab. You won't be using itin this tutorial.

Find the bottleneck

Now that you've measured and verified that the animation is not performing well, the next questionto answer is: why?

  1. Note 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, yourgoal is to reduce the amount of time spent doing rendering work.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (13)

    Figure 10: The Summary tab, outlined in blue

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

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (14)

    Figure 11: The Main section, outlined in blue

  3. There's a lot of data in the recording. Zoom in on a single Animation Frame Fired event byclicking, holding, and dragging your mouse over the Overview, which is the section thatincludes the FPS, CPU, and NET charts. The Main section and Summary tab onlydisplay information for the selected portion of the recording.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (15)

    Figure 12: Zoomed in on a single Animation Frame Fired event

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

  5. Click the Animation Frame Fired event. The Summary tab now shows you information aboutthat event. Note the reveal link. Clicking that causes DevTools to highlight the event thatinitiated the Animation Frame Fired event. Also note the app.js:94 link. Clicking thatjumps you to the relevant line in the source code.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (16)

    Figure 13: More information about the Animation Frame Fired event

  6. Under the app.update event, there's a bunch of purple events. If they were wider, it looksas though each one might have a red triangle on it. Click one of the purple Layout eventsnow. DevTools provides more information about the event in the Summary tab. Indeed, there'sa warning about forced reflows (another word for layout).

  7. In the Summary tab, click the app.js:70 link under Layout Forced. DevTools takes youto the line of code that forced the layout.

    Analyze runtime performance | Chrome DevTools | Chrome for Developers (17)

    Figure 13: The line of code that caused the forced layout

Phew! That was a lot to take in, but you now have a solid foundation in the basic workflow foranalyzing runtime performance. Good job.

Bonus: Analyze the optimized version

Using the workflows and tools that you just learned, click Optimize on the demo to enable theoptimized code, take another performance recording, and then analyze the results. From the improvedframerate to the reduction in events in the Main section's flame chart, you can see that theoptimized version of the app does much less work, resulting in better performance.

Next steps

The foundation for understanding performance is the RAIL model. This model teaches you theperformance metrics that are most important to your users. See Measure Performance With The RAILModel to learn more.

To get more comfortable with the Performance panel, practice makes perfect. Try profiling your ownpages and analyzing the results. If you have any questions about your results, open a StackOverflow question tagged with google-chrome-devtools. Include screenshots or links toreproducible pages, if possible.

To become an expert in runtime performance, you've got to learn how the browser translates HTML,CSS, and JS into pixels on a screen. The best place to start is the Rendering PerformanceOverview. The Anatomy Of A Frame dives into even more detail.

Last, there are many ways to improve runtime performance. This tutorial focused on one particularanimation bottleneck to give you a focused tour through the Performance panel, but it's only one ofmany bottlenecks you may encounter. The rest of the Rendering Performance series has a lot of goodtips for improving various aspects of runtime performance, such as:

Analyze runtime performance  |  Chrome DevTools  |  Chrome for Developers (2024)

FAQs

What is Chrome DevTools for performance testing? ›

Chrome DevTools is a powerful tool for analyzing the performance of web applications. By using the network tab, you can identify issues with resources that might slow down page load.

How to check latency in Chrome Developer Tools? ›

Simulate Client-Side latency

In the Chrome Devtools: Go to the "Network Conditions" option > Select the option “Network Throttling” > Set it to “Slow 3G”. If you request your browser to the URL http://localhost:3000/, you'll see a long response time, in our case, ~2 seconds.

How do I measure FPS in Chrome DevTools? ›

Open the Command Menu: type Ctrl+Shift+P (or cmd+Shift+P on mac). Type FPS to display the Show Frames Per Seconds (FPS) Meter command. Press Enter .

How do I use Developer Tools in Chrome for testing? ›

Step to Use Chrome Developer Tools for API Testing

Go to your Chrome Browser > Click on the Right Corner 3 Vertical Dots > More Tools > Developer Tools as shown in the below image. And this is what the Developer tools look like. Adjust the screen as per your convenience.

What is Chrome DevTools used for? ›

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster.

How do I find my chrome performance bottleneck? ›

The Chrome DevTools Performance tab is your secret weapon for identifying and eliminating performance bottlenecks. Let's unlock its potential and make your website fly! Opening the Curtain: Keyboard Shortcut: Summon your performance insights with Ctrl + Shift + P (Windows/Linux) or Cmd + Option + P (Mac).

How do I check my latency performance? ›

Testing network latency can be done by using ping or traceroute (tracert), although, comprehensive network monitoring and performance managers can test and check latency more accurately.

What is throttling in Developer tools? ›

Network Throttling is done to test the website and get first-hand real user experience that many users with slower networks face in real world. This is a way to test the web application under real user conditions and understand the performance of the website.

How do I check my FPS performance? ›

Press Win + G to activate the Game Bar and select the “Performance” tab while in-game to see real-time FPS data. You can customise the counter's appearance, including its position and size, making it hassle-free to monitor your FPS without third-party software.

How do I check Google performance? ›

View the PAGES tab and choose the clicks and CTR metrics. Sort your results by either clicks or CTR. Clicks show which pages get the most traffic from Google Search. CTR measures whether users think that your page answers their question best, based on the search result.

How to check performance of website in Google Chrome? ›

Right-click anywhere on the webpage and select "Inspect" to open the Chrome Developer Tools. Navigate to the "Lighthouse" tab in the panel that appears. Check the "Performance" category and click the "Generate report" button. Lighthouse will run several checks and then provide a detailed report.

How do I find my Chrome performance bottleneck? ›

The Chrome DevTools Performance tab is your secret weapon for identifying and eliminating performance bottlenecks. Let's unlock its potential and make your website fly! Opening the Curtain: Keyboard Shortcut: Summon your performance insights with Ctrl + Shift + P (Windows/Linux) or Cmd + Option + P (Mac).

How do I check my Chromebook performance? ›

You can use the Diagnostics app to check for hardware and connection problems on your Chromebook, like issues with the battery, CPU, memory, or Wi-Fi. Click [Status Bar]① at the bottom-right of the screen, and then click [Settings ]②. Note: Diagnostics is only available on Chrome OS devices that have version 90 and up.

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Virgilio Hermann JD

Last Updated:

Views: 5387

Rating: 4 / 5 (41 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Virgilio Hermann JD

Birthday: 1997-12-21

Address: 6946 Schoen Cove, Sipesshire, MO 55944

Phone: +3763365785260

Job: Accounting Engineer

Hobby: Web surfing, Rafting, Dowsing, Stand-up comedy, Ghost hunting, Swimming, Amateur radio

Introduction: My name is Virgilio Hermann JD, I am a fine, gifted, beautiful, encouraging, kind, talented, zealous person who loves writing and wants to share my knowledge and understanding with you.