{ Passion for code }

© Blog Ailon Webs

How to improve Web Vitals score on a web page

By G. Lara & M. Soutto

improve web vitals
How to improve Web Vitals score on a web page

In 2021 Google will measure the Web Vitals score of web pages. This score will be important for search engine positioning. In this article we are going to review some common improvement points that can be optimized to improve the Web Vitals of a web page.

Now is the time to improve Web Vitals on your website.

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.

Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

Google Web.dev Philip Walton

You can read more about Web Vitals in our blog posts:

Each web page is made up of different elements, so optimizing is a careful and tailor-made job. The first thing to do will be to measure, the second thing we will have to decide is what optimization actions will have the maximum impact on all the web pages that make up the website. Although Web Vitals covers many tests, we will focus on the Core Web Vitals scores.

Core Web Vitals are three

  • Page loading
  • Time to interactivity
  • Visual stability

To improve web vitals on a web page

Here are some of our tips for getting a better score on Google's Core Web Vitals:

Optimize the CSS of your web page

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

CSS files are render-blocking resources of a web page, this means that they must be loaded and processed before the browser displays the page. Web pages containing unnecessarily large styles take longer to render. So optimizing CSS files is a good idea to improve Web Vitals of a web page.

The first thing we must do is eliminate all the CSS styles that are not being used in the web page. Why load a resource that is not used? Removing unused CSS code will improve the Web Vitals score of the web page.

Specifically, the improvement will be achieved on the First Contentful Paint (FCP) Core Web Vital score and if done well it can have a positive impact on all the pages of the website.

improve web vitals
Lightening the load of the web page will help improve web vitals.

Optimize the JavaScript libraries on your website

What is JavaScript?

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

Today many third-party libraries are used on web pages that are not custom built. A third-party JavaScript library generally refers to scripts that have not been written by the website's developers and can be loaded from third-party servers.

The ideal is to do without this type of libraries as much as possible, and, as we have seen with CSS, they usually load elements that the web page does not use. The current trend is to stop using complex JavaScript libraries, such as jQuery for creating web pages. To improve Web Vitals it is best to create the JavaScript functions that we need, using pure JavaScript language, in order to do without heavy libraries while not losing functionality on the web page.

Sometimes it is not possible to do without third-party JavaScript libraries, for example when we want to use social networks share buttons, metrics and analysis scripts or embedded video players on the web page. In these cases, if you want to continue using these scripts, it is necessary to load them properly so that they do not block the loading of the page.

Optimize website images

Here we return to the same principle: do not load more than what we are going to use. If an image is to be displayed reduced on the screen of a mobile phone, it does not make sense to make the mobile browser download a large image and then reduce it on the screen.

If the web page has been programmed following the Mobile Web Mobile First guidelines, images of the appropriate size for mobile and large screen computers will be loaded. We should remember that Web Vitals measurements are made with two different scores: for mobile and for desktop. Optimizing the size of the images will have a greater impact on improving the mobile Web Vitals score.

Another important point is to choose the appropriate format for the image file (jpg, png, gif, svg, webp) and perform a proper compression of the images on your web page. There are times when correct compression can reduce the size of the image by up to 40% and the difference will not be visible to the human eye.

Images are an important part of web pages. Their size, compression and the way you load them in the browser can greatly improve the Web Vitals score and user experience.

improve web vitals
Screenshot of the loading histogram of a web page. To improve we need to measure.

Enable server-side HTTP/2 protocol and compression

Gzip compression

All modern browsers support and automatically negotiate gzip compression for all HTTP requests. This means that the server transmits the resources that make up the web page in a compressed way to make it faster. Enabling gzip compression can reduce the size of the streamed response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce the cost of data to the client, and improve the processing time of web pages.

HTTP/2 protocol

The goal of HTTP/2 is to decrease latency to improve page load speed in web browsers by enabling: data compression of HTTP headers, multiplexing multiple requests over a single TCP connectiones and pipelining of requests. This minimizes protocol overhead through efficient compression of HTTP header fields and adding support for server push and request prioritization.

HTTP 2.0 does not modify the application semantics of HTTP. All the basics: HTTP methods, status codes, URIs, etc. remain unchanged. The improvements that HTTP 2.0 introduces are the use of a single connection and the compression of headers. This translates into a higher download speed of the resources that make up a web page and a better experience for the user and as a consequence a better Web Vitals score.

These two changes at web server level also translates into an automatic improvement in the Web Vitals score of a web page.

Conclusions on how to improve Web Vitals

Improving the Web Vitals score on a web page will result in an improvement in the user experience. The better experience the user has on a web page, the higher the level of trust they place on the web page, this makes it more likely that the user will return to the web page or make a purchase on it.

Each web page is made up of different programming elements. To improve Web Vitals on a web page it is important to carry out a good measurement and analysis to find the main areas for improvement. Once the parts of the web page that we want to change have been identified, it is important take new measurements to confirm the improvement.

We must remember that Google is going to incorporate the Core Web Vitals score into its ranking algorithm in May 2021. It is better to act now as any change in a web page can take time to be reflected in Google.

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/vitals/
  • CSS https://en.wikipedia.org/wiki/CSS
  • JavaScript https://en.wikipedia.org/wiki/JavaScript
  • Http 2.0 https://en.wikipedia.org/wiki/HTTP/2

Receive our promotions

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

Categories: SEO positioning

Tags: web vitals, SEO