Core Web Vitals HUD(Heads-Up Display) In Chrome Browser - Display real-time performance metrics

#hud #chrome #webvitals
Core Web Vitals HUD(Heads-Up Display) In Chrome Browser - Display real-time performance metrics

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.

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.

Currently, the Web Vitals plugin should be added to measure these metrics

Google is now planning to enable this as a built-in feature without adding the additional plugin, built-in HUD(Heads-Up Display) that will display the real-time performance metrics while accessing the web page

The experiment feature is already enabled in Google Canary build - Developer build, the HUD flag should be enabled to use this feature, also introduced new metrics called 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.

The Core Web Vitals metrics can be also accessed through Google Search Console.

The PageSpeed Insights also include these metrics - https://developers.google.com/speed/pagespeed/insights/

If required the Java Library wrapper or direct Java Script can be used for measuring the metrics.

Google may consider these metrics in 2021 for ranking the websites, better to address the issues and enhance the score for better ranking.

Refer to these URL's for more details - https://web.dev/learn-web-vitals/

The Core Web vitals along with the HUD is a nice feature to measure and address the performance issues for better page ranking.

Видео Core Web Vitals HUD(Heads-Up Display) In Chrome Browser - Display real-time performance metrics канала Tech Forum