14.07.2020

Google Web Vitals

Over the last few years, Google has provided more and more tools for measuring and assessing the user experience of a website. Different measurements and ratings still cause confusion. In order to standardise the evaluation, Google created a holistic evaluation system with Web Vitals at the beginning of May.

The previous analysis of the User Experience by Google services has been spread over several shoulders until now. Lighthouse provides an initial assessment of the SEO optimisation of a website in the Chrome browser and gives assessments of possible errors or areas to be optimised. The Chrome Dev Tools are suitable for testing the Responsive design of a website and interpret the code. The Google Search Console also provides information on page speed, as do the Pagespeed Insights. The new Google Web Vitals are now an attempt to summarise the most important findings of the four services mentioned. They basically deal with three aspects of a website: The loading or rendering time, the interactivity and the visual stability.

The user experience of a website can be optimally measured and evaluated with the help of three key figures:

LCP (Largest Contenful Page):

The LCP metric measures the time it takes for the largest element in the visible page content to render from the time the URL is called. This element usually consists of an image, a video or even a larger block of text.

A render time of less than 2.5 seconds is considered good. If it is between 2.5 and 4 seconds, it needs improvement and anything over 4 seconds is considered poor by Google.

FID (First Input Delay):

The FID value measures the time between the first user activity and the browser's reaction. This value is particularly important on very interactive pages where the user moves around a lot.

The FID value is considered good if it is below 100 milliseconds, needs improvement if it is between 100 and 300 milliseconds and bad if it exceeds 300 milliseconds.

CLS (Culmulative Layout Shift):

This indicator is used to evaluate the visual stability of a website. It measures how often or by how much page elements shift unexpectedly. This applies, for example, to elements that influence the layout of a text due to uneven loading times.
The CLS indicator is calculated from two values that are multiplied together: The Impact Fraction and the Distance Fraction.

The impact fraction describes the percentage of a page that is affected by the unexpected displacement of an element. For example, if an element takes up half of a page and then shifts downwards by 25 %, the value of the impact fraction is 75 % or 0.75. The distance fraction, on the other hand, refers to the percentage of a page that is affected by the unexpected shift of an element.
The distance fraction, on the other hand, refers to the distance that the element has moved. In our example, this would be a value of 0.25.
If you multiply both numbers, you get a result of 0.1875 and thus have your CLS value.

Google rates everything below 0.1 as good, up to 0.25 as needing improvement and everything above that as bad.

In addition to the above-mentioned key figures, others can be used to evaluate a website for an optimal user experience. The TTFB (time to first byte), for example, describes the loading speed of a page.

How to get Web Vital's results

The standardisation of the results significantly optimises the analysis process. Currently, the results can only be viewed in a GitHub library. In the long term, however, the Web Vitals will also be displayed in the Search Console and in the Pagespeed Inisghts. A Chrome extension for displaying the results directly in the browser is also in the works.

Conclusion

With Web-Vitals, Google has created a uniform rating system for the quality of a page. The quality of the user experience can thus be precisely measured and evaluated. By measuring different aspects, elements that have a negative impact on the UX can be filtered out and adjusted or improved accordingly. With the help of this evaluation system, the user experience of a website can be qualitatively optimised.

 

Interested?

As a digital agency, we are happy to help you with questions about Google Web Vitals!

Similar articles

Find the following customer projects on this or similar topics

UX Design
UI Design
Atomic Design