How to improve Web Vitals score on a web page
By G. Lara & M. Soutto
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.
You can read more about Web Vitals in our blog posts:
- Using web vitals to measure user experience on a web page
- 3 ways to measure Web Vitals on your website
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.
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.
Enable server-side HTTP/2 protocol and 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.
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.
- Web Vitals https://web.dev/vitals/
- CSS https://en.wikipedia.org/wiki/CSS
- Http 2.0 https://en.wikipedia.org/wiki/HTTP/2
Receive our promotions
Categories: SEO positioning
Tags: web vitals, SEO