Recommended resources
The freely available resources this lesson will direct you to.
In our previous lesson, we established the theoretical foundation for understanding React performance, distinguishing between the render and commit phases. We saw how a slow interaction—one taking longer than about 33 milliseconds—is the visible symptom of expensive work happening during these phases.
Now, we'll move from theory to the first crucial step of practical performance tuning. Before we can fix a problem, we must be able to measure it accurately and reliably. This lesson will guide you through defining a repeatable interaction scenario for our sample project's list page. By creating a consistent baseline, you'll be able to scientifically measure the impact of any optimizations you make later on.
Why a Repeatable Baseline is Non-Negotiable
When an application feels "janky" or "slow," it's tempting to jump in and start changing code based on intuition. However, as one speaker aptly puts it, human perception is one of the most unreliable things in the world. To truly improve performance, we need to move from "feeling faster" to "provably faster."
Profiling React rendering performance - SERGEY RYZHOV
In this excerpt from a talk on profiling React applications, the speaker, Sergey Ryzhov, makes a compelling case for why objective measurement is superior to subjective feelings when it comes to performance work.
Watch the section from the beginning where he discusses the pitfalls of relying on perception and introduces the famous quote by Lord Kelvin: "If you can't measure it, you can't improve it."
This is the core principle behind establishing a performance baseline. A baseline is a set of consistent, repeatable measurements for a specific user interaction. It serves as your "before" picture, against which all "after" pictures (your optimizations) will be compared. Without it, you're flying blind.
Defining the Interaction Scenario
A good performance scenario is specific, user-centric, and focuses on an interaction that is known or suspected to be slow. For our sample project, which features a list-heavy page, a common source of sluggishness is filtering or searching that list.
Therefore, our target interaction scenario will be:
"A user types a short query into the list's filter input field."
This simple action often triggers a cascade of re-renders, making it an excellent candidate for performance analysis. In a moment, we will record this exact action to make it repeatable. But first, let's see how this mindset of isolating a single, problematic interaction is a common starting point for profiling.
How to use the React Profiler to find and fix Performance Problems
In this video, developer Ben Awad tackles a performance issue in an application. Notice how he begins by identifying one specific, laggy UI element to focus his efforts on.
Watch the brief segment from the start where he identifies a "janky" switch as the precise interaction he intends to profile. This is the same approach we're taking with our list filter.
Making the Scenario Repeatable: Recording Actions
To ensure we run our test scenario the exact same way every time, we can't rely on manual typing and clicking. Minor variations in timing or movement can skew our results. Instead, we'll use a tool built into Chrome to record and replay the interaction automatically: the Recorder.
The Chrome DevTools Recorder allows you to capture a sequence of user actions and save it as a script that can be replayed on demand.
Record, replay, and measure user flows | Chrome DevTools
This official guide from the Chrome developer documentation provides a complete walkthrough of the Recorder panel. We will use it to capture our list filtering scenario.
Follow the instructions in the article under the heading Record a user flow. Instead of the coffee-ordering demo, perform these steps on our sample project's list page: Open the Recorder panel and start a new recording. Give it a descriptive name like "Filter product list". Click into the filter input field. Type a three-letter query (e.g., "hat"). The Recorder will capture these keyUp and keyDown events. End the recording. After you've finished, you should have a recorded script that you can replay to perfectly replicate the filtering interaction.
Making the Scenario Repeatable: Controlling the Environment
Recording the user's actions is only half the story. The performance of your application is also heavily dependent on the environment it runs in—namely, the user's CPU speed and network conditions. Your powerful development machine will likely mask performance issues that are glaringly obvious on an average user's device.
To create a truly repeatable and realistic baseline, we must simulate a more typical user environment by throttling the CPU and network.
Performance panel: Analyze your website's performance
This document covers the Chrome DevTools Performance panel, but it includes a crucial section on configuring the test environment for consistency.
Focus on the section titled Configure your environment. This section explains how to apply CPU and network throttling. For our purposes, apply the following settings in the DevTools Performance panel or within the Recorder's replay settings: CPU: Set to 4x slowdown or 6x slowdown. This simulates a mid-range or lower-end device and makes performance bottlenecks much more apparent. Network: While our current interaction is client-side, it's good practice to set this to something like Fast 3G for future scenarios involving data fetching. Cache: Ensure that Disable cache is checked. This prevents cached assets from interfering with measurements, especially on page load.
Measuring Your First Baseline
Now you have all the pieces for creating a reliable performance baseline:
- A recorded user interaction script.
- A controlled, throttled environment.
The Chrome Recorder panel elegantly combines these. When you have a recording open, you'll see a button labeled Measure performance.
Record, replay, and measure user flows | Chrome DevTools
The "Measure performance" button in the Chrome DevTools Recorder panel. Clicking this will replay your recorded interaction script while simultaneously capturing a detailed performance profile.
Clicking this button will:
- Apply any replay settings you've configured (like throttling).
- Execute your recorded script (typing "hat" into the filter).
- Automatically capture a full performance trace of the interaction in the Performance panel.
Go ahead and try this now. This trace represents your first performance baseline. While we won't analyze this specific trace today, you have now established the repeatable process for generating it.
Conclusion
In this lesson, you've taken the essential first step from performance theory to practice. You've learned how to create a stable foundation for measurement, which will be indispensable as we move on to optimization.
Here are the key takeaways:
- Measure, Don't Guess: Reliable performance work is built on objective data, not subjective feelings.
- Define a Scenario: Isolate a specific, user-facing interaction that is slow or complex, like filtering a list.
- Record Actions: Use the Chrome DevTools Recorder to capture user actions, ensuring the interaction is identical in every test run.
- Control the Environment: Use CPU and network throttling to simulate average user conditions and make performance issues more visible and consistent.
You now have a robust method for creating a performance baseline. In our next lesson, we will use this method to record the list interaction again, but this time with the React DevTools Profiler. This will allow us to move beyond a general performance trace and pinpoint exactly which React components are contributing to the render cost.