What are Core Web Vitals and how do they relate to SEO?

How to measure site performance

Until now, the performance of the site can be measured using:

• PageSpeed ​​​​Insights
• Lighthouse
• Search Console
• Raport Chrome UX
• Chrome DevTools
• Vitals Web Extension

These tools are based on data collected from  Chrome User Experience , a set of public user experience data and metrics from users using Chrome in real-world conditions.

However, this data is a sample because it only includes that of users who have given their consent to certain conditions such as history synchronization and activation of usage statistics reports.

Fortunately, we have some tools available to track this data which we will see at the end.

What are core web vitals

Web  Vitals  are standard parameters for  measuring the quality of a user’s browsing experience  on a website. Among them are three called “Core” considered fundamental by Google and consist of metrics and indicators related to the speed,  response time  and  stability of  a website’s appearance.

These are the three main factors:

Largest Contentful Paint (LCP)

The LCP value indicates  the rendering time of the largest element  (Largest) visible on the screen when loading the site and measures the loading performance.

In detail it can be between:

• elements of image type <img>
• elements of type images <image> inside elements of type <svg>
• elemente de tip video <video>
• background image elements loaded via the legendary url() function that are used inside CSS
• A block-level element that contains text or other elements

What matters is what appears in the opening window of the site, while everything “below the fold” is not taken into account.

This measurement assumes that the largest visible object in the window is the main content and  penalizes intrusive content  such as very large titles, huge opening images, videos, banner ads and pop-ups. In the following two examples, the largest element identified are the two main images.

To provide a good user experience, sites should load content “above the fold” in the first 2.5 seconds and are considered slow already after 4 seconds.

Remember that the download time is not taken into account, but the amount of space that the object uses in the user’s window. If the elements are rendered both above and below the page limit, only the visible part is considered relevant.

The same is true for the scale elements. An 800×800 pixel icon when reduced to 50×50 pixels only counts for 50 pixels. If you enlarge the images, only the size of the original image is relevant.

Therefore, as a general rule, it is important not to place “above the fold” videos or images larger than 250 pixels wide. Images of 300 pixels or advertising banners of 336×280 or 300×250 already entail a significant penalty.

First Input Delay (FID)

First Input Delay is the time between a user’s first interaction with a page on your site (such as clicking a link, a button, or any JavaScript listener) and when the browser actually responds to that interaction. It measures interactivity according to the time required for the browser to respond to the user’s action . Other interactions, such as scrolling and zooming, are continuous actions and are not taken into account.

Google takes into account only the first input delay because it will be the initial signal that the user will have about the site’s responsiveness and will be fundamental for shaping the general impression of navigation quality and reliability.

Until now, the main interactivity problems on a website occur during page load, because the code is split into multiple loads or too much JavaScript is loaded ahead of time.

For a good experience, users should be able to interact with the page in 100 milliseconds.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures  the displacement of visible elements and the appearance changes that appear suddenly  and throughout the page visit, causing a change after loading the site area due to resizing.

The CLS calculation is quite complicated and is expressed as the product of two values, the  impact component  and  the distance component  using this formula:

layout shift score = impact component * distance component

The impact component  measures the normal space occupied by an element in the window and the space it occupies after its movement . The union of the visible area of ​​the element before and after movement determines the percentage of the total view and, therefore, its impact component.

The distance component is the  largest distance an unstable element has traveled in the window while moving  (horizontally or vertically)  divided by the largest size of the window  (width or height, whichever is greater) and is always measured as a percentage.

Page Experience

Google developers have listed the criteria taken into account for evaluating a site  and the values ​​used by the algorithm to understand how a user perceives the usability of a web page.

Some indispensable positioning factors that Google requires are:

• optimization for mobile devices
• page loading time as short as possible
• security via HTTPS
• proper structuring of ads with interstitials (advertising pages created with JavaScript or Flash).

How to improve Core Web Vitals

Google recommends fixing all values ​​labeled “Weak”, and some of the most common page fixes should include:

• limit the number of page resources to 50.
• consider introducing AMP