The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.
You get four sub-tools to examine aspects of the profile in more detail:
- the Waterfall shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection
- the Call Tree shows the JavaScript functions in which the browser spent most of its time
- the Flame Chart shows the JavaScript call stack over the course of the recording
- the Allocations view shows the heap allocations made by your code over the course of the recording.
{{EmbedYouTube("WBmttwfA_k8")}}
Getting started
- UI Tour
-
To find your way around the Performance tool, here's a quick tour of the UI.
- How to
- Basic tasks: open the tool, create, save, load, and configure recordings
Components of the Performance tool
- Frame rate
- Understand your site's overall responsiveness.
- Call Tree
- Find bottlenecks in your site's JavaScript.
- Allocations
- See the allocations made by your code over the course of the recording.
- Waterfall
- Understand the work the browser's doing as the user interacts with your site.
- Flame Chart
- See which JavaScript functions are executing, and when, over the course of the recording.
Scenarios
- Animating CSS properties
- Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
- Intensive JavaScript
- Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.