Navigate the Performance Profile Timeline in Chrome DevTools
This video will teach you about the nuances of navigating the performance profile's timeline.
The timeline is a mini-map representation of all the activity that happened during a profile recording. It shows basic visualizations to recognize the nature of the activity. We can zoom in and out of the profile using the mouse scroll. You can also use the bookends to drag and select the zoom area.
All of the areas below the timeline is used to show detailed information on the zoomed-in section of the profile.
The summary box at the bottom shows the third level of detail when you select an artifact on the rest of the profile.
The second half of the profile is divided into various sections. Most prominent are the network and main thread sections.
In the network section, we see a waterfall diagram of all the network calls that were made and how long it took. On clicking a specific network bar, we see more info about it in the summary box.
In the main thread sections, we see a detail of all the activity of the browser's main thread in the form of a flame chart. Each bar on a flame chart is a function call. You can click on it and see its origin and timing details on the summary box.
Instructor: [0:00] The topmost section of the performance profile is called the timeline. It is a mini-map of all the activity that took place during the recording. While it is not useful in and of itself, it gives a good summary and indicates problem areas that we should focus on for performance gains.
[0:21] You can zoom in or out of the timeline by scrolling up and down with your mouse, or you can also select these bookends and drag them to the places marking the area for investigation. The section below the timeline always shows the details of the zoomed-in part of the timeline.
[0:39] The zoomed-in nature can be determined by looking at the timestamps above these sections. The timeline shows different activity in different color. The JavaScript is shown in yellow. The render is shown in purple. The gray part shows all the waiting time, and the red part shows long tasks.
[1:00] You can also see FCP and DOM content loaded events on the timeline. All the area below the timeline is represented in the form of an accordion, which is expandable and collapsible.
[1:16] There are different segments in this section that represent different parts of the performance profile. The summary box at the bottom represents even more details on things that you select in the second section.
[1:27] One of the important sections is the Network section, which shows all the network calls made during the recording. Here, we can see different JavaScript and CSS files that are represented by parallel bars. The Network section is special in the sense it can be expanded and contracted using drag and drop.
[1:47] The next important section is the main thread of the profile. This shows us information in the form of a flame chart. Each bar on this graph represents one function call on the JavaScript code that got executed during the profile.
[2:03] You can zoom in and out again using the scroll functions. You can also drag to scroll horizontally across the Network and the main tabs. This also changes the zoom in the timeline. You can scroll up and down within the accordion tab by dragging the area.
[2:25] If we click on one of the network calls in the Network section, we see that the summary box displays detailed information about it. The URL that it called, the duration it took to load divided by network transfer and resource loading, the type of method, the priority, the data that was downloaded, and so on.
[2:46] If you select a bar on the main thread section, you see that the summary box changes to now displaying information about that function call. The line number, the total time taken, and other details. You can also see depth of the call tree are using different tabs in the summary box.
[3:07] In this video, we learned about the timeline, network, main thread, and summary boxes in the performance profile, and how to manipulate these sections to see the information that we need during performance investigations.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!