Google integrates Web Vitals HUD into the Chrome browser

No one likes a web page that loads slowly. Developers and designers exhaust hours doing what they can to make sure their sites load quickly so that the overall user experience is a good one. This, of course, benefits the end-user but there’s much more to it than just a happy viewer. Google is constantly honing and tweaking the tools that measure web pages’ speed and responsiveness. This not only enhances the users’ experience but allows website owners to better monetize their sites. No advertiser wants to pay good money to get in front of users just to have ads go unseen because the website loads at a snail’s pace.

To aid developers in making a better experience for their users, Google’s Dev team maintains a set of standards if you will so that websites can test the key elements that affect things such as page load speed, image optimization, and more. These are “must-dos” for a website but more of best practices. That said, you can bet that not meeting many of these standards can result in a ding to your page ranking as well as your site’s visibility and that can definitely result in a loss of revenue. The tests and metrics are referred to as Web Vitals.

Under this umbrella of best practices, you’ll find Core Web Vitals. This subset consists of three metrics that all websites should be measuring and attempting to meet a specific standard. Keeping these three core vitals in check will ensure that your site is loading within an acceptable amount of time and in turn, appease the SEO and site ranking powers that be. For example, as of May 2021, Google will begin using the Core Web Vitals as part of its search engine ranking algorithm. Sites that score poorly could see a significant decrease in visibility if these metrics don’t meet the industry standards.

As I mentioned, the Core Web Vitals are made up of three metrics. They include items such as how fast the largest element on the page loads and layout shift. The latter of which is one of the most annoying things you’ll find on a website. You’re scrolling through a site and you hover a section of content or go to click something and the content shifts because something that wasn’t loaded decides to fire. Drives me crazy but it happens more often than you think. Here are the three key elements of Core Web Vitals and a brief breakdown of what they are.

• 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.

On the user’s end, there’s not a lot you can do to improve these vitals on a website apart from using tools to block scripts and advertising. Unfortunately, this option can also greatly diminish the overall experience of the site. For developers, you can find an extension in the Chrome Web Store that will give you a heads up display of these Core Web Vitals. This HUD will give you a real-time look at how your site performs. In a recent update to the Canary channel of Chrome and Chrome OS, Google looks to bring this HUD directly into the code of the Chrome browser.

The flag, Show performance metrics in HUD, popped up in the Canary build a few weeks back and now, appears to be working exactly like its extension counterpart. When enabled, every website you navigate to will give you a small popup in the top-right corner that shows you active metrics for LCP, FID, CLS as well as average frame dropped. This feature won’t fix the slow load issues your site may have but it will be a useful testing tool to start tracking down resource-hungry elements or to ensure your site stays zippy once you’ve gotten things smoothed out. You can give this a try now with the web extension but I expect we’ll see the baked-in version at some point in the next 2-3 months.