Introducing Web Vitals: essential metrics for a healthy site
Tuesday, May 5, 2020
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.
In our testing and development process we’ve found it valuable to have easy access to the state of each Core Web Vital both in development and as we browse the web. To help developers spot optimization opportunities today we are also releasing a developer preview of the new Core Web Vitals extension. This extension surfaces a visual indicator in Chrome about the state of each vital as you browse the web and, in the future, will also allow you to view aggregated real-user insights (provided by Chrome UX Report) about the state of each core vital for the current URL and origin.
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.
Ilya Grigorik, Web Performance Engineer
