Back at the Chrome Developer Summit last year, Google announced new Chrome developer tools to reduce page load time and build native app-like experience. At the time, the company also discussed an initiative to provide developers a unified set of metrics to measure against when building websites with user experience and performance in mind. Following up on the initial idea, Google has now announced the Web Vitals initiative which aims to provide "unified guidance for quality signals that are essential to delivering a great user experience on the web".

Over the years, Google has offered several tools to help website developers measure and report website performance. These include things like Lighthouse, Chrome DevTools, PageSpeed Insights, and Search Console's Speed Report. But Google notes that while some developers are quite adept at using these tools, others have found the variety of tools and metrics a bit challenging to keep up with. With the new initiative, the company aims to simplify the landscape so that developers can focus on the metrics that matter the most, called Core Web Vitals.

Core Web Vitals

Core Web Vitals are a subset of all the Web Vitals that apply to all web pages, should be measured by all website owners, and will be surfaced across all Google tools. Currently, these Core Web Vitals focus on three aspects of the user experience — loading, interactivity, and visual stability — and include the following metrics (and their respective thresholds):

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1

To help developers measure and report these Core Web Vitals, Google is committed to surfacing these metrics in its tools. The following chart details which tools support the Core Web Vitals:

Developers will also be able to measure each Core Web Vital in JavaScript using standard web APIs and report on each Core Web Vital without writing any code, using the Web Vitals Chrome Extension. The extension makes use of the web-vitals library to measure these metrics and display them to users as they browse the web. The extension can also be helpful in understanding the performance of your websites, your competitor's websites, and the web at large. Alternatively, developers who would prefer to measure these metrics using the underlying web APIs can refer to the metric guides on the website linked below for implementation details.

Along with the Core Web Vitals, Google also talks about other Web Vitals that will serve as proxy or supplemental metrics for the Core vitals. These include metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), Total Blocking Time (TBT), and Time to Interactive (TTI) that can help developers capture a larger part of the experience or aid in diagnosing specific issues.

It's worth noting that these Web Vitals and Core Web Vitals will evolve over time and developers should expect future improvements or additions to the list. However, since the Core Web Vitals are relevant to all web pages and featured across several Google tools, any changes to these metrics will not alter their definition and thresholds. Developers will also be given prior notice for any upcoming changes and a predictable, annual pattern. Due to the fact that the other Web Vitals are context or tools specific, their definitions and thresholds may change with greater frequency without prior notice. Any changes made to all Web Vitals will be documented in this public changelog.


Source: web.dev