React Application Performance Analysis — Part 1

Using Chrome Developer Tools + React Component Profiling

Photo by Alex Holyoake from unsplash.com

Introduction

These days there are many “nightmare” situations faced by web developers and include not just the routine “How am I ever going to meet this deadline?”, but also operational issues such as “The database just crashed and we don’t have a backup!”. What separates a hobbyist from a professional developer is the time you put into determining the risks you face and taking steps to mitigate them (see “Application Development: A Risky Business”).

One common nightmare is the day you realize that “Hey! We now have reached nnnK users! Fantastic!”, only to discover “Oh crap! The application can only support 75% of those users!!! What are we going to do?”. At that point your only viable option is to identify and correct the root cause. If the issue is the result of the application architecture then this may take considerable effort and time. At this point time is the one commodity you don’t have since users will be complaining and abandoning your application — costing you both goodwill and revenue.

As with most types of risk mitigation you need to work to ensure that serious issues don’t occur in the first place, but if they do you must be prepared to quickly address them. This means knowing what tools are available and being familiar with them before they are needed. Just like with astronaut training, web developers can take advantage of repetitive skill practice to mitigate risk by preparing for the inevitable.

In this article we’ll focus on reviewing the tools available for analyzing an application to spot performance bottlenecks, and then discussing how to incorporate their use into development workflows not just to react to issues, but to detect and correct them before they reach critical mass.

In Part 2 we’ll use Chrome Developer Tools and React Component Profiling to analyze a running React application to demonstrate how to find and fix performance issues.

The Tool Box

The two tools we’ll focus on in this discussion are the Performance option of Chrome Developer Tools and React Component Profiling (aka ?react_perf). These are by far not the only tools available, but they are the first you should reach for in your Web Dev toolbox when starting your analysis of a React app.

One additional note is that although the examples below use the Chrome browser other browsers also support comparable developer tools. While Chrome is a good starting point it’s up to you to choose the browser and tool set that best fit your needs.

Chrome Developer Tools — Performance

“Awesome” is an overused superlative in modern culture, but in the case of Chrome Developer Tools its use is justified. These tools enable functionality from withing the Chrome browser which allows the developer to:

• Simulate different types of devices like phones and tablets
• Test responsive and device-specific viewports
• Sensor emulation
• Inspect and edit CSS and the DOM
• Inspect the contents of the console log
• View and debug Javascript code
• View network activity
• Profile Javascript CPU activity
• Identify and fix memory problems
• Debug Progressive web applications
• Inspect and manage storage, databases, and caches
• Inspect and delete cookies
• Inspect resources
• Understand security issues

As you can see this is an extensive list of features and capabilities placed into the hands of the web developer. However, with respect to performance there’s more. The Performance option of Chrome Developer Tools uses application profiling to generate a timeline of events and associated attributes to provide a very detailed picture of application activity and performance at any point in time.

Furthermore, the timeline can be saved and shared to allow collaboration across the team and to support establishing baseline performance for comparison. The baseline creates a reference point that allows you to measure the performance impact of changes against so you can answer questions like “What impact did this change have on performance?” and “If performance was impacted, what was the degree of impact?”.

Using Chrome Developer Tools — Performance

To open the Developer Tools window click on the Customize and Control Chrome button, the three vertical dots on the top right of the Chrome window, and select More Tools →Developer Tools.

Your browser window will now look something like this:

The first thing you’ll notice is the browser window is now divided into two sections — your application panel is on the left and the Developer Tools panel on the right. You might see a different panel arrangement depending on your browser settings, but you’ll be able to distinguish between the two panels.

Key elements of these panels are:

1. Developer Tools contains different task groups and displays information unique to the one that’s currently selected. This bar contains a clickable list of these task groups. The one we are interested in is ‘Performance’, which isn’t shown. However, clicking ‘>>’ will display a list of the remaining groups.
2. The contents of this area is based on the group you have selected. In this case ‘Elements’ displays the pages HTML.
3. The left hand panel contains your application window.
4. Additional information may be displayed in this panel based on which task group you have selected. In this case the CSS style sheet for the application page is shown since we are in the ‘Elements’ task group.
5. You can expand or contract the size of each panel by clicking and dragging on the divider separating your application panel and the Developer Tools panel. As you’ll soon discover this is quite useful since the ‘Performance’ task group contains quite a lot of information and you’ll need more screen space to be able to view and analyze it.

Using Chrome Developer Tools — Profiling Your App

The first step in reviewing your applications performance is to capture a profile of its operation using the profiling option in the Performance task group. Due to the volume of performance data that’s generated you’ll typically want to target a particular screen or set of user actions you want to analyze.

Capturing a performance profile of your application is as simple as clicking on the record button to start collecting performance data, performing a set of actions within the application, and then clicking on the Stop button to halt data collection.

When you stop the collection of performance data Developer Tools will process the performance data, format it, and display the results in the Developer Tools panel.

The visualization of performance data is presented in a set of vertical bands, each describing a particular category of information as described below

1. The timeline band shows when the performance data was captured within bounds of the profile start and end time. This is expressed as the number of milliseconds from the start of the profile.
2. This band shows where time and resources were consumed by the application. Colors in these mini-graphs correspond to an activity shown in the Summary section at the bottom of the panel. As with any graph the height represents the amount of resource consumption.
3. The screenshot band shows the UI state at each point in the timeline. Clicking on a screenshot in this band, or on a point in any of the bands, focuses the display on that point in the timeline. This is helpful for navigating through the performance data when you are conducting a performance analysis.
4. The primary timeline band is divided into 1000ms increments. This band is more granular and shows the time within an increment that an application event occurred.
5. The next six bands represent specific categories of actions and associates them with points in the application which triggered them.
6. The colored bars to the right show how much time was spent in each type of action. This allows you to determine where time was consumed within the application. It is important to note that this includes not just time in the application, but also time in any libraries the application is dependent on. Scrolling in this area will increase or decrease the time interval. Clicking on the arrow next to the name of the band will reveal a more detailed view of the performance data, including the name of the functions the time was spent in.
7. The Summary section at the bottom of the Developer Tools panel shows very broad categories where the application spent the most time. The summary types that can be presented include a general Summary, Bottom-Up, Call Tree, and Event Log which customize the data presented in the bottom part of the Summary section. In the screen shown above Bottom Up is selected forcing the summary section to be sorted in descending sequence by time spent performing a particular type of action. For example, recalculating the page style.

This data is indispensable when analyzing an application’s performance since it identifies where time is being spent. This information can be used to develop a plan for modifying the application to improve performance.

React Performance Visualization

React 15.4.0 introduced the Component Profiling feature which leverages browser developer tools, like those in Chrome, to provide the application developer with React-specific performance data. Component Profiling supplements the information in Developer Tools with additional information to isolate when components were mounted, updated or unmounted.

Component Profiling is enabled by adding the string ?react_perf to the end of any of your applications URLs. This supplements the information in Chrome Developer tools with React-specific data as shown below.

1. When Component Profiling is enabled React-specific lifecycle events are added to the performance data visualization, including function and component names.
2. Summary data is enhanced with additional React-specific categories.

This section may be short compared with the previous section, but in many ways it’s more significant since React-specific data is added to provide more granularity. As a Web Developer this allows you to identify performance changes to your application that will result in more significant improvements in performance.

The Process

Performance tools are important, but how and when you make use of them is more important than the tool itself. This stems from the fact that tools by themselves can accomplish nothing. What matters most is a thorough understanding of both the application and the React lifecycle.

Development workflows are important since they introduce an element of repetition to ensure that critical factors that influence the success of an application are not overlooked. In this section we’ll discuss some of the performance-oriented workflows you might choose to adopt and how they can improve the quality of your application.

Establishing a Benchmark

The Scientific Method the single most important tool in your performance toolbox. Essentially it involves establishing a benchmark that defines a basis you can use to measure the differences in performance introduced by changes you make to the application or its operating environment. Although a simple concept it is quite powerful as the basis for providing solid metrics from which you can measure the positive or negative impact of change.

Without a benchmark measuring the impact changes have on performance is merely conjecture. It’s more about how you feel rather that what’s actually happening in fact.

Chrome Developer Tools provides the means to capture and save performance profiles for later comparison agains post-change performance profiles.

1. When the down arrow is clicked a JSON file containing the performance information collected as part of the profile will be downloaded to the location of your choice.
2. Clicking on the up arrow will upload a previously saved JSON file containing performance profile data into a Developer Tools session.

The ability to save and load a performance profile is a powerful tool since it allows you to both establish a benchmark and to share it with other members of you team.

Enhancing Your Development Workflow with Performance Analysis

Establishing a benchmark is a waste of time unless it is used for comparison against a profile taken after changes have been made to the application. One way to make use of the capabilities of Developer Tools is to create and save benchmarks for your each of your applications use cases. Each time a modification is made to a use case you can then create a new performance profile to compare against the benchmark.

Incorporating this into your teams post-unit test workflows allows performance issues to be caught before they are introduced into the production environment. A secondary benefit is it’s another point for you to identify and correct previously undetected performance issues.

This can be a considerable amount of work. But, the payback can be considerable and with scripting and testing tools it is possible to automate this to some degree.

Enhancing Pre-Production Deployment Testing

In a similar fashion pre-production deployment testing can be enhanced to include this same performance comparison against the established benchmark. The difference is that you may choose to create benchmarks that span use cases for a broader level of coverage. This is an ideal point at which you can replace previous benchmarks with the newly captured performance profile(s) associated with the current change.

You should also involve the entire team in the performance discussion. A best practice to follow is to have the team review changes before they are promoted to production and to review findings generated from performance analyses as compared to what is already in production.

New features often include additional complexity and overhead so from time-to-time you might find that performance is worse for a given use case than for it’s predecessor. However, acceptance of this should be carefully analyzed and decided on by the team rather than by an individual.

Conclusion

Martins Zemlickis from Unsplash.com

Developing with performance in mind is a requirement of modern application development rather than something that’s optional. With the trend of moving applications to the cloud and exposing them to wider audiences it has become increasingly important to address performance at the inception of an application, rather than addressing it after the development cycle has been completed.

A large step towards this is to include performance measurement and tuning into the development and deployment process rather than something that is only conducted as part of production monitoring. In this modern age of web application development detecting performance issues in production is a signal of failure. Successful applications detect and correct them as part of the development and deployment process.

I hope you found this informative and I look forward to any questions and comments you might have. In Part 2 we’ll put the tools and techniques presented here into practice by conducting a performance analysis on a live React application.

Have a good day, afternoon, or evening and go do great things!

Update December 9, 2018

I finally completed the follow-up article, “Using the Chrome DevTools Audit Feature to Measure and Optimize Performance”, which describes and demonstrates a process for tuning web applications. I hope you’ll find this article helpful and I look forward to your comments. Thanks for being so patient.

What is Chingu?

Come join us at Chingu.io to get out of “Tutorial Purgatory” by joining one of our remote Voyage project teams to build apps, refine “hard” skills, and learn new “soft” skills. We help Developers bridge the gap between what they’ve learned and the skills employers are looking for.