How to Collect a Web Performance Trace
Whenever I work with a team that is interested in improving their web product's performance, one of the first things I ask is Have you profiled your web app?.
Collecting a performance trace is one of the best ways to understand how your web app runs on the browser, and will help you identify inefficiencies and bottlenecks.
Note: I use the terms Profile and Trace interchangeably.
A Trace (or Profile) allows a developer to "see" their web application executing at runtime via collected stats from the host process, collected by the Profiler.
These stats are aggregated into a structured format that can subsequently be loaded into visualizations, such as Flame Graphs.
The Profiler I use most often is the Chromium F12 Performance Profiler.
Below is an example visualization generated from the Chromium Profiler:
To open the Chromium F12 Performance Profiler, you will need to use a Chromium-based browser (Chrome or Edge).
Open a browser tab to your web application, and open the Developer Tools via F12, or right-click, Inspect Element.
Once the Developer Tools are open, navigate to the Performance tab.
The profiler is associated with the process (i.e. in most cases, the Browser Tab) from which it was opened.
Before recording, I recommend always checking the Screenshots option.
To begin collection, click the Record button in the UI.
This will begin the tracing of the process.
Once your trace begins collecting, return to your web app in the tab that you originally had opened Chromium DevTools for.
Interactive scenarios include:
- Clicking or dragging an in-app UI element
These are straightforward to capture; just go ahead and enact the scenario while the profiler is recording.
For full page load scenarios, I recommend navigating to
about:blank before starting the collection of your profile.
This will ensure you don't capture any extraneous
is more representative of your actual user scenario when navigating to your web app.
To be clear:
- Open the F12 Chromium Profiler
- Navigate the tab to
- Begin recording in the Profiler
- Navigate to the page you want to profile
- Let the page fully load
Once you have finished enacting your scenario, click Stop in the Profiler.
It will populate the Profiler UI with the collected results of your scenario.
Exporting a trace can be handy to share your collection with other engineers for team analysis.
To export a trace, in the Profiler UI, select Save Profile...:
This will produce a
.json file. Save it anywhere.
.json traces are easy to share amongst team members for investigation into performance issues.
If you want to revisit a previously collected trace or import a trace from a team member, select the Load Profile... button:
Select a compatible
.json file and it will load up in the UI.
You now have the knowledge on how to start profiling your web application!
Start exploring the Profiler UI: