With Web Vitals, Google provides the essential KPIs for an optimal user experience. Let's explore the details of this Google initiative to evaluate your user experience and detect opportunities for improvement to speed up your site's page loading times.
What is Web Vitals?
Google offers various tools to test web page speed (Google Lighthouse, Chrome DevTools, PageSpeed Insights, Speed Console's Search Report). Navigating through the abundance of tools and indicators can be challenging, which is why Google has decided to simplify access to information related to user experience.
Thus, website publishers, digital managers, and marketers can focus on the most important signals and KPIs: the Core Web Vitals.
What are the Core Web Vitals?
They are part of the Web Vitals that apply to all URLs of a website. Essential for monitoring web page speed, Google covers them through its various tools.
Each of these Core Web Vitals represents a facet of the user experience, and these signals are measurable in real conditions via Google's "Field" tools (Real User Monitoring).
The metrics that make up the Core Web Vitals, and which are part of Google's ranking signals since the Page Experience update, are expected to evolve over time.
Google has chosen to focus on three aspects of the user experience: loading, interactivity, and visual stability. Thus, the Core Web Vitals are composed of the following KPIs with these thresholds:
- Largest Contentful Paint (LCP): the moment when the largest content element (text, image, etc.) appears on the screen, is the chosen indicator to evaluate loading speed. For a good user experience, the LCP should occur within 2.5 seconds of the page starting to load (note: compressing images is one of the best practices contributing to a good LCP).
- Interactive to Next Paint (INP): measures interactivity. For a good user experience, pages should have an INP of less than 200 milliseconds.
- Cumulative Layout Shift (CLS): measures visual stability. For a good user experience, pages should maintain a CLS of less than 0.1.
For each of the above metrics, to ensure you meet the recommended goals for most of your users, Google suggests observing the 75th percentile of your pages' loading times, distinguishing between mobile and desktop.
Which tools measure the Core Web Vitals?
Google considers these Core Web Vitals essential signals for all web experiences and includes them in its web performance monitoring tools.
Here are the tools that support them, whether they are Real User Monitoring (Field) tools or Synthetic Monitoring (Lab) tools.
Rum tools for measuring core web vitals
Chrome User Experience Report (CrUX) collects real, anonymized browsing data. It allows you to quickly evaluate a site's speed without having to implement measurements yourself in JavaScript, and feeds tools such as PageSpeed Insights and the Speed Report in the Search Console.
Chrome User Experience Report data offers a quick way to assess loading speed, but it does not provide page-by-page details – which is often necessary to accurately diagnose, monitor, and respond quickly in case of performance regressions on a URL.
Therefore, Google strongly recommends implementing your own RUM solution.
Measuring Core Web Vitals in JavaScript
Each of the Core Web Vitals can be measured in JavaScript using standard Web APIs.
The simplest way to measure all Core Web Vitals is to use the web-vitals JavaScript library, a ready-to-use library that provides easy access to native web APIs and collects each metric exactly the same way as the Google tools mentioned above.
Thus, with the web-vitals library, measuring each metric is as simple as a function call (see the documentation for full usage and API details):
import {getCLS, getINP, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getINP(sendToAnalytics);
getLCP(sendToAnalytics);
You can also create reports on each Core Web Vitals without writing code using the Web Vitals Chrome extension.
This extension uses the web-vitals library to collect each of these metrics and display them during navigation. You can then monitor the performance of your own sites, your competitors' sites, and web pages in general.
Synthetic Tools for Measuring Core Web Vitals
Although all Core Web Vitals are primarily RUM measurements, many of them are also measurable via synthetic tools, including Google's tools. This is even the best way to test the performance of new features during development before deploying them live. It is also the best way to anticipate performance regressions.
However, while synthetic (Lab) measurements are essential for evaluating and improving the user experience, they do not replace Real User Monitoring (Field). A site's performance can vary significantly depending on device capabilities, network conditions, and other processes that may be running on the device and impact page loading.
In reality, each Core Web Vitals metric can see its score modified based on user interactions. Only real data measurement can accurately reflect the reality of the user experience.
Other Core Web Vitals
Core Web Vitals are essential metrics for understanding and delivering an optimal user experience, but they are not the only ones.
Other metrics can complement or approach them, especially to address other aspects of the user experience or diagnose a specific issue.
For example, Time to First Byte (TTFB) and First Contentful Paint (FCP) are two essential metrics to reflect the loading experience and are both useful for diagnosing potential performance issues alongside LCP.
Do you want to optimize your site's performance?