Home » Technology » Google Launches Web Vitals For Web Performance And User Experience

Google Launches Web Vitals For Web Performance And User Experience

Web Vitals

Website developers and designers can use tools and a JavaScript library to gain insight into factors relevant to Google’s UX on the web.

Under the title Web Vitals, Google has launched an initiative that aims to provide insight into key factors in the user experience (UX) of websites. Website operators can use tools and a JavaScript library to measure, among other things, the speed at which the page loads and when the interactive functions are provided.

The initiative’s core web vitals include the factors Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). The former is a measure of the loading speed and shows when the most important content of a page is available. FID measures how long it takes for users to interact with the page, and the CLS value shows the visual consistency or stability of a page.

A traffic light system exists for all three values ​​as a quality guideline. A charging time of less than 2.5 seconds is considered good, up to four seconds is in need of improvement and beyond that is bad. For the FID, the green area goes up to 100 ms, while a delay beyond 300 ms is considered bad.

The stability formula

The calculation of CLS is a little more complex and results from the formula:

layout shift score = impact fraction * distance fraction

This impact fraction describes how unstable elements affect the visible area. If an element takes up a total of three-quarters of the viewport, the value is 0.75. This distance Fractionresults from the movement itself: An element shifted by a quarter of the visible height receives the value 0.25.

This results in a CLS of 0.75 * 0.25 = 0.1875 for an element that takes up half the height of the viewport and is shifted down by a quarter.

interrelationships and report

The core metrics are linked to numerous other values. There is an obvious connection between the LCP and the First Contentful Paint (FCP), which measures how long it takes for the browser to display the first element, even if it is just a single button and the rest of the page is still empty. The Time to First Byte (TTFB) value, which specifies how long it takes for the browser to receive the first byte from the server, also has a correlation with the LCP metric.

Web developers and site operators can determine the values ​​in different ways. Among other things, they can access the Chrome User Experience Report, which contains the usage statistics collected and anonymized by Google for users who do not deactivate the statistics collection in the Chrome browser.

JavaScript Library and Chrome Extension

The Internet giant has also published a lean JavaScript library called web-vitals on GitHub, which can be used to determine the three core web vitals and currently the FCP and TTFB values. The core metrics are output in the console window with the following code:

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS (console.log);
getFID (console.log);
getLCP (console.log);

Some metrics allow a second parameter reportAllChangesthat onReportcontrols the output when changes are made using the callback method.

The Web Vitals Chrome Extension, which is also available on GitHub and shows the Core Vitals in a pop-up with the corresponding traffic light color , is currently still marked as Alpha . Further details and plans for the Web Vitals can be found on the Chromium blog at Google .