What are Web Vitals?

May 18, 2021

Optimizing the quality of user experience is critical to the long-term success of any website. Whether you’re a business owner, retailer, or developer, Web Vitals can help you quantify your website experience and identify opportunities for improvement.

Review

+ Razširi članek s svojim mnenjem

Web Vitals is Google’s initiative to provide uniform guidance on the quality metrics that are essential to delivering a great user experience on the web.Google has provided many performance measurement and reporting tools over the years. Some developers are experts at using these tools, while others have found the abundance of tools and metrics a challenge to keep track of.Website owners don’t need to be performance gurus to understand the quality of the experience they provide their users. The goal of the Web Vitals initiative is to simplify the landscape and help websites focus on the most important metrics, the Core Web Vitals.

Core Web Vitals

Core Web Vitals are a subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be displayed in all Google tools. Each of the key web vitals represents a specific aspect of the user experience, is measurable in practice, and reflects actual experiences with a user-centric key result.The metrics that makeup Core Web Vitals will evolve over time. The current set focuses on three aspects of user experience – loading, interactivity, and visual stability – and includes the following metrics (and their thresholds):

• Maximum Content Color (LCP): Measures loading performance. For a good user experience, the LCP should appear within 2.5 seconds of the first page load.• First Input Delay (FID): measures interactivity. For a good user experience, pages should have an FID of less than 100 milliseconds.• Cumulative Layout Shift (CLS): measures visual stability. Pages should maintain a CLS of less than 0.1 for a good user experience.For each of the above metrics, a good threshold to measure 75 percent page load, segmented into mobile and desktop, is a good threshold to achieve the recommended goal for most users.Tools that assess compliance with the Core Web Vitals should consider a page successful if it meets the recommended goals of at least 75% for all three metrics listed above.

Core Web Vitals Measurement and Reporting Tools

Google believes that Core Web Vitals are essential to all web experiences. As a result, it commits to disclosing these metrics in all of its popular tools.Core Web Vitals podpirajo orodja kot so PageSpeed Insights, Chrome UX Report, Search Console, Chrome DevTools, Lighthouse in pa Web Vitals Extension.

Tools for measuring Core Web Vitals in a production environment

The Chrome User Experience Report collects anonymous data on actual user metrics for each Core Web Vital. This data allows website owners to quickly assess their performance without having to manually measure analytics on their pages, and tools like PageSpeed Insights and the Core Web Vitals Search Console report.The data provided by the Chrome User Experience Report provides a quick way to evaluate the performance of websites but does not include the detailed pageview telemetry that is often needed for accurate diagnosis, monitoring, and rapid response to regressions. Therefore, we strongly recommend that websites set up their own monitoring of actual users.

Measure Core Web Vitals in JavaScript

Each of the key web vitals can be measured in JavaScript using standard web APIs.The easiest way to measure all Core Web Vitals is to use the web-vitals JavaScript library, which measures each metric in a way that closely matches how all the Google tools above report.With the web-vitals library, measuring each metric is as simple as calling a single function (see the documentation for full usage and API details ):

import {getCLS, getFID, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Once you have configured your site to use the web-vitals library to measure and send data to the Core Web Vitals analytics endpoint, the next step is to aggregate and report this data to see if your pages are meeting the recommended at least 75% page views.An example of this is the Web Vitals report, which allows website owners to measure their key values using Google Analytics.You can also report on each of the Core Web Vitals without writing any code using the Web Vitals Chrome extension. This extension uses the web-vitals library to measure each of these metrics and display them to users as they browse the web.This extension can be helpful in understanding the performance of your own pages, your competitors’ pages, and the web in general.

Photo by **PhotoMIX Company** from **Pexels**

Tools for measuring Core Web Vitals in a development environment

Although all Core Web Vitals are primarily production environment metrics, many can also be measured in a development environment.Development environment metrics are the best way to test the performance of features during development – before they are released to users. It’s also the best way to catch performance regressions before they happen.While measurements in the development environment are an essential part of delivering great experiences, they are not a substitute for field measurement.Site performance can vary greatly depending on the user’s device capabilities, their network conditions, what other processes are running on their device, and how they interact with the site. In fact, each of the Core Web Vitals metrics can have its score affected by user interaction. Only measurements in a production environment can accurately capture the whole picture.

Other Web Vitals

While Core Web Vitals are key metrics to understand and deliver a great user experience, there are other key metrics as well.These other Web Vitals data often serve as proxies or additional metrics for Core Web Vitals to help capture a larger portion of the experience or help diagnose a particular issue.For example, time to the first byte (TTFB) and first content color (FCP) metrics are key aspects of the loading experience and are useful in diagnosing LCP (slow server response time or rendering blocking resources) issues.Similarly, metrics such as total block time (TBT) and time to interaction (TTI) are lab metrics that are key to catching and diagnosing potential interactivity issues that will impact FID. However, they are not part of the Core Web Vitals set because they cannot be measured in the field, nor do they reflect a user-oriented outcome.

Developing Web Vitals

Web Vitals and Core Web Vitals represent the best available metrics that developers have today to measure the quality of online experiences, but these signals are not perfect and future improvements or additions should be expected.Core Web Vitals are important for all web pages and are featured in the relevant Google tools. Changes to these metrics will have a far-reaching impact; as such, developers should expect Core Web Vitals definitions and thresholds to be stable and updated to a pre-announced and predictable annual cadence.Other Web Vitals are often context or tool-dependent and may be more tentative than Core Web Vitals. Worried about how web core vitals updates will affect your website? We are preparing an article for you where you will be able to check and correct the basic things that are necessary for excellent Core Web Vitals metrics. Do not miss the article and sign up to receive news. We create even more for you!