Introducing Web Vitals: essential metrics for a healthy site

Optimizing for quality of user experience is key to the long-term success of any site on the web. Through our ongoing engagement and collaboration with millions of web developers and site owners, we’ve developed many helpful metrics and tools across Google to help business owners, marketers, and developers alike identify opportunities to improve user experiences. However, abundance of metrics and tools creates its own set of prioritization, clarity, and consistency challenges for many. 

Today we are introducing a new program, Web Vitals, an initiative by Google to provide unified guidance for quality signals that, we believe, are essential to delivering a great user experience on the web.

Core Web Vitals

Measuring the quality of user experience has many facets. While some aspects of user experience are site and context specific, there is a common set of signals — “Core Web Vitals” — that is critical to all web experiences. Such core user experience needs include loading experience, interactivity, and visual stability of page content, and combined are the foundation of the 2020 Core Web Vitals.

• Largest Contentful Paint measures perceived load speed and marks the point in the page load timeline when the page’s main content has likely loaded.
• First Input Delay measures responsiveness and quantifies the experience users feel when trying to first interact with the page.
• Cumulative Layout Shift measures visual stability and quantifies the amount of unexpected layout shift of visible page content.

All of these metrics capture important user-centric outcomes, are field measurable, and have supporting lab diagnostic metric equivalents and tooling. For example, while Largest Contentful Paint is the topline loading metric, it is also highly dependent on First Contentful Paint (FCP) and Time to First Byte (TTFB), which remain critical to monitor and improve.

Measuring Core Web Vitals

Our goal is to make Core Web Vitals simple and easy to access and measure for all site owners and developers, both across Google surfaces as well as within their own dashboards and tools.

Chrome UX Report enables site owners to quickly assess performance of their site for each Web Vital, as experienced by real-world Chrome users. The BigQuery dataset already surfaces publicly accessible histograms for all of the Core Web Vitals, and we are working on a new REST API that will make accessing both URL and origin level data simple and easy — stay tuned.

We strongly encourage all site owners to gather their own real-user measurement analytics for each Core Web Vital. To enable that, a number of browsers, including Google Chrome, support the current Core Web Vitals draft specifications: Largest Contentful Paint, Layout Instability, and Event Timing. To make it easy for developers to measure Core Web Vitals performance for their sites, today we are launching an open-source web-vitals JavaScript library, which can be used with any analytics provider that supports custom metrics, or as a reference for how to accurately capture each of the Core Web Vitals for your site’s users.

// Example of using web-vitals to measure & report CLS, FID, and LCP.
import {getCLS, getFID, getLCP} from 'web-vitals';
function reportToAnalytics(data) {
  const body = JSON.stringify(data);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS((metric) => reportToAnalytics({cls: metric.value}));
getFID((metric) => reportToAnalytics({fid: metric.value}));
getLCP((metric) => reportToAnalytics({lcp: metric.value}));

Finally, over the coming months we will be updating Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report, and other popular tools to highlight and provide consistent and actionable guidance for improving Core Web Vitals. 

Evolving Core Web Vitals

While today’s Core Web Vitals metrics measure three important aspects of user experience on the web, there are many aspects of user experience that are not yet covered by Core Web Vitals. To improve our understanding of user experience going forward, we expect to update Core Web Vitals on an annual basis and provide regular updates on the future candidates, motivation, and implementation status. 

Looking ahead towards 2021, we are investing in building better understanding and ability to measure page speed, and other critical user experience characteristics. For example, extending the ability to measure input latency across all interactions, not just the first; new metrics to measure and quantify smoothness; primitives and supporting metrics that will enable delivery of instant and privacy preserving experiences on the web; and more.

Make sure to follow our updates on web.dev and subscribe to our mailing list for future updates on vitals and all things Web.