Google created web vitals to standardize site performance across the entire internet. Web vitals are used to generate a score for your web site against a standard.
This generated score can affect the SEO of the webpage, as Google won’t prefer sites which are under-performing to be listed at the top.
The data representing the site performances that is collected by Google is maintained in a publicly available collection of User Experience data called CrUX or Chrome User Experience, and gets generated as users browse different websites.
An average or baseline is calculated based on user experience data received from all the sites on the internet and then that information is used to let the user know how its site is performing in certain areas as compared to other users.
3 important (Core) Web Vitals
There are many web vitals but Google recommends users to work upon 3 of them which will have a profound impact on the site’s ranking in the search results, or the SEO, and on the user experience.
Largest Contentful Paint (LCP)
LCP is the time the site takes to load the largest piece of content on the page. It is used to measure site’s loading performance.
Google recommends LCP within 2.5 seconds from your page’s first load request for a better user experience.
Google has also noticed that if LCP is > 3 secs, 53% of users back out from the website, and hence Google doesn’t usually include such websites in the top results.
Usual causes of high LCP -
- Oversized files
- Uncompressed images
- Bad hosting
First Input Delay (FID)
FID is the amount of time from the moment user attempts to interact with the site up until the time the site is actually able to process the event handlers.
In simple terms, time taken by your website to actually become responsive to interactions.
The recommended FID is < 100ms. Any greater than that, the users might notice. So, as soon as a button loads, it should be interactive within 100ms.
Usual cause of FID is bloated script (JavaScript) files, which takes longer to get executed as JS is a single threaded language.
Cumulative Layout Shift (CLS)
CLS is used to measure a website’s visual stability by measuring how many layout shifts occur on screen.
It happens whenever there is an unexpected shift of positioning of an on-screen element, which in turn displaces other elements as well, which can lead to a bad user experience.
There are 2 calculations Google uses to further calculate CLS -
- Impact Fraction - How much of the viewport has shifted in the percentage value.
- Distance Fraction - By how much distance, the edge of the displaced element has shifted, again in terms of percentage.
These 2 values are multiplied in order to get a CLS score.
Google recommends that this value should be < 0.1.
The most common reason for a bad CLS score are bad CSS styling.
A new Core Web Vital - Interaction to Next Paint (INP)
Google introduced a new Core Web Vital, namely INP, which has replaced FID in March 2024 as FID was only focused on interactions just after page load. And Google noticed that majority of interactions occur after the initial load/render.
Hence INP was introduced to measure time taken by a site after a click, tap and a key press till the time the user is presented with a visual feedback.
It addresses the major issue when user has clicked on something and nothing has happened for a while which leads to frustrations and rage clicks.
Threshold for a good INP is < 200ms.
