A Performance Heads-Up Display (HUD) for Chrome

Today I’m happy to preview a new Performance Heads-Up Display (HUD) coming to Chrome and Chrome for Android. It includes the Core Web Vitals.

Last year, we released the Core Web Vitals extension to give developers real-time insight into user-experience metrics on desktop. This Heads-Up Display was a helpful addition to the performance debugging workflow as it offered visibility into how specific interactions, resource loads or patterns impact a page.

The measurement capabilities offered by the extension complemented those of the DevTools Performance panel and Lighthouse, showing Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. Being implemented as a Chrome extension allowed us to quickly offer up unique DX with both a real-time traffic-light style ambient badge for assessing Core Web Vitals compliance and a HUD (Heads Up Display) for real-time metrics.

Performance Metrics HUD

To enable even more developers to benefit from the Core Web Vitals HUD UX, we worked on bringing this functionality directly into Chrome in partnership with the Chrome graphics team. Today I am happy to share that an early version of the new Performance metrics HUD is available in Chrome 90 on both desktop and mobile. You’ll find both Core Web Vitals and smoothness metrics available in the feature.

One of the original limitations of the Chrome extension was that it could only be used to view the metrics on desktop. With the Performance HUD available for Chrome on Android, you can see how the Core Web Vitals metrics look like on real mobile devices:

In Chrome 90, you can enable this feature available as follows:

• Go to about:flags
• Search for Show performance metrics in HUD
• Enable the option and relaunch Chrome

The HUD is persistent and will display on each tag once enabled. We are working on bringing this functionality to Chrome DevTools behind a toggle and will share more on this work as it progresses.

As with any feature still being polished, we will continue to improve the HUD in areas such as stability and color contrast. Please try the HUD out and share any feedback you have on it with us over on crbug.com under the Internals > GPU > Metrics component. Enjoy!

With thanks to Weiliang Chen, Sadrul Chowdhury and Andrey Kosyakov‎ for their contributions to this feature.