Google Chrome integrates web vitals HUD that offers real-time web page performance

Google Chrome integrates web vitals HUD that offers real-time web page performance

No one likes a slow-loading web page. Developers, designers, and website owners do their best to make sure that their websites load fast in order to keep offering the best user experience.

Google has gone as far as labeling web pages ‘Fast Pages’ to help users determine whether the web page they are visiting loads fast or not. Furthermore, the company is now integrating an informative Heads-Up Display (HUD) for its browser.

This feature offers real-time web page performance to users. This also allows users to understand how much impact web pages have on the performance of the browser and their device.

Read: The new Chrome zero-day is under attack –– what to do?

Google’s Chrome gets web vitals HUD –– overlays the current Core Web Vitals

The newly integrated HUD feature –– currently an experimental feature –– basically extends the current Core Web Vitals platform that the tech company launched earlier this year.

Google’s Core Web Vitals measures a web page’s performance and user experience metrics that are required to offer a good experience to users when browsing a website. Currently, the vitals include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

  1. Largest Contentful Paint (LCP) – this measures how much time it will take for the largest element in a browser’s viewable screen to become visible. In order to provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  2. First Input Delay (FID) – this measures how much time it will take from when a user first interacts with a page to when the browser is able to respond to that interaction. The web pages should have an FID of less than 100 milliseconds to provide a good user experience.
  3. Cumulative Layout Shift (CLS) – this metric measures how much visible content shifts in the viewport and also the distance these elements are shifted. One of the common reasons for CLS is when ads are displayed that push down visible content. To provide a good user experience, the web pages should maintain a CLS of less than 0.1.

Not only will the Core Web Vitals help improve users’ experience, but this will also allow websites to better monetize their sites. Let’s admit it, no advertiser would want to pay for their products to be displayed on web pages that load very slowly. It’s like good money down the drain, right?

Google's Chrome gets web vitals HUD
Google’s Chrome gets web vitals HUD

Google helps developers offer a better experience to their users by maintaining this set of standards. With this, websites can test the major components that impact performance such as page load speed, image optimization, content, and more.

Now, if you maintain these three core vitals, you can be assured that your site is loading within an acceptable amount of time. You’ll have a better chance at ranking high on the search pages since staying relevant on the SERP depends on your site maintaining good scores on the LCP, FIC, and CLS metrics.

Core Web Vitals –– a viewable built-in feature on Chrome

In Google Chrome Canary builds, the tech company is integrating a built-in HUD that shows real-time performance metrics of the web page while in use. Previously, users could only access these metrics through an extension.

The built-in HUD in Google Chrome
The built-in HUD in Google Chrome

Google Chrome’s new HUD will be located at the top right side of the web page. This will show the web page’s performance metrics for LCP, FID, as well as CLS. In addition, the HUD will also include Average Dropped Frame (ADF).

The ADF is a smoothness metric that measure the web page’s GPU and rendering performance. The lower the ADF, the smoother the page.

Here’s how to enable Google’s Core Web Vitals HUD on Chrome:

First, users will need to install Google Chrome Canary. After the Chrome Canary is installed, users can follow these steps to enable the HUD:

Step 1: Enter chrome://flags into the Chrome address bar.
Step 2: Once the experiments screen opens, search for ‘HUD.’
Step 3: Then, if the ‘Show performance metrics in HUD‘ flag appears, click on the drop-down and select ‘Enabled.’

Leave a Reply

Your email address will not be published.