Chrome’s DevTools suite contains some of the most powerful tools available to help you analyze and improve the speed of your website (or web app). They can also be the most overwhelming. In our most recent article, we covered one area of the DevTools that we can use to measure the load time of our site – the ‘Audit’ tab.
However, we often get asked about another area of the DevTools – the ‘Performance’ tab. This is usually because while this tab initially appears very simple, upon running the test you are presented with a ton of data on the site you are testing.
Interpreting this information is a powerful tool, and allows you to use it in the way Google intended. To improve your site!
Accessing the DevTools Performance Tab
To use the Performance tab through the Chome Dev tools, simply open the DevTools and navigate to the Performance tab. You can do this on Windows by hitting F12 or Ctrl + Shift + I. On a Mac, you can hit Command + Option + I. On either platform, you can also right-click on the page, and click ‘Inspect’.
Opening the tab offers only a couple of options – record and reload. You’ll likely see a few options at the top as well. This is where you’ll set up your testing.
Setting Up Your DevTools Test
First, load the site you’ll be analyzing in Incognito. This will load a clean instance of your site, free from any scripts that Chrome extensions may be running.
Then you can set the parameters of your test. If you don’t see the options in the image above, you can click on Capture Settings (gear icon) in the top right corner. This will display all of the additional testing options.
Note: It’s incredibly important to consider older, slower devices when optimizing your site. Mobile devices usually have much less CPU power than desktops and laptops. Additionally, many users aren’t using the latest, fastest flagship models.
Recording Runtime Performance
When we think about web performance, we typically mean the performance of a site as its loading. However, a site can load very quickly, yet still offer a poor user experience because its interactions are laggy/glitchy. For this reason, we also want to be able to test how well our site performs after it’s fully loaded and being used by our visitors.
By clicking on the Record button, you’ll be able to do just that. This button will record your site’s runtime performance. After clicking Record, simply interact with your page as you (or your visitors) normally would, for a few seconds. Click the Record or Stop button to stop recording and see all the information the test gathered about how your site performed while being used.
Recording Load Performance
Next to the Record button is the Reload button. By clicking this button, we’re able to assess the performance of our as it loads. Again, you’ll want to select the options and throttling you’d like to use when testing your site or web app first. After you’re happy with those, simply click on the Record button and DevTools will automatically reload your site, and display the results of the test.
However, the DevTools performance tab goes well beyond the typical metrics that you’ll see when you test your site’s loading speed. After you click on the Record button, you’ll see the results.
Using the Performance Results
At first glance, the results you receive after running your test will seem very overwhelming. However, by taking everything one step at a time, you’ll see just how useful all of this information is.
By clicking on the different tabs, you can view the main thread activity, analyze frames per second, network requests, GPU activity, and much more.
You can also identify bottlenecks in the loading process but clicking on the red triangles that appear in the main thread boxes (such as in the image above). The [warning] messages in show long-running tasks and code that may potentially block page rendering.
The Google Dev documentation for the Performance Tab is extremely helpful and shows you how to use each of these sections to improve your site. By using the tools and strategies that they lay out in their documentation, you can find common problems and fix them. Some common issues to look for:
- Don’t over-complicate your CSS. Use less CSS and keep your CSS selectors simple.
- Avoid layout as much as possible. Choose CSS that doesn’t trigger layout at all.
- Painting can take up more time than any other rendering activity. Watch out for paint bottlenecks.”
It’s honestly incredible how much information you can get about the complete performance of your site from DevTools. Between the Audit tab that we discussed last month and the Performance tab we’ve detailed in this post, you’ll be able to completely optimize both the load and the runtime performance of your site.
Is it a lot of information to decipher? Yes.
Is learning how to utilize it worth it? Yes!
After all, you’re likely competing against other websites in your particular field. By learning how to use the DevTools audits and use them to identify and fix bottlenecks, you’re putting yourself well ahead of others in your niche.