{ Passion for code }

© Blog Ailon Webs

3 ways to measure Web Vitals on your website

By G. Lara & M. Soutto

measure web vitals
3 ways to measure Web Vitals on your website

One of the big SEO changes of 2021 is going to be the Web Vitals score of your website. As of May 2021, this score will influence the positioning of your website in search results. It is not yet known how much it will affect search results but what is clear is that the higher Web Vitals score your website has, it will offer your users a better experience and Google will rate your website better.

What are Web Vitals?

They are a new initiative by Google 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.

They are a series of metrics that measure many aspects of a web page, to simplify things somewhat Google is going to set three main ones: the Core Web Vitals.

The Core Web Vitals are three

  • Page loading
  • Time to interactivity
  • Visual stability

You can read all about what Web Vitals are in this other article of our blog: Using web vitals to measure user experience on a web page

Why is measuring Web Vitals on my website important?

One of the SEO trends of 2021 is that Google will add user experience metrics on web pages as one of the hundreds of indicators that Google takes into account when generating search results. This will affect the positioning of web pages in search engines as of May 2021.

How to measure Web Vitals on a web page?

There are 3 main ways to do it:

  • PageSpeed Insights web form
  • The Chrome Lighthouse extension
  • The PageSpeed Insights API

1. Measure Web Vitals using the PageSpeed Insights web form

This is the simplest way of the three, you have to follow these steps:

  1. Copy the url (address) of one of your web pages.
  2. Go to this link https://developers.google.com/speed/pagespeed/insights/ and paste the copied url into the form.
  3. Click on Analize, you wait a moment and see the result.

It is important to understand that there are 2 general scores: one for computer and one for mobile. Below the url form box you will see the two tabs Mobile and Desktop. Normally the score for mobile is lower since Google has other metrics for mobile.

Next, we show you two screenshots of real measurements taken on one of our pages.

measure web vitals
Result of PageSpeed for desktop.
measure web vitals
Result of PageSpeed for mobile.

On this web page you will see the loading seconds for each Web Vital and which ones you can improve.

You can also see how each Web Vital affects the general score of the page, to see this you can click on the link "See calculator". It is interesting because you can vary the scores to see which ones affect this particular web page the most in order to decide what to improve first.

measure web vitals
Screen shot of the Lighthouse scoring calculator.

It is also interesting to see the series of frames that the loading sequence of your web page shows you, this helps you get an idea of how it loads in slow motion and assess if it is how we want it to load or if you have to make changes.

2. Measure Web Vitals with the Chrome Lighthouse extension

To measure Web Vitals this way you need to use Google Chrome web browser and install the Lighthouse extension.

Once you have the extension installed:

  1. Navigate to the web page you want to measure in Google Chrome.
  2. Open Chrome DevTools, pressing Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).
  3. Choose your options and generate the report.

In the Chrome DevTools panel you will see a series of options to generate the report you need. To measure the core Web Vitals we recommend that you choose "Performance" and that you study the reports of Mobile and Desktop.

measure web vitals
Options for measuring Web Vitals with the Chrome Lighthouse Extension.

Below you can see what the result of a measurement of one of our web pages would look like using this extension.

measure web vitals
Report result with Chrome Lighthouse extension.

The advantage of this form of Web Vitals measurement is that you can also do it on a local server on your same computer, but this would only be for development options. The important measurements are the real ones, which are taken in the production web environment.

3. Measure Web Vitals with the PageSpeed Insights API

Google provides us with an API to measure Web Vitals. This option is only for web developers and programmers, as you need a general understanding of the command line interface and web development.

What is an API?

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.

Installation instructions are on the API website.

The API returns a file in JSON format with all the tests performed and the corresponding scores. Like the other tools, there is a JSON file for desktop and mobile tests.

What is JSON format?

JSON is an acronym for JavaScript Object Notation. It is a simple text format for data exchange.

measure web vitals
Screen shot of part of the JSON code returned by the API.

It is our preferred option as it allows us to make general measurements on all the urls that make up the website of a domain and helps us draw conclusions such as which is the slowest page of the domain? What overall fix will have the most impact on domain-wide metrics? So we can greatly improve the Web Vitals score of a domain and improve the user experience on the website, and in doing so we favor search engine positioning.

Screenshot of part of our Ailon Webs console for Web Vitals analysis
Screenshot of part of our Ailon Webs console for Web Vitals analysis.

Conclusions

Web Vitals will have an impact on how websites are measured and developed as from 2021. It is important to start measuring the Web Vitals score on your website and if necessary plan how to improve the score. You must bear in mind that all changes entail a variable waiting time until Google verifies them.

Google is going to perform measurements at domain level so measuring specific pages will not be enough, it is necessary to measure all the urls of a website and assess if improvements are needed.

In this article we have explained 3 ways to measure Web Vitals on your website. If you don't have the time or you want a general report of the situation of your entire website you can contact us and we can offer you a complete audit with the Web Vitals measurement of your website, including recommendations for improvement. It is important to act now, Google will include the Web Vitals in its positioning algorithm and this may affect the results of your website.

Tips

  • Measure the web vitals of your website.
  • Take measurements on desktop and also on mobile.
  • Don't limit yourself to a few urls, all urls count for Google.
  • Google has already said that it will measure ALL urls, even those that are not in the Sitemap of your website or blocked with robots.txt.
  • Try to get all of the urls of your website in the green or as close as possible so as not to lose search engine positioning.
  • Use professionals to get the best results, you can contact us, we will be happy to assist you and help you achieve the best results for your online business.

Sources

  • Web vitals https://web.dev/learn-web-vitals/
  • Tools for Web Developers. Lighthouse. https://developers.google.com/web/tools/lighthouse
  • Get Started with the PageSpeed Insights API https://developers.google.com/speed/docs/insights/v5/get-started

Receive our promotions

Please input a valid email
Please read and accept the data protection checkbox

Categories: SEO positioning

Tags: Web Vitals, seo 2021