Google is offering an informative Heads-Up Display (HUD) for the Chrome browser. The overlay offers key performance metrics of webpages in real-time. This will allow users to understand how much impact webpages have on the performance of the browser and the device.
The new real-time webpage performance overlay, currently as an experimental feature, essentially extends the Core Web Vitals platform that Google launched earlier this year.
The Google Core Web Vitals Get A Visual And Real-Time Webpage Performance Overlay:
The Google Core Web Vitals measures a webpage’s performance and user experience metrics that are needed to offer a good user experience when browsing a website. The vitals currently include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
- Largest Contentful Paint (LCP) measures when the largest element in a browser’s viewable screen becomes visible. 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 the time from when a user first interacts with a page to when the browser is able to respond to that interaction. To provide a good user experience, pages should have an FID of less than 100 milliseconds.
- Cumulative Layout Shift (CLS) measures how much visible content shifts in the viewport as well as the distance these elements are shifted. Common reasons for CLS is when ads are displayed that push down visible content. To provide a good user experience, pages should maintain a CLS of less than 0.1.
Incidentally, Google will start factoring in Core Web Vitals metrics within ranking algorithms for websites searched and visited through Google search engine. In other words, websites will have to improve their LCP, FID, and CLS metrics in order to stay relevant in the Google Search results.
Google Core Web Vitals Metrics As Viewable Built-In Feature In Chrome Web Browser:
In Google Chrome Canary builds, the company is creating a built-in HUD that displays real-time performance metrics while using a web page. Until recently, Chrome users could access the metrics using an extension.The new HUD will be located at the top right side of a web page. It will show performance metrics for Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). The HUD will also include Average Dropped Frame (ADF).
ADF is a smoothness metric that measures the GPU and rendering performance of a webpage. The lower the ADF, the smoother the page will be, while higher dropped frames will cause “jank,” or stuttering and choppiness, when using the webpage.
How to enable Google Core Web Vitals HUD In Chrome Browser:
To try out the new Google Core Web Vitals performance metrics HUD, users need to first install Google Chrome Canary.
Once Chrome Canary is installed, enable the HUD feature by following these steps.
- Enter chrome://flags into the Chrome address bar and press enter.
- When the experiments screen opens, search for ‘HUD.’
- When the ‘Show performance metrics in HUD‘ flag appears, click on the drop-down and selected ‘Enabled.’