What are Core Web Vitals and how do they relate to SEO?
![What are Core Web Vitals and how do they relate to SEO?](https://absalah.com/wp-content/uploads/2023/08/pexels-pixabay-39284.jpg)
In the first days of May 2020, Google announced on its official blog the introduction of a series of metrics that evaluate the user experience of a website and are considered essential for a good browsing experience and a “more pleasant web”.
These factors are the basis of the ” Core Web Vitals 2020 ” project and will be integrated with SEO through a set of specific UX indicators that will officially become a ranking factor in 2021 .
Google has been committed for a long time to simplify and more efficiently the use of websites, with the aim of facilitating the user’s browsing experience and providing quick and clear answers.
Table of Contents
ToggleHow 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