Google Chrome is adding a performance overlay to help web devs build faster websites

Google Chrome is adding a performance overlay to help web devs build faster websites

When Google launches Chrome 90 later this year, the browser will feature an optional new overlay that will provide developers with vital stats for how a website is performing.

Chrome’s new Performance Heads-Up Display (HUD) was detailed by Google Engineering Manager Addy Osmani (via AndroidPolice). The new overlay, which will become part of Chrome DevTools, will provide developers with both Core Web Vitals and smoothness metrics. Once the HUD is enabled, it will be persistent and display on each tag.

The new performance overlay arrives following Google’s launch of Web Vitals, an initiative that aims to provide “unified guidance for quality signals that are essential to delivering a great user experience on the web.”

Here’s what we said about Core Web Vitals back in May of 2020:

Core Web Vitals are a subset of all the Web Vitals that apply to all web pages, should be measured by all website owners, and will be surfaced across all Google tools. Currently, these Core Web Vitals focus on three aspects of the user experience — loading, interactivity, and visual stability — and include the following metrics (and their respective thresholds):

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1

It’s in a developer’s best interest to create a website with an experience that’s fast and smooth. That’s because Google will rank websites based on “page experience” beginning May 2021. Google started labeling websites as meeting Core Web Vitals metrics in August of last year, telling users in Chrome 85 whether a link led to a “fast page.”

According to Osmani, the HUD is still being polished, so things like stability and performance will come with time. You can head over to crbug.com and report any bugs or feedback under the Internals > GPU > Metrics component.

About author

Brandon Russell
Brandon Russell

Brandon's love of technology can be traced back to his childhood, when he would obsessively watch Back to the Future. Since then he's followed the industry and its many innovations, from handheld consoles to powerful smartphones. He's still waiting on a hoverboard.