Tools to measure Core Web Vitals

June 04, 2021 | 7 min read

1. QuikRead

The recently launched Web Vitals program gives uniform recommendations on quality signals that are critical for all sites to ensure a great web user experience. Core Web Vitals allows you to instantly track and assess how well your website is performing. As a result, it’s critical to understand them well and discover the appropriate instruments to assess them.

Google is rapidly extending the number of methods site owners may measure Core Web Vitals, currently offering six in total. Core Web Vitals have launched only a few weeks ago, and they could only be assessed using the Chrome UX report at the time. With the revelation that Core Web Vitals would be included in Google’s ranking algorithm, the company is extending its measuring capabilities to many of its existing tools.

Try the following approach to start enhancing user experience using Core Web Vitals:

Use the new Core Web Vitals report in Search Console to discover groups of pages that need maintenance (based on the field data).
After you’ve identified the pages that want attention, utilize PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page. PageSpeed Insights (PSI) is accessible through Search Console, or you may input a URL straight into PSI.
Are you ready to improve your site in the lab? Lighthouse and Chrome DevTools may be used to measure Core Web Vitals and provide actionable advice on what to change. The Web Vitals Chrome extension may provide you with a real-time display of metrics on your desktop computer.
Do you require a custom dashboard of Core Web Vitals? For field data, use the improved CrUX Dashboard or the new Chrome UX Report API, and for lab data, use the PageSpeed Insights API.
Looking for advice? Using PSI data, web.dev/measure can measure your page and present you with a prioritized collection of optimization tips and codelabs.
Finally, before deploying a change to production, utilize Lighthouse CI on pull requests to confirm there are no regressions in Core Web Vitals.

Core Web Vitals can now be measured using:

Search Console
PageSpeed Insights
Lighthouse
Chrome DevTools
Chrome UX Report
Web Vitals Extension

With that out of the way, let’s go into the detailed upgrades for each tool!

2. Lighthouse

Lighthouse is an automatic website auditing tool that assists developers in diagnosing problems and identifying possibilities to improve their sites’ user experience. It assesses numerous aspects of user experience quality in a lab setting, including performance and accessibility. Lighthouse’s most recent version (6.0, published in mid-May 2020) features new audits, metrics, and a newly constructed performance score.

In Lighthouse 6.0, three new metrics are added to the report. Two of these new metrics, Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), are Core Web Vitals lab implementations that give critical diagnostic information for enhancing user experience. Given their relevance in measuring user experience, the new metrics are not only assessed and provided in the report but are also considered in the performance score calculation.

You Might Be Interested In: Magento 2 Speed Optimization Services

Total Blocking Time (TBT), the third new measure added to Lighthouse, corresponds strongly with the field measure First Input Delay (FID), another Core Web Vitals statistic. Following the suggestions in the Lighthouse report and improving against your scores enables you to offer your users the greatest possible experience.

Lighthouse’s products have all updated to match the most recent version, including Lighthouse CI, which allows you to simply measure your Core Web Vitals on pull requests before they’re merged and deployed.

Check out the What’s New in Lighthouse 6.0 blog article to learn more about the newest Lighthouse upgrades.

3. PageSpeed Insights

PageSpeed Insights (PSI) provides information on a page’s lab and field performance on mobile and desktop devices. The tool gives an overview of how real-world people perceive the page (driven by the Chrome UX Report) as well as a collection of practical recommendations for site owners on how to enhance page experience (provided by Lighthouse).

PageSpeed Insights and the PageSpeed Insights API have also been updated to use Lighthouse 6.0 behind the scenes and now enable monitoring Core Web Vitals in both the lab and field portions of the report! As demonstrated here, core web vitals are marked with a blue ribbon.

While Search Console offers an excellent overview of groupings of pages that require work, PSI assists in identifying per-page chances to improve page experience. In PSI, you can see if your page satisfies the requirements for a positive experience across all Core Web Vitals at the top of the report, which is indicated bypasses the Core Web Vitals assessment or does not pass the Core Web Vitals evaluation

4. CrUX

The Chrome UX Report (CrUX) is a publicly available dataset including real-world user experience data from millions of websites. It assesses the field versions of all Core Web Vitals. CrUX data, as opposed to lab data, originates from opted-in users in the field. Developers may utilize this data to study the distribution of real-world user experiences on their own or rivals’ websites. Even if your site does not have RUM, CrUX can give a quick and straightforward approach to analyze your Core Web Vitals. The CrUX dataset on BigQuery contains fine-grained performance statistics for all Core Web Vitals and is available in monthly origin-level snapshots.

The only way to properly understand how your site works for your users is to evaluate its performance in the field as those people load and engage with it. This form of assessment is known as Real User Monitoring (or RUM for short). Even if you don’t have RUM on your site, CrUX can give a quick and easy approach to analyze your Core Web Vitals.

The CrUX API

The CrUX API is a simple and free method to incorporate origin and URL-level quality monitoring into your development workflows for the following field metrics:

Largest Contentful Paint
Cumulative Layout Shift
First Input Delay
First Contentful Paint

Developers may search for an origin or URL and filter the results based on several form factors. The API is updated daily and summarises data from the past 28 days (unlike the BigQuery dataset, which is aggregated monthly). The API is likewise subject to the same relaxed public API quotas as our other API, the PageSpeed Insights API (25,000 requests per day).

CrUX Dashboard Redesign

The newly updated CrUX Dashboard enables you to quickly follow an origin’s performance over time, and it can now be used to monitor the distributions of all Core Web Vitals indicators. Check out our web.dev guide to getting started with the dashboard.

To make it even simpler to assess how your site is working at a glance, a new Core Web Vitals landing page is offered. We appreciate your input on all CrUX tools; to express your ideas and questions, please contact us through the @ChromeUXReport Twitter account or the Google Group.

5. Chrome DevTools Performance panel

In the Experience section, debug Layout Shift events

A new Experience feature in the Chrome DevTools Performance panel can assist you in detecting unexpected layout alterations. This is useful for identifying and correcting visual instabilities on your website that lead to Cumulative Layout Shift.

To examine the specifics of a Layout Shift, select it and go to the Summary tab. Hover over the Moved from and Moved to fields to see where the shift happened.

In the footer, debug interaction readiness using Total Blocking Time.

Total Blocking Time (TBT) is a statistic that can be assessed in lab instruments and is a good surrogate for First Input Delay. TBT is the entire length of time between First Contentful Paint (FCP) and Time to Interactive (TTI) during which the main thread was stalled for a long enough period of time to impede input responsiveness. Performance enhancements that improve TBT in the lab should lead to better FID in the field.

When you test page performance, TBT is now displayed in the footer of the Chrome DevTools Performance panel:

Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
Click the Performance tab.
Click Record.
Manually reload the page.
Wait for the page to load and then stop recording.

6. Search Console

Based on real-world (field) data from CrUX, the new Core Web Vitals report in Search Console assists you in identifying groupings of pages throughout your site that need improvement. URL performance is classified according to status, metric type, and URL group (groups of similar web pages).

The metrics used in the study are LCP, FID, and CLS from Core Web Vitals. If a URL lacks the required quantity of reporting data for these metrics, it is excluded from the report. Try out the new report to obtain a comprehensive perspective of your origin’s performance.
Once you’ve identified a page type with Core Web Vitals concerns, you can utilize PageSpeed Insights to learn about specific optimization recommendations for representative pages.

web.dev

web.dev/measure lets you track the performance of your page over time and provides a prioritized list of tips and codelabs for improvement. PageSpeed Insights is used to calculate it. The Core Web Vitals metrics are now supported by the measure tool, as demonstrated below:

7. Web Vitals extension

For (desktop) Google Chrome, the Web Vitals extension measures the three Core Web Vitals metrics in real-time. This is useful for detecting difficulties early in your development workflow and as a diagnostic tool for evaluating Core Web Vitals performance while you surf the web.

The Chrome Web Store now has the extension available for download!

8. Final Thoughts

These tools monitor Web Vitals and give us vital insights and recommendations on areas we should work on to enhance website performance, as seen in the examples above. If you have any questions or want to enhance the performance of your site contact us and we will get you all the help you need.