Yay! New Chrome Extension to measure Core Web Vitals
You guys out there should be already aware of Google’s recent announcement on their new signals — Core Web Vitals to measure the web page performance and developers have already started working on the websites to improve the performance to pass the Core Web Vitals score.
I have created a new extension for your chrome browser to measure Core Web Vitals score accurately and provide you highlights on the areas of improvement.
Here you go — https://chrome.google.com/webstore/detail/core-web-vitals/adeniimnihmbpgpbljmnohjpoolmgabj?hl=en-GB&authuser=0
Before going further, if you want some tips to improve your core web vitals score, have a read on this article — https://medium.com/techbeatly/how-to-improve-your-google-core-web-vitals-scores-a67b20639c98
What do we have today?
In order to measure the CWV scores, currently use a plugin from chrome to get the metrics. The plugin is good enough to display the score related to each metrics.
Disclaimer — I will be using one of our company application for the demo purpose in the screenprints
Sample Screenprint below:-
What are we missing now?
Even though the current Web Vitals plugin is good enough to display the score related to each metrics but as of now it just simply displays the metrics and nothing more than that!
The developers won’t get which HTML elements need to be improved or the reason for the low scores. Even sometimes on a page that has relatively the same size components, it’s difficult to understand which is the largest component in the viewport and where to have the proper fix.
What do we get with the new plugin?
The new custom plugin created will help the developers to get more insights into metrics and the HTML elements that impact the CWV scores. Below are the features that come along with the newly developed chrome extension.
- Captures all the CWV metrics ad display in a palette bottom of the screen (similar to the current plugin)
- Highlight the Largest Content on the page which contributes to the LCP score with an outline green border.
- Highlights the HTML elements in the page which has a Layout shift that impacts the CLS score with an outline orange border.
- List down the details of the HTML elements that had a layout shift in the chrome developer console. Thus it helps the developer to nail down the HTML elements to fix the CLS issue.
Below are the details you get with the new plugin on the page
If the developer wants to know more details on the HTML elements that contributed to the above CLS shift or more details on the FID and LCP, you can get the details from the Chrome developer console.
How to use the new chrome extension
The new chrome extension is reviewed and published by Google in the Chrome Web Store. Below are the steps to use the extension in your chrome browser.
- Open your chrome browser
- Open this link in your browser
- Click the “Add to Chrome” button on the page
4. Once added, now click the extension button in the chrome and “pin” the “Core Web Vitals” extension
How to use the Core Web Vitals extension?
- Load your website in chrome and after loading, click the below icon from the extension list to see the Core Web Vital score.
- There will be a panel in the Bottom Left corner, with the CWV scores pulled from the browser.
- The orange border indicates the CLS shifts made by the HTML elements on the page.
- The green border indicates the Largest content on the page which is used for calculating the LCP score.
- Going into the “Developer Console” of the browser will give you more information about the CWV scores.
Note — It is always recommended to run the extension and do your testing on CPU Performance at “4x slowdown” mode so that you can simulate the real mobile user experience.
What’s coming next?
We are planning to add a few more features to the plugin on the road. Below are some high-level thoughts into consideration.
- Auto trigger page interaction component to capture FID automatically rather than manual intervention.
- Bring more insights from the Performance tab on LCP metric and display out the factors behind the scenes.
- Highlight the contribution of each HTML element on the CLS score, which makes us understand the low hanging fruit.
Wishing you all the very best guys and happy coding!
Cheers!
