Profiling web pages in Chrome DevTools for fun and profit

As a front-end developer, an important part of your work should be making your users comfortable interacting with your super-hot parallax website – that means, you should be careful avoiding framerate drops or laggy interactions.

I’ll quickly show you how to detect front-end bottlenecks in your web application using Chrome Developer Tools.

TL;DR

Chrome DevTools can inspect browser events and track your website framerate. Use it to debug your application and smoothen your site UX!


A little introduction

First, you’ll obviously need to open Chrome DevTools (on Macs you can press Alt + Cmd + I) and switch to the Timeline tab. You’ll see something like this:

image

Here you can take a peek at the 3 fundamental aspects for the (client side) performance of a web application:

  • Events. These are the events the page fires and that the browser executes (i.e. Build my layout! or Hide this div (and recalculate the width of the adjacent one)!)
  • Frames. You can guess that. The more the FPS, the smoother the website will be.
  • Memory. The amount of RAM memory your page takes to run. Useful for detecting JS memory leaks!

They’re obviously tied together very closely and you should keep an eye on each one.

Stop talkin’ now, let’s get our hands dirty!

To start profiling a page, you need to press the “Record” bullet icon in the bottom left menu:

image

When the icon switches red, reload the page, so that the DevTools can record and profile your website. Remember to turn it off! You’ll probably want to analyze a small bit of interaction at a time, otherwise you’ll be likely overwhelmed by a lot of data.

At this point, you’ll see something like this:

image

Each bar represents an event and its duration. As you can guess, every color refers to a different event: blue is for assets loading, yellow for scripting, violet for rendering and green for painting.

Just above that, you can see a timeline which represents the same events vertically – the higher the bar, the lesser the frames per second. This is very useful when you’re trying to detect lag spikes and you want to rapidly find the cause. Just look at the higher bar, pair it with its own event and.. debug! 🙂

You can select which time window you want to analyze moving the handles on the timeline highlighted section (or you can scroll with your mouse wheel on it to reduce or expand it).

Having a clear representation of every page event and its related consequences is cool, and can speed up a lot front-end debugging. But there’s more!

In this case we can see that a paint event is taking place and that it needs ~25ms to complete. Well, click on the arrow to the left of the event and you’ll see the best part!

image

Clicking on the arrow you can inspect the internal processes of the selected event, and see which are the required steps (and how much time they need) for the completion of it! Crazy, huh?

Plus, if you hover on an event, you’ll see a very useful resumé of its properties:

image


We just saw how the Frames section works, but the Events section is pretty much the same thing, so I’ll let you discover that by your own. The Memory tab, additionally, gives you a visual representation of the RAM memory usage, with other useful info (DOM Node count, Event Listener Count):

image

In conclusion

Chrome DevTools is a fantastic piece of software that can help you in many, many ways. We have just scratched the surface – if you want to dive in, you can read the official Google Developers documentation or read one of the many tutorials on HTML5 Rocks website.

 

Leave a Reply

wpDiscuz