This is a small collection of videos to help you get familiar with Chrome browser's performance oriented developer tools.
In this collection, learn how to record a performance profile, tweak the settings to get the most relevant profile and finally a look into the different sections of the performance data visualisation.

The first step to understanding your website performance is to profile it. In this video, learn how to record the performance profile of any website with chrome browser's devtools.

Record a Performance Profile Using Chrome Devtools

We learn about the various settings options in the performance profiler dev-tools tab. We look at how we can leverage these settings to get relevant profiling information. The screenshots checkbox makes sure that the profile records screenshots for every frame that was rendered. This gives a good idea of loading order. The memory checkbox hides/shows memory usage details. 

You can disable javascript recordings, or enable deeper render information for more relevant profiles.

The network dropdown lets you simulate different network conditions, offline and allows configuration to add custom settings. The CPU dropdown lets you test different CPU conditions simulating slower devices and mobile device performance.

Chrome DevTools Performance Profiler Settings

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.

Basics of Chrome's Performance Devtools

Instructor

Course Content