Core Web Vitals workflows with Google tools
Combine Google tools to audit, improve and monitor your website effectively.
Core Web Vitals are a set of metrics that assess the user experience on criteria such as load performance, responsiveness to user input, and layout stability. While Core Web Vitals are valuable user experience metrics, they won't mean much without guidance on creating a development workflow to continuously improve them in both the lab and the field.
A workflow for improving Core Web Vitals for your website will be explored in this guide, but where that workflow begins depends on whether you're collecting your own field data. Where it ends may depend on which of Google's tools you'll find useful in diagnosing and fixing user experience problems.
Collect your own field data if possible #
While lab tools are invaluable, the data they provide isn't always predictive of how a website performs for real users.
For example, Lighthouse runs tests with simulated throttling in a simulated desktop or mobile environment. While such simulations of slower network and device conditions often help draw attention to user experience problems better than native network and device conditions, they're just a single slice of the large variety in network conditions and device capabilities across a website's entire user base.
First or third-party tools #
The best dataset for assessing website performance in the field is the one you build. That starts with collecting field data from your website's visitors. How you do this depends on the size of your organization, and whether you want to pay for a third-party solution or create your own.
Paid solutions will almost certainly measure Core Web Vitals (and other performance metrics). In large organizations with significant resources, this may be the preferred method.
However, you may not be part of a large organization or even one with enough money to afford a third-party solution. In these cases, Google's web-vitals library will help you gather all Web Vitals. However, you'll be responsible for how that data is reported, stored, and analyzed.
If you're using Google Analytics #
If you're already using Google Analytics, but you haven't started collecting your own field data, there may be an opportunity for you to use the web-vitals library to send Web Vitals collected in the field to Google Analytics and use the web-vitals-report tool. The primary advantage of using web-vitals-report is that it simplifies analysis and visualization of field data by using an existing and widely-used analytics product.
Understanding Google's tools #
Regardless of whether you're collecting your own field data, there are several Google tools that may be useful in analyzing Core Web Vitals. Before establishing a workflow, a high-level overview of each tool can help you to understand which tools may—or may not—be best for you.
Chrome User Experience Report (CrUX) #
CrUX is a BigQuery dataset of field data gathered from a segment of real Google Chrome users from millions of websites. It also presents Core Web Vitals for websites with sufficient traffic, but only at the origin level. However, the CrUX API can provide field data at the URL level, provided a URL has enough samples in the CrUX dataset.
When to use CrUX #
Even if you gather your own field data, CrUX is still useful. Though CrUX represents a subset of Chrome users, it's helpful to compare your website's field data to see how it aligns with its CrUX data. If you currently don't gather any field data for your website, CrUX is especially valuable—provided your website is represented in its dataset.
When not to use CrUX #
Websites that don't receive enough traffic are not represented in the CrUX dataset. If this is the case for you, you'll need to gather your own field data to understand how your website performs in the field, as CrUX won't be an option.
PageSpeed Insights (PSI) #
PSI is a tool that reports field data from CrUX and field lab from Lighthouse for a given page.
When to use PSI #
PSI is great for assessing performance at the page level. It's a good choice for those in non-developer roles who wish to assess how specific pages are performing in the field, which is valuable if you're not gathering your own field data. PSI also provides recommendations for non-developers who are not already using Lighthouse, and from a more consistent baseline than running Lighthouse from your own laptop.
When not to use PSI #
PSI may not be worth using for developers already using Lighthouse. From the field data perspective, it's not a fit for websites that aren't represented in the CrUX dataset.
Search Console #
Search Console measures your site's search traffic and performance, including Core Web Vitals. A valuable feature of Search Console is that it assesses groups of similar pages (for example, pages that use the same template). Search Console also includes a Core Web Vitals report based on field data from CrUX.
When to use Search Console #
Search Console is well-suited for both developers and those in non-developer roles to assess both search and page performance in ways other Google tools don't. Its presentation of CrUX data and grouping of pages by similarity offers novel insight into how performance improvements impact entire categories of pages.
When not to use Search Console #
Search Console may not be a fit for projects that use different third-party tools which group pages by similarity, or if a website isn't represented in the CrUX dataset.
Lighthouse #
Lighthouse is a lab tool that provides specific opportunities for improving page performance. Lighthouse user flows also allow developers to script interaction flows for performance testing beyond page startup.
Lighthouse-CI is a related tool that runs Lighthouse during project builds and deploys to assist with performance regression testing. It presents a Lighthouse report along with pull requests, and tracks performance metrics over time.
When to use Lighthouse #
Lighthouse is excellent for finding performance improvement opportunities during development in both local and staging environments. Lighthouse CI is similarly useful in the build and deploy phases to staging and production environments, where performance regression testing is needed to preserve good user experiences.
When not to use Lighthouse #
Lighthouse (or Lighthouse CI) is not ideal for those in non-developer roles, and is not a substitute for field data. Those in non-developer roles may find PageSpeed Insights more convenient for gathering Lighthouse recommendations, as well as view field data provided by CrUX.
Web Vitals extension #
The Web Vitals Chrome extension is a diagnostic tool that measures changes in Core Web Vitals in real time on desktop devices. It also includes CrUX data for the current page if it is represented in the CrUX dataset.
When to use the Web Vitals extension #
The Web Vitals extension can be used by anyone in any role to assess a page's Core Web Vitals at all points of the page lifecycle. It reports changes as they occur, and signals changes in accordance with the Core Web Vitals thresholds.
When not to use the Web Vitals extension #
The Web Vitals extension isn't a holistic assessment of page performance, and should be supplemented by more comprehensive tools. Lighthouse user flows in particular are useful as, with the Web Vitals extension, it monitors changes in Core Web Vitals after the page has loaded. Unlike the Web Vital extension, though, Lighthouse user flows provide more insight into what causes changes in Core Web Vitals.
The performance tab in Chrome's DevTools #
Chrome DevTools is a collection of in-browser development tools, including the performance tab. The performance tab is a lab tool that profiles all page activity during startup or a recorded time period. It offers deep insight into everything it observes across dimensions such as network, rendering, painting and scripting activity, as well as a page's Core Web Vitals.
When to use the performance tab #
The performance tab should be used by developers during development to gain deep insight into page performance. It can be used with Lighthouse or other tools that export performance traces which can later be loaded in the performance tab.
When not to use the performance tab #
The performance tab is a developer tool that provides lab data only. It's not a substitute for field data, and may not be easy to use for novice developers or those in non-developer roles.
A three step workflow for ensuring your website's Core Web Vitals stay healthy #
When working to improve the user experience, it's best to think of the process as a continuous cycle. For improving Core Web Vitals and other performance metrics, one approach could be:
- Evaluate website health and identify pain points.
- Debug and optimize.
- Monitor with continuous integration tools to catch and prevent regressions.
Step 1: Evaluate website health and identify opportunities for improvement #
- Interpret field data provided by CrUX Dashboard and/or your own field data to assess website health.
- Use Search Console to identify pages which need improvement. Note: If you're already collecting your own field data, it may be easier to rely on that rather than using Search Console.
- Use PageSpeed Insights to get specific information on user experience metrics for those pages as well as opportunities for improvement.
Whether you analyze field data you collect yourself or CrUX data, the first step is vital. If you're not gathering field data, CrUX data may be enough to guide you—again, provided your website is represented in the dataset.
Measure website health with the CrUX dashboard and collected field data #
To get a snapshot of your website's performance, you can create a CrUX Dashboard which reports the following:
- Site overview, which segments Core Web Vitals into desktop and mobile device types.
- Historical trend by metric type, which is a distribution of metrics over time for each available monthly release of CrUX report data.
- User demographics, which illustrates the distribution of page views across an entire origin for users in each demographic including device and effective connection types.
Even if your website is represented in CrUX, you should still collect your own field data, since CrUX doesn't include all users of Chrome or even other browsers—but it's certainly a good place to start in the absence of any field data.
Identify poorly performing pages in Search Console #
While the Core Web Vitals report in Search Console shows the big picture of your website's performance, you can still drill down into specific pages that need attention. With Search Console, you can also:
- Identify individual pages that need improvement and those that currently provide a good user experience.
- Get granular data on performance by URL grouped by status, metric, and groups of similar web pages (such all product detail pages on an e-commerce website, for example).
- Get detailed reports that bucket URLs in each user experience quality category for both mobile and desktop.
Analyze performance by page with PageSpeed Insights #
PageSpeed Insights displays a subset of CrUX data at the URL level covering the last 28 days of user experience data at the 75th percentile. This means that if 75% of user experiences meet the threshold set for a given metric, then the experience is considered "good".
The lab data component of PageSpeed Insights is represented by the Lighthouse score, which also provides specific opportunities for improvement. At this point, you're ready to debug and fix performance issues.
Step 2: Debug and optimize #
- Run Lighthouse to audit a page to get page-level guidance and use the Web Vitals extension to analyze Core Web Vitals in real time.
- Use the performance tab in Chrome's DevTools to debug performance issues and test code changes.
Uncover opportunities with Lighthouse #
Though PageSpeed Insights runs Lighthouse for you, it's more convenient during local development to run Lighthouse from Chrome's DevTools.
Lighthouse runs simulate a mid-tier mobile device on a throttled slow 4G connection. This may find issues that wouldn't ordinarily appear on high-speed devices or fast internet connections.
Even so, this simulated throttling may not be representative of the variety of user experiences among your website's user base at the 75th percentile. However, these metrics are an indicator of where performance problems exist, and may translate into better performance overall in the field if the problems Lighthouse finds are addressed.
Analyze in real time with the Web Vitals extension #
The Web Vitals Chrome extension shows Core Web Vitals in real time during startup and while browsing a page. Because of this, it can capture FID, as well as layout shifts that occur after startup.
It's best to think of the Web Vitals extension as a spot-checking tool to find performance issues, not a comprehensive debugging tool—that's a job for the performance tab in Chrome's DevTools.
Drill down with the performance tab #
The performance tab in Chrome's DevTools profiles all page behavior during a recorded period of time. When populated, a layer in the timeline labeled "experience" appears, which highlights layout shifts and the elements that shifted.
Additionally, there's a checkbox near the top of the performance tab labeled "Web Vitals", which plots Web Vitals on the timeline as well as long tasks:
These features—as well as information in other parts of the performance tab—can help you determine whether fixes are having any effect on a page's Core Web Vitals.
In addition to Core Web Vitals, you can observe the TBT for a given page in the lower-left hand corner of the performance tab window.
Debug Core Web Vitals in the field #
Lab tools can't always identify the cause of all Core Web Vitals issues affecting your users. This is one reason why it's so important to collect your own field data, as it takes factors into account that lab data cannot. Additionally, learning how to debug Core Web Vitals in the field can help you make sense of changes in your website's Core Web Vitals in the field.
Step 3: Monitor with continuous integration tools #
The last step in the performance improvement workflow cycle is two-fold:
- Use CrUX on BigQuery, CrUX API, PageSpeed Insights API, and/or the
web-vitalsJavaScript library to automate a website's field data collection, and optionally use this data to power custom dashboards and alerting systems. - Use Lighthouse-CI for performance regression testing.
The tools listed in the first step may seem like a lot, but you don't necessarily need all of them—only those that will give you the level of coverage you need to assess performance and preserve good user experiences. The table below can help you determine which tools you need:
You don't need to follow the workflow in this article to the letter, but the following tools can still help to keep you on track for improving your website's performance:
- Record field data from real users using the
web-vitalslibrary. - Identify specific pages with poor user experiences in Search Console.
- Complement the data from Search Console with a site-wide Core Web Vitals assessment from CrUX (if available).
- Identify user experience issues with Lighthouse and the performance tab in Chrome's DevTools.
- Catch regressions with Lighthouse-CI.
Any workflow is better than none at all, as no plan for addressing problems with your website's Core Web Vitals will likely result in worse user experiences that escape your notice.
Conclusion #
Ensuring fast and delightful user experiences requires a performance-first mindset and adoption of a workflow to ensure progress. With the right tools and processes to audit, debug, monitor, and provide governance, building great user experiences and staying within the thresholds defined for good Core Web Vitals is within your reach.