When we browse any web page, one of the things that directly influences our experience is the loading speed. Many researches show that a page that takes more than 3 seconds to respond, increases the dropout rate by as much as 65%.
This data is devastating, because if we want our users to generate a lead or a purchase when visiting the web, either through Google Ads campaigns or through organic traffic, we must ensure that the speed is optimal.
This is where Google's Core Web Vitals come in. This is a series of metrics created with the objective of analyze the performance of a website based on certain criteria. In this post we will tell you what they are and why you should work on them.
Types of Core Web Vitals
Currently, there are 6 measurement metrics. All of them measure and analyze the time it takes for the web to respond to a certain element such as an image or a CSS file.
LCP: Largest Contentful Paint.
It is the time it takes to load the heaviest element of that page. Let's see an example: let's imagine that we are working on a specific campaign with seasonal offers and we want to add a banner on the home page.
This resource is loaded normally, but generates a large impact on the LCP. This may be mainly due to the image weight (it is recommended that they are always less than 100kb). Also, it can be due to the dimensions or because the format is not the most performance friendly.
In this case we must simply analyze which are the heaviest resources and analyze alternatives that are much lighter. An example of this is usually the initial or header image of the page, which tends to be one of the heaviest elements.
FCP: First Contentful Paint:
Measures the time it takes to display the first item on the screen since accessing the web.
In order to improve this metric it is important to take into account many factors such as server response timeThe main thread is running and how heavy these elements are.
In this image, we can see the loading process from the moment a user enters the web and which are the different contents that are displayed on the screen progressively. In this case, the element that loads first is the text and then the image.
TTFB: Time to First Byte
This measures the time elapsed between the request for a resource and the first byte of the response, the first unit of information sent to the request.
For example, if a user enters a url that does not exist and is redirected to another one, the TTFB will measure from the moment of the click until the new url is received.
This process can be seen in the following graph:
One of the aspects that has a direct impact on this is the server response. It is essential for any website that receives constant traffic to have a server prepared not only to host all the information, but also to be able to receive requests and return responses in the shortest possible time.
CLS: Cumulative Layout Shift.
It is probably the most complex in concept, as many variables are involved. The CLS measures the frequency of element change during the loading process. It is the only metric that does not measure time directly, but gives a score that, the closer to 0, the better.
In this gif we can see what we mean by element changes:
During the loading process, it is normal to see blank parts where an image or text is placed. The problem arises during the rendering process (when the information is displayed on the screen) and the elements that had already been loaded are displaced due to the appearance of another container.
This is very frequent in promotional banners, pop ups that do not work correctly or temporary sections of the web that have a high loading time.
FID: First Input Delay
This metric measures the response time from the time a user first enters a website.
As an important fact, will cease to be used as of March 2024. as a new one called INP will be used. We explain it below so that you can be prepared.
INP: Interaction to Next Paint. The new Core Web Vitals metric.
This new Core Web Vital arises from the need to measure not only the first interaction, but also all the events that occur during a session.
This is a significant improvement from the previous metric measurement, because if we analyze it carefully, all the processes that a user performs are important.
How to improve web performance based on Core Web Vitals:
While each metric is different, there are common factors that can be worked on for overall performance improvement. Here are some of them:
- Improving the server and reducing response time
A server is the container of the web and therefore, it is something in which you should not skimp on expenses. This must be adapted to the needs of your project and respond efficiently to all requests.
To do so, check the plan you have contracted and evaluate possible improvements to be made with your IT team or hosting provider.
- Optimize images correctly
The images are another important resource for any website. Not only do they make our experience more visual and intuitive, but they can also have a direct impact on the sale of a product or service.
To do so, it uses next-generation formats such as webp through modules or plugins. Avoid uploading heavy images to the website and make sure that the size of these is adequate to suit the rendering process.
- Prioritizes resources
This is probably the most complex, as it requires technical knowledge to perform. You must analyze what kind of resources are vital on the web, such as the main CSS files of your theme or the JS involved in the submission of a form.
To do this, you can use tools such as GTMetrix that will help you detect the most important resources or those that could be postponed during loading.
- Minify files
HTML files such as DOM, CSS and JavaScript can become huge if you are not careful. Some plugins can unnecessarily implement content within the web that is not entirely necessary such as empty or overlapping divs, huge CSS where only some code fragments are used and the rest are not, Javascripts that are only used at a specific time, but are loaded in the first place, etc..
These are some improvements, but of course, each system is different and you will have to analyze the possibilities of each one.
The difference that these changes can generate is high in terms of content as we will see in this example:
Core Web Vitals reporting and its influence on user experience
Now that you know what Core Web Vitals are and why they are used to measure performance, it is important to know where you can consult them and what influence they have on our users.
Check the Core Web Vitals of your domain:
You will be able to use platforms such as Page Speed or Google Search Console to know the current status of your domain on both mobile and desktop.
In Search Console:
To do so, go to the platform, select your website and go to the "user experience" section.
There you will see a section with several options. Choose "page experience" and you will be able to see the percentage of urls it considers correct by device.
Here you will be able to observe the existing problems, consult the specific metrics and identify the urls that show this performance.
In our experience, although it is a very interesting section to detect bugs in specific urls, is not entirely accurate and the percentage shown does not correspond in many cases with the Page Speed scores.
Core Web Vitals test on Page Speed:
Go to https://pagespeed.web.dev/ Enter the url of the specific page you wish to analyze.
Keep in mind that each one is different because you don't usually have the same elements on the home page as on a product, for example. We recommend you to add at least 3 urls from different sections, to have a more general evaluation.
Once the analysis is run, you will see a score that reflects an average calculated based on all metrics. You will also be able to see each of the Google Core Web Vitals and the execution time.
Finally, you will be able to learn about possible improvements to be applied.
Influence of Core Web Vitals on UX
In the words of Google Senior Webmaster Trends Analyst John Mueller: "Page load speed is critical to the user experience and can negatively affect conversions. Slow websites can lead to higher bounce rates and lower user retention."
This makes sense, as there are now countless pages to visit so if a user's initial experience is not good, it is quite possible that they will leave the site without even viewing the full content.
There is a direct correlation between speed and conversions.. On average, for every second of page delay, the conversion rate can decrease by as much as 20% according to direct data from Google's Page Speed Insights.
In addition to conversions, another important factor is how poor optimization of Core Web Vitals can influence SEO. This is because user experience is a positioning factor.
Consequently, if your website is not specially optimized for mobile devices, it is very likely that the organic traffic will not be as expected, since Google will position other results before yours.
As you can see, Core Web Vitals are an extremely important factor to take into account on your website. Web speed can influence your conversions, Google Ads campaigns and especially organic positioning, so it is something to always keep in mind at any stage of the project or type of web.
If you want to know how you can improve your users' experience, consult with our SEO experts for more information.
EN 
MX 
