Performance heads-up display in Chrome

β€” 2 minute read

As you may have noted, I'm busy with the performance on this website lately as we just talked about optimizing animated content, and improving our lighthouse score.

And with that, I found a super cool feature in Chrome, a so-called Performance Heads-up Display (HUD) baked in the core of Chrome!

Performance heads-up display in Chrome

This used to be an extension that you could add to Chrome, but it's now inside Chrome. The display shows very useful information that you know from Lighthouse.

Including:

  • Largest Contentful Paint
  • First Input Delay
  • Cumulative Layout Shift
  • Average Dropped Frame
  • Max Dropped Frame
  • 95th Percentile DF

Enable the performance heads-up display in Chrome

Of course, you are now wondering how to enable this, right?

  1. Type about:flag in your chrome browser
  2. Search for Show performance metrics in HUD
  3. enable it and relaunch Chrome

These steps make it available in the top right corner.

Enable Performance HUD in Chrome

This is super useful when doing many performance upgrades that you want to check right away, without waiting for Lighthouse to render.

The feature is also coming to mobile, but it doesn't seem to be in Chrome for iOS yet.

I am looking forward to also having the display there.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter