The Google Chrome development team recently added a heads-up display (HUD) to help developers and users track performance metrics for different websites. The HUD tracks metrics that are part of Google’s Core Web Vitals Platform, such as Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Today we’re going to take a closer look at how you can enable this HUD on Chrome, what these metrics actually mean, and how it affects your website.
Enable Chrome HUD Benchmark
There are two methods to display Chrome’s references as a heads-up display. You can either enable the HUD using the new feature flag in Chrome or use the official Chrome extension.
Enable Chrome Reference HUD Using Feature Flag
Google’s experimental reference HUD currently exists behind a feature indicator in the latest Chrome Canary. In this article, I used Chrome Canary 89.0.4349.3 for the demonstration. You can follow these steps to enable HUD on Chrome on Mac, Windows, Linux, Chrome OS and Android.
1. Open Google Chrome Canary and visit chrome://flags. In the search field available on this page, search for “Show performance metrics in HUD”, and choose “Enabled”. Alternatively, you can paste the URL below into your browser’s address bar.
chrome://flags/#show-performance-metrics-hud
2. After enabling the flag, restart the browser. You will now notice the new Chrome reference HUD in the upper right corner of the browser. Unfortunately, the HUD does not support drag and drop for repositioning at this time, so you have to view it in one place.
Enable Chrome Reference HUD Using Chrome Extension
If you’re not ready to live on the cutting edge of Chrome Canary, you can install the Chrome extension released by Google to get a similar HUD instead. Here’s how to do it:
1. Open Google Chrome and visit Chrome Web Store. In the search box, type ‘Web Vitals’ and install the one offered by addyosmani. Alternatively, you can use this link to directly open the extension page.
2. After installing the extension, you will see the same metrics offered with the feature indicator. You can use either one depending on your convenience and preference. Since there is no option to quickly disable the feature flag version now, I recommend using the Chrome extension.
Chrome HUD Benchmark Features
The Chrome Reference HUD currently offers the following features:
- Largest Content Paint (LCP)
- First Entry Delay (FID)
- Cumulative Layout Shift (CLS)
- Average Lost Frame (ADF)
Largest Content Paint (LCP)
The largest content paint (LCP) measures the time taken to display the largest image or block of text in the visible part of the web page. Google recommends websites to have LCP in the first 2.5 seconds for an ideal user experience. LCP somewhere around 2.5 seconds to 4 seconds is considered average and duration beyond that is considered poor and can lead to poor UX.
To keep the LCP within 2.5 seconds, the company urges developers to measure the 75th percentile of page loads on mobile and desktop versions. To put it more simply, all you have to do is make sure that at least 75 percent of the pageviews hit the correct required threshold, which in this case is 2.5 seconds.
First Entry Delay (FID)
While LCP was about loading speed, First Entry Time (FID) represents the responsiveness of a web page. It measures the time between when a user interacts with a page and when the page manages to start processing to respond to the action. It is to highlight that FID does not include overall processing time.
In ideal scenarios, a website FID value must be less than 100 milliseconds. The range between 100 milliseconds and 300 milliseconds needs improvement. If the time exceeds 300 milliseconds, the web page is considered to have a bad FID. You can follow the same 75th percentile page load approach described above to maintain a good FID score.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) keeps track of all those annoying moments when website content suddenly shifts up or down without any warning. In other words, CLS measures the visual stability of a website.
According to Google, layout changes mainly occur when page resources are loaded asynchronously or when DOM elements are dynamically added to a web page. A good CLS score is below 0.1. Scores above 0.25 are considered poor. You can read more about how CLS scores are calculated here.
Average Lost Frame (ADF)
Average Dropped Frame (ADF), as the name suggests, shows the percentage of frames dropped when the user interacts with the web page. Lower ADF percentages will result in better performance, while high frame drops can cause delays and other performance issues. As of this writing, ADF is only available on the HUD feature indicator version.
Use Chrome’s HUD Benchmark to Track Website Performance
In a blog post last month, Google announced its intention to consider Core Web Vitals – LCP, FID and CLS as ranking signals from May 2021. If you are a website owner or a developer, now is the time to optimize your website user experience using Chrome’s HUD Benchmark to avoid being affected © negatively by the next update. For more such tips, be sure to check out our Google Chrome tips and tricks article.
.
