Using web vitals to measure user experience on a web page

By G. Lara

Using web vitals to measure user experience on a web page

Google has launched a new initiative called Web Vitals to provide us with a unified guide that identifies the quality signals that are essential to provide an excellent user experience on a web page.

These are complicated concepts from a technical point of view but their motivation is simple and pure: make the user who accesses a web page have a great experience. The better the user experience, the more users will tend to stay on a web page and return to it.

We all know how important it is to make a good first impression. When someone enters a web page, the first impression can make the difference between someone becoming a loyal user or leaving and never coming back. The question is, what makes a good impression, and how do you measure the kind of impression you are making on your users? Is user experience on a web page an important metric?

This is why investigating the metrics proposed by Google seems really interesting to us, it helps us order our priorities when evaluating the user experience on a web page, among other things.

Web vitals metrics to measure the user experience on a web page

The metrics that make up Core Web Vitals are born to measure this precisely and will evolve over time. The current set for 2020 focuses on three aspects of the user experience (load, interactivity and visual stability) and includes the following metrics (and their respective thresholds):

1. Page loading

To measure this the Largest Contentful Paint (LCP) metric is used: it measures the load performance. To provide a good user experience, the page load must occur within 2.5 seconds of the page starting to load.

Nobody likes to visit a web page and wait staring at an empty screen while it loads. We must take into account the widespread use of mobile devices and mobile phone networks. Not everyone has high-speed data plans. The lighter the web page, the less data needs to be transmitted and the better the user experience.

It is not an easy task to keep a web page under this fast loading threshold but it can be achieved by being very careful with the resources that are used and optimizing the loading order of these resources so that they are staggered and on demand. This means not to load large elements such as videos until the user wants to interact with them, load smaller images for mobile screens, and don't overload the web page with programming libraries or font types.

2. Time to interactivity

To measure this one the First Input Delay (FID) metric is used: it measures interactivity. To provide a good user experience, pages must have an FID of less than 100 milliseconds.

Once the web page has loaded it is not pleasant to try to interact with it, I mean, to click on a link, or to touch a button and there is a great delay until the web page reacts. More than one of us have loaded a "dead" web page that is not responding. Not all users are using high computing power devices, the web page has to be reactive and "alive" right away. This threshold is also low: 100 milliseconds, but it can be achieved with proper scripting planning so that the browser can begin to process the necessary event handlers in response to this interaction.

3. Visual stability

For this, the Cumulative Layout Shift (CLS) metric is used: it measures visual stability. To provide a good user experience, pages must maintain a CLS of less than 0.1 points.

It must have happened to all of us, that when you are reading or clicking on a web page that starts suddenly to move its content and this causes your click to fall on another link that you did not want or your eyes lose the thread of the line you were reading. This metric is intended to measure user experience in terms of content stability or stillness. It is not pleasant when the web page looks like a three ringed circus of moving elements.
These unexpected movements on the web page usually happen when the loading of elements is staggered and dynamically added to a web page that is already loaded and is being used.

To quantify this the metric measures the movement of the elements of the web page in each loading frame. If in one frame an element occupies 50% of the screen but in the next frame it moves down 25% of the screen size, the sum of the area that the element occupies during these two frames is taken into account, that is, 50 % + 25% = 75% the "infraction" would in this case be of 0.75 points.
This proves that the threshold that has been set for this metric is also very low, but this means that the user of a web page deserves the best experience and all our efforts must go in this direction.

These metrics are not presented in absolute but relative terms. They are pointers to areas that we should strive to improve.
Now you will be able to recognize them on the web pages you visit or even on your own web page if you have one. If you notice that your website does not comply with any of these premises or you think that it is not usable on all devices, contact us, we can advise you on how to improve your website or better yet create a new website with the main objective of the user experience.

How are these metrics measured? in order to improve the user experience on a web page

Google provides a series of tools such as the API [*] of PageSpeed Insights that we use to make a series of tests on the web pages that we develop in order to optimize the user experience on a web page. Once we have the results, the Ailon Webs team meets to see what improvements can be made to the website and what improvements will have the greatest impact on the user experience of a website.

* [An API is an Application Programming Interface, it is a set of subroutines, functions and procedures that a certain library offers to be used by other software as an abstraction layer]

Conclusion

The Web Vitals or the vital metrics designed by Google to measure the user experience on the 2020 pages are: load, interactivity and visual stability.

These metrics to measure the user experience on a web page will evolve over time, like everything on the internet, it always changes. The important thing is not to lose sight of the end goal: the impression that a user has when using a web page. The better the user experience on a website, the more successful your website will be in the long run.

We can think of it as a kind of certification for web pages, where it will also indicate the areas of improvement in the user experience. It is surprising how a few small changes, sometimes of technical origin and sometimes of design and layout, can have a great impact on the metrics and therefore also on the happiness of the users of your website.

Sources

• Google Developers. Web vitals: https://web.dev/learn-web-vitals/