Tools to measure Core Web Vitals

Your favorite development tools can now measure Core Web Vitals.

May 28, 2020

The recently announced Web Vitals initiative provides a unified guide to the quality signals that are essential for all sites to deliver a great user experience on the web. We are happy to announce that all popular Google tools for web developers now support Core Web Vitals measurement, helping you diagnose and fix user experience problems more easily. This includes Lighthouse, PageSpeed ​​Insights, Chrome DevTools, Search Console, the measurement tool from web.dev, Chrome Web Vitals extension and a new (!) Chrome UX Report API.

Now that Google Search includes Core Web Vitals as a basis for evaluating page experience, it is important that these metrics are available and as actionable as possible.

To start your journey optimizing the user experience with Core Web Vitals, try the following workflow:

• Use Search Console's new Core Web Vitals report to identify groups of pages that require attention (based on field data).
• Once you've identified the pages that need work, use PageSpeed ​​Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field problems on a page. PageSpeed ​​Insights (PSI) is available through Search Console or you can enter a URL in PSI directly.
• Ready to optimize your site locally in the lab? Use Lighthouse and Chrome DevTools to measure Core Web Vitals and get a practical guide on exactly what to correct. The Web Vitals Chrome extension can give you a real-time view of the metrics on the desktop.
• Need a custom Core Web Vitals dashboard? Use the updated CrUX dashboard or the new Chrome UX Reporting API for field data or the PageSpeed ​​Insights API for lab data.
• Looking for guidance? web.dev/measure can measure your page and show you a prioritized set of guides and code labs for optimization, using data from PSI.
• Finally, use Lighthouse CI in pull requests to ensure there are no regressions in Core Web Vitals before implementing a change in production.

With that introduction, let's dive into the specific updates for each tool!

Lighthouse

Lighthouse is an automated website auditing tool that helps developers diagnose problems and identify opportunities to improve the user experience of their sites. It measures various dimensions of the quality of the user experience in a lab environment, including performance and accessibility. The latest version of Lighthouse (6.0, released mid-May 2020) includes additional audits, new metrics, and a newly composed performance score.

Lighthouse 6.0 introduces three new metrics in the report. Two of these new metrics, Largest Content Paint (LCP) and Cumulative Design Change (CLS), are lab implementations of Core Web Vitals and provide important diagnostic information to optimize the user experience. Given their importance for evaluating user experience, the new metrics are not only measured and included in the report, but are also taken into account in calculating the performance score.

The third new metric included in Lighthouse - Total Lock Time (TBT) - correlates well with the First Input Delay (FID) field metric, another Core Web Vitals metric. Following the recommendations provided in the Lighthouse report and optimizing for your scores prepares you to provide the best possible experience for your users.

All products powered by Lighthouse are updated to reflect the latest version, including CI headlight which allows you to easily measure your Core Web Vitals on pull requests before they are merged and deployed.

For more information on the latest Lighthouse updates, check out our What's New in Lighthouse 6.0 blog post.

PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) reports on the lab and field performance of a page on desktop and mobile devices. The tool provides an overview of how real-world users experience the page (powered by Chrome UX Report) and a set of practical recommendations on how a site owner can improve the page experience (provided by Lighthouse).

PageSpeed ​​Insights and the PageSpeed ​​Insights API They have also been updated to use Lighthouse 6.0 under the hood and now support Core Web Vitals measurement in the lab and field sections of the report. Core Web Vitals are marked with a blue tape as shown below.

While Search Console provides site owners with a great overview of page groups that need attention, PSI helps identify opportunities per page to improve the page experience. In PSI, you can clearly see whether or not your page meets the thresholds for a good experience on all Core Web Vitals at the top of the report, indicated by passes the Core Web Vitals assessment or fails the Core Web Vitals assessment.

Crux

the Chrome UX Report (CrUX) is a public dataset of real data from user experience across millions of websites. Measure the field versions of all Core Web Vitals. Unlike laboratory data, CrUX data comes from registered users in the countryside. With this data, developers can understand the distribution of real-world user experiences on their own or even competitor's websites. Even if you don't have RUMs on your site, CrUX can provide a quick and easy way to evaluate your Core Web Vitals. the CrUX dataset in BigQuery includes detailed performance data for all Core Web Vitals and is available in monthly snapshots at the source level.

The only way to really know how your site is performing for your users is to measure its performance in the field as those users load and interact with it. This type of measurement is commonly known as Real User Monitoring, or RUM for short. Even if you don't have RUMs on your site, CrUX can provide a quick and easy way to evaluate your Core Web Vitals.

Introducing the CrUX API

Today we are pleased to announce the CrUX API, a fast and free way to easily integrate your development workflows with sourcing and quality measurement at the URL level for the following field metrics:

• Paint with larger content
• Cumulative design change
• First entry delay
• First painting with content

Developers can search for an origin or URL and segment the results by different form factors. The API is updated daily and summarizes the data for the previous 28 days (unlike the BigQuery dataset, which is aggregated monthly). The API also has the same relaxed public API quotas that we put in our other API, the PageSpeed ​​Insights API (25,000 requests per day).

Below is a manifestation using the CrUX API to visualize Core Web Vitals metrics with distributions for Okay, Needs improvementand poor:

In future releases, we plan to expand the API to allow access to additional dimensions and metrics from the CrUX dataset.

Revamped CrUX board

The newly redesigned CrUX board allows you to easily track the performance of a source over time, and now you can use it to monitor distributions of all Core Web Vitals metrics. To get started with the panel, check out our tutorial at web.dev.

We've introduced a new Core Web Vitals home page to make it even easier to see your site's performance at a glance. We welcome your feedback on all CrUX tools; To share your thoughts and questions, call us at @ChromeUXReport Twitter account or Google Group.

Chrome DevTools Performance Dashboard

Debug design change events in the Experience section

Chrome's DevTools Performance the panel has a new Experience section that can help you spot unexpected design changes. This is useful for finding and fixing visual instability issues on your page that contribute to cumulative layout change.

Select a design change to view its details in the Summary tongue. To visualize where the actual change occurred, place the cursor over the Moved from and Moved to fields.

Preparing Debug Interaction with Total Lock Time in Footer

The Total Blocking Time (TBT) metric can be measured in lab tools and is an excellent proxy for first entry delay. TBT measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked long enough to prevent the input response. Performance optimizations that improve TBT in the laboratory should improve FID in the field.

TBT now shows in Chrome DevTools footer Performance dashboard when you measure page performance:

1. press Control + Shift + J (or Command + Option + J on Mac) to open DevTools.
2. Click on the Performance tongue.
3. Click Engrave.
4. Reload the page manually.
5. Wait for the page to load and then stop recording.

For more information, see What's new in DevTools (Chrome 84).

Search Console

The new Core Web Vitals Report in Search Console helps you identify groups of pages on your site that require attention, based on real-world (field) data from CrUX. URL performance is grouped by status, metric type, and URL group (groups of similar web pages).

The report is based on the three Core Web Vitals metrics: LCP, FID, and CLS. If a URL does not have a minimum amount of reporting data for these metrics, it is omitted from the report. Try the new report to get a comprehensive view of your source's performance.

Once you identify a page type that has Core Web Vitals-related issues, you can use PageSpeed ​​Insights to learn about specific optimization tips for representative pages.

web.dev

web.dev/measure allows you to measure your page performance over time, providing a prioritized list of guides and codelabs on how to improve. Your measurement is powered by PageSpeed ​​Insights. The measurement tool now also supports Core Web Vitals metrics, as shown below:

Vitals Web Extension

The Web Vitals extension measures the three Core Web Vitals metrics in real time for (desktop) Google Chrome. This is useful for detecting problems early on during the development workflow and as a diagnostic tool for evaluating the performance of Core Web Vitals while browsing the web.

The extension is now available to install from the Chrome virtual store! We hope you find it useful. We welcome any contribution to improve it, as well as comments on the project. GitHub repository.

Quick highlights

That's a wrap! What can you do next?

• Use Lighthouse on DevTools to optimize your user experience and ensure that you are setting yourself up for success with Core Web Vitals in the field.
• Use PageSpeed ​​Insights to compare the performance of Core Web Vitals in the lab and in the field.
• Try the new Chrome User Experience Report API to easily access your origin and URL performance with Core Web Vitals for the last 28 days.
• Use the Experience section and footer in DevTools Performance panel to drill down and debug against specific Core Web Vitals.
• Use Search Console Core Web Vitals Report for a summary of how your origins are performing in the field.
• Use the Vitals Web Extension to track a page's performance against Core Web Vitals in real time.

We will cover more about our Core Web Vitals tools on web.dev Live in June. Sign up for updates on the event!

~ by Elizabeth and Addy, WebPerf Custodians