Core Web Vitals, what are they and how to improve your website?

Versión en español

Core Web Vitals?
Core Web Vitals are a Google initiative announced in 2020, which aims to improve user experiences and loading times. They establish a series of unified criteria that must be followed, and that Google began to take into account when positioning our website in its search engine starting in February 2022.

These Core Web Vitals are easy to follow. There are only three and each one mentions an important aspect of the user experience.

Large Contentful Paint (LCP)
It refers to the content that takes up the most space (video, image, text...) on the page without scrolling. This metric measures how long it takes to view this part after the page starts loading. Depending on the number of seconds it takes to be completely visible, there are three possible scores:

• Good: Less than 2.5 seconds.
• Could be improved: Up to 4 seconds.
• Slow: More than 4 seconds.

First Input Delay (FID)
It measures the responsiveness and interactivity of the page, that is, how much time passes from when the person does something until it is responded to. Related to this metric, we must take into consideration:

• First content display (FCP): Time between the beginning of loading until any element is seen on the screen.
• Time to Interact (TTI): Interval between when loading begins until secondary resources are available, and an appropriate response can be made.
• Total blocking time (TBT): Amount of time between the FCP and the TTI.

These are the possible values:

• Good: Less than 100 milliseconds.
• Could be improved: Less than 300 milliseconds.
• Slow: More than 300 milliseconds.

Cumulative Layout Shift (CLS)
It indicates the number of unexpected changes that happen in the design, its visual stability. This measure was created to avoid annoying situations in which an element suddenly appears causing people browsing to click by mistake. These situations are due to the asynchronous loading of some data or elements that are added dynamically according to certain circumstances.

CLS differs from the others in that it does not measure time, but rather the magnitude and frequency of changes. Based on them, it shows a score. With each change it adds up and in the end it collects everything observed in an assessment. The higher the rating, the worse. Its possible values:

• Good: Less than 0.1.
• Could be improved: Less than 0.25.
• Slow: Greater than 0.25.

How to measure our Core Web Vitals?
Some tools that we can use are:

• Lighthouse: This tool includes audits that allow us to check our CWV and ways to fix diagnosed problems. Within Lighthouse the weight of each of these metrics is like this: FCP (15%), LCP (25%), SI(15%), TTI( 15%), CLS(5%) and TBT (25%).

• Lighthouse Calculator: With this tool you can know the score you would obtain based on the values you enter.

• Search Console: They obtain their data from real users. If we get into the detail, we can see exactly which metric we are violating and which pages are affected.
• Web Vitals Extension: Gives us the 3 main values that we have covered in this article.

• And many more.