Recently Google announced the Core Web Vitals initiative for developers and webmasters to measure site metrics, Web Vitals measures these three metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
Google has released Web Vitals Chrome extension and right now it is not available on Chrome Web Store, the extension needs to pass review which could take days/weeks to appear in the Store, but still, you can install the extension in Chrome and see how your site performs on the three metrics which are crucial for good user experience.
Google promises to update its PageSpeedInsights, Lighthouse, Chrome DevTools, and more tools with the support for Core Web Vitals soon.
Without any ado, here is how you can install Web Vitals extension in the Chrome browser.
1. Visit https://github.com/GoogleChrome/web-vitals-extension#web-vitals-chrome-extension-alpha
2. Download this Zip file hosted on Github to your computer.
3. Once the Zip file of the name “web- vitals-extension master” with size 660KB was downloaded, right-click on the file and extract all files to a folder.
4. Now launch Chrome browser,
5. Click on the menu icon, select Extensions
6. Enable Developer mode and drag and drop the whole folder to chrome://extensions page, the web Vitals extension of version 0.1.1 will be installed.
7. Visit any website and click on Web Vitals icon on the toolbar and ensure you interact with the site to see the three metrics including First Input Delay.
Related articles:
Google releases Lighthouse Extension for Firefox
Native Lazy Loading comes to Chrome 76
Check Your Internet Connection Speed using Chrome
Vivaldi 1.10 docks Developer Tools to main window
Firefox 52 devtools: New Responsive Design Mode
Great tutorial Venket. I followed it and was able to install the extension successfully. I encountered one error that I would like to share…
I used WinRAR for extracting the folder contents, When I dragged the folder to Chrome, it gave me an error that the manifest was missing or unreadable.
When I looked inside the folder, there was another folder called web-vitals-extension-master. Dragging that insider folder to Chrome worked and the extension was installed successfully.