November 28, 2017 (Updated: October 27, 2020)
React was one of the first major front-end frameworks to not only name, but tout its rendering performance. React’s virtual dom is famous for efficiently rendering components—but what happens when those components suddenly don’t feel fast anymore? Where do you look? How do you fix it?
In this walk-through, we’ll show how to find and fix slow React component code using Chrome devtools.
There are three things you’ll need to follow along:
Firstly, open Chrome's devtools. You’re going to need some room to breathe, so undock devtools and maximise it to be as large as your screen allows.
When doing performance audits it’s essential that you're working towards realistic real world device targets. After all, not everyone has a powerful developer computer or current model phone.
Remember: Any improvements that you can make for slow hardware will also mean that fast devices get an even better experience. Everyone wins!
In development mode, as React renders, it creates ‘mark and measure’ events for each component. Those marks and measures can be viewed within Devtools.
To record a performance profiler trace, navigate to the page that you’d like to test (on localhost) and press the ‘Start profiling and reload page’ button.
This will record a performance trace for the current page. Chrome automatically stops recording the trace after the page has settled, though you can end it earlier by pressing the stop button.
Once you’ve got a trace, your window will look something like this:
Two items worth highlighting, that may not be immediately obvious to someone who is new to the Performance tab.
This red bar indicator shows that there were significant long tasks around this part of the trace timeline. We probably want to investigate there.
The colours used in the graph at the top of the performance window correspond to different types of activity. Each category has various causes, fixes, and analysis required.
Now we’re going to want to investigate that red CPU-burn area. We can see that the page rendered elements on the page during that period of the trace.
Zooming immediately displays user-timing information and a component labelled Pulse (that takes 500ms to render).
Beneath the Pulse component, there appears to be child components rendering, although the size of those items indicates that they aren’t costing a lot of execution time.
Easily investigate which scripts or third parties are costing your customers time using Calibre’s Main Thread Execution Timeline explorer
When in development mode, React publishes component runtime metrics to the User Timing API, which is why it’s visible in devtools without any additional browser extensions.
You can use custom User-Timing events to instrument your sites and applications.
Here's a few examples that you may want to consider adding to your projects:
All major browsers support the User Timing API, so it makes sense to add instrumentation to critial user-actions and flows to gain a deeper insight into the experiences people are having on your pages.
Being a successful performance-minded developer requires great focus and knowledge. The good news is you’re already half way there! Best of luck!
We will send you the latest site speed articles, tools, case studies and more, so you can become a better speed advocate.