Google Chrome’s development team recently added a head-up display (HUD) to help developers and users monitor performance metrics of different websites. The HUD tracks metrics that are part of Google’s Key Web Data platform, such as Largest Content Paint (LCP), First Entry Latency (FID), and Cumulative Pattern Shift (CLS). Today we’re going to take a closer look at how you can enable this HUD in Chrome, what these metrics really mean and how they affect your website.
Enable Chrome’s Benchmark HUD
There are two ways to view Chrome’s benchmarks as a head-up display. You can enable the HUD with the help of the new feature flag in Chrome or use the official Chrome extension.
Enable Chrome’s Comparison HUD Using the Property Flag
Google’s experimental benchmark HUD currently resides behind a feature flag in the latest Chrome Canary. In this post, I used Chrome Canary 89.0.4349.3 for demonstration. You can follow these steps to enable HUD in Chrome on Mac, Windows, Linux, Chrome OS and Android.
1. Open Google Chrome Canary and visit chrome://flags. In the search box on this page, Search for ‘show performance metrics in HUD’and select ‘Enabled’. Alternatively, you can paste the URL given below into your browser’s address bar.
chrome://flags/#show-performance-metrics-hud
2. Restart the browser after enabling the flag. now you will notice Chrome’s new comparative HUD in the top right corner Unfortunately, the HUD doesn’t currently support drag and drop for repositioning, so you’re stuck with viewing it in the same place.
Enable Chrome’s Benchmark HUD Using Chrome Extension
If you don’t want to live on the high end with Chrome Canary, you can install the Google-released Chrome extension to get a similar HUD instead. Here’s how to do it:
1. Open Google Chrome and visit: Chrome Web Store. Type ‘Web Vitals’ in the search box and install the one offered by addyosmani. As an alternaive, use this link to open the extension’s page directly.
2. After installing the extension, you will see the same metrics as the feature flag. You can use any of them according to your comfort and preference. I recommend using the Chrome extension as there is no option to quickly disable the feature flag version now.
Features of Chrome’s Benchmark HUD
Chrome’s benchmark HUD currently offers the following features:
- Largest Content Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- Average Frame Dropped (ADF)
Largest Content Paint (LCP)
Largest Content Paint (LCP), The time it takes to render the largest image or block of text in the viewable portion of the web page. Google recommends websites that: 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 time beyond that is considered poor and can result in bad UX.
In order to keep the LCP within 2.5 seconds, the company requires developers to Measure 75 percent of page loads on mobile and desktop versions. In simpler terms, all you have to do is make sure that at least 75 percent of the pageviews meet the required good threshold, in this case 2.5 seconds.
First Input Delay (FID)
LCP is all about loading speed, while First Input Delay (FID) represents the responsiveness of a web page. It measures the time from the time a user interacts with a page to when the page manages to start rendering to respond to the transaction. It is worth noting that FID does not include overall processing time.
In ideal scenarios, a website must have FID less than 100 milliseconds. The interval between 100 milliseconds and 300 milliseconds needs to be improved. If the duration exceeds 300 milliseconds, the web page is considered to have a weak FID. You can follow the same 75 percent page load approach discussed above to get a good FID score.
Cumulative Layout Shift (CLS)
Cumulative Layout Scrolling (CLS) keeps track of all those annoying times when a website’s content suddenly scrolls up or down without warning. In other words, CLS measures the visual stability of a website.
According to Google, layout shifts primarily happen when the page’s resources are loaded asynchronously or when DOM elements are added dynamically to a web page. A good CLS score is less than 0.1. Scores above 0.25 are considered weak. You can learn more about how CLS scores are calculated. right here.
Average Frame Dropped (ADF)
Average Frame Dropped (ADF), as the name suggests, shows the percentage of frames dropped when the user interacts with the web page. Lower ADF percentages provide better performance, while high dropped frames can cause lags and other performance issues. As of this writing, ADF is only available in the feature flag version of the HUD.
Use Chrome’s Comparison HUD to Monitor Website Performance
In a blog post last month, Google revealed its plans. Consider Important Web Data – LCP, FID and CLS as ranking signals from May 2021. If you’re a website owner or developer, now is the time to optimize your website’s user experience using Chrome’s Benchmark HUD to avoid being negatively impacted by the upcoming update. For more such tips, be sure to check out our Google Chrome tips and tricks article.