Since May 2021, the Google algorithm has included in its Core Web Vitals three basic pillars to measure the experience of a website: performance, responsiveness, and visual stability. With these metrics, developers have enough data to improve pages and provide users with a good web experience, greatly helping SEO positioning. Therefore, it is very important to consider these metrics when creating a professional website or online store.
What are Core Web Vitals?
The Core Web Vitals are in charge of measuring the user experience and calculating the time it takes us to interact with a page. The three columns that support the page experience are:
- Load performance: The speed at which a website loads so that everything is displayed on the screen.
- Responsiveness: agility in the page’s reaction when a user enters it.
- Visual stability: indicates if the elements that make up the Web move while loading.
Further, To calculate all this, Google has defined three main metrics, which are already known as Core Web Vitals.
The three main metrics and their ideal values
LCP
LCP (Largest Contentful Paint). Measures the time it takes for the largest content to appear on the screen. It can be an image or a block of text. A high score indicates that the site is fast to load.
Lastly, For this metric, the ideal value would be within the first 2.5 seconds of page load. With a value greater than 2.5, but less than 4 seconds, we would need to improve, while anything above is considered poor performance.
FID
FID (First Input Delay). Calculates the time it takes a site to react to the first user interaction. For example, a click on a button on the page. You get a good score if you react quickly.
Furthermore For Google, the response to user interaction (clicks, keystrokes, etc.) should be under 100ms. Below 300ms an improvement is contemplated and anything over that amount is a bad result.
CLS
CLS (Cumulative Layout Shift). Check the visual stability of a website, or what is the same, and observe and measure the frequency with which the elements of the website move while loading.
The visual stability metric should be below 0.1. A result to improve below 0.25 is considered and everything above it is considered a bad one.
Other metrics to check
In addition to the three previous metrics, we must take into account some additional factors that will help us diagnose a specific problem and obtain better results, giving our users a better experience on the web. Next, we talk about the:
Speed Index (SI)
This metric calculates the time in which the content of the page is rendered. To do this it will capture a video from the web loading in the browser and measure it frame by frame. The faster the content loads, the better the score, so a figure of 3.4 seconds or less will be considered a good result.
First Contentful Paint (FCP)
This is the metric that calculates the time it takes for the browser to display any content in the document object model (DOM), unlike LCP, which measures the rendering time of the content that occupies the most space on the page. This contains images, texts, and non-blank canvases. A good user experience puts an FCP score of 1.8 seconds or less.
Time to Interactive (TTI)
The Time to Interactive (TTI) metric is the time that elapses from when the page begins to load until enough resources are obtained to make it interactive. Google considers it interactive if:
- Show content that we can use
- Responds to user interactions in 50ms
- Event handlers are registered for almost all visible page elements
An ideal score for TTI is 3.8 seconds or less.
Total Blocking Time (TBT)
Total Block Time (TBT) is the amount of time that long tasks (more than 50 MS) block the page, impacting its usability.
To calculate the TBT, it is first necessary to calculate the blocking time of each task and add their results.
Equally important, Only times greater than 50 MS (time considered blocking) will be added. That is, if a task has a duration of 250 MS, 50 MS will have to be subtracted, and if a task has 20 MS, it will not be counted. 200 MS for TTI is a good score.
Time to First Bye (TTFB)
The TTFB metric is the one that measures the time from the request for a resource to when the first byte of the response begins to arrive. Or what is the same, if the browser takes time to receive the data from the server, the slower the page will be displayed.
In addition, The sum of these request phases determines the TTFB:
- redirect time
- Service worker startup time (if any)
- DNS lookup
- TLS Connection and Negotiation
- The time between the request and the arrival of the first byte of the response
Besides, It is recommended that the server responds to requests down to the first byte in 0.8 seconds or less.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a metric that evaluates the responsiveness or interaction delay of a page. It measures the latency of all the interactions that a user has made with the page. If the INP is low, the page can respond quickly to most user interactions.
Tools to Measure Web Vitals
There are many tools that are used to monitor Web Vitals and improve the performance of our website. Let’s see the most prominent:
- Page Speed Insights. Google offers this tool as a complete measurement service and also offers us advice on how to improve the results.
- Lighthouse. Although it was initially created to audit PWAs (Progressive Web Apps), it is now an extraordinary tool for monitoring performance. It has audits that the previous one does not and even does some SEO strategy.
- Search Console Core Web Vitals report. With the Search Console itself, we can directly obtain a report on our website and know its performance. Since version 88, Chrome already has tools to generate Core Web Vital reports. For their part, successive versions have been and will continue to add new functionalities in this regard.
- Webpage Test. It is an open-source tool that provides information about the performance of a web page under a variety of conditions. The tests can be executed online, from different locations, and in real browsers. It has a free plan that perfectly covers our needs and another Premium plan loaded with more options.
- TREO Site Speed. Especially focused on experience and users, TREO is another great tool that helps us understand how our website responds to real user queries. In this way, we will obtain a guarantee that what is shown is close to reality.
- Cumulative Layout Shift Debugger. The purpose of the Cumulative Layout Shift Debugger is to show the cumulative design changes of a website to make it easier to identify what we need to improve on the initial load of our page, both in its desktop and mobile versions.
