Performance heads-up display in Chrome

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-u…


This content originally appeared on DEV Community and was authored by Chris Bongers

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


This content originally appeared on DEV Community and was authored by Chris Bongers


Print Share Comment Cite Upload Translate Updates
APA

Chris Bongers | Sciencx (2021-06-29T06:31:25+00:00) Performance heads-up display in Chrome. Retrieved from https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/

MLA
" » Performance heads-up display in Chrome." Chris Bongers | Sciencx - Tuesday June 29, 2021, https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/
HARVARD
Chris Bongers | Sciencx Tuesday June 29, 2021 » Performance heads-up display in Chrome., viewed ,<https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/>
VANCOUVER
Chris Bongers | Sciencx - » Performance heads-up display in Chrome. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/
CHICAGO
" » Performance heads-up display in Chrome." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/
IEEE
" » Performance heads-up display in Chrome." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/. [Accessed: ]
rf:citation
» Performance heads-up display in Chrome | Chris Bongers | Sciencx | https://www.scien.cx/2021/06/29/performance-heads-up-display-in-chrome/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts