The performance of a site can greatly impact the user experience and the business as a whole. According to a study done by Amazon in 2006, every 100 ms added to page load time cost them about 1% in revenue, which was about $107 million (about $3.8 billion today). A study at Google also pointed out they experienced a drop in searches by about 0.21% with about 400 ms added to page load time.

For this reason, Google introduced web vitals in 2020 to provide a unified metric to measure end-user engagement on the web.
There are 3 different values when measuring these vitals: “good”, “needs improvement”, and “poor”, and there is a specific demand from Google’s algorithm regarding each of these metrics.

In this article, we shall take a brief look at the different web vitals and why they are important.

1. Largest Contentful Paint (LCP)

This metric calculates the loading performance of a page. It measures the time it takes to show the user the largest content on the screen. It takes into account only the content above the page’s fold, which is everything that appears on the viewport without scrolling. The items considered are typically images, text elements, background images, and video thumbnails.

It has a stated scoring metric as follows:

• Good: 2.5s and below

• Needs Improvement: 2.5s to 4s

• Poor: 4s and more

2. First Input Display (FID)

This is sometimes called Input Latency, and it measures the time from when the user interacts with a page, e.g., by clicking a button, a link, etc., to when the browser responds to that interaction. This measurement is taken from whatever interactive element the user first clicks on.

It has a stated scoring metric as follows:

• Good: 100ms and below

• Needs Improvement: 100ms to 300ms

• Poor: 300ms and more

3. Cumulative Layout Shifts (CLS)

This metric measures the site’s overall layout stability. It measures the unexpected layout shifts visible to the user as the page loads. This occurs when elements have been shifted after being initially rendered on the DOM. For example, the displacement of text when an image finishes loading on a page. A combination of impact and distance is considered when calculating CLS.

It has a stated scoring metric as follows:

• Good: 0.1

• Needs Improvement: 0.1 to 0.25

• Poor: 0.25 and more

4. Interaction to Next Paint (INP)

This is a relatively new metric and will be officially released in March 2024, which will replace FID. This metric measures user interface responsiveness using data from the Event Timing API. It measures the latency between when the user interacts with the page and the next time the user sees a visual update on the screen.

It has a stated scoring metric as follows:

• Good: 200ms and below

• Needs Improvement: 200ms to 500ms

• Poor: 500ms and more

The above-stated metrics are Google’s core web vitals; however, there are other web vitals that are important to know and measure.

-Time to First Byte (TTFB)

This refers to the time it takes for a browser to receive the first byte of response after it requests the server. In essence, it measures the time required for a DNS lookup, a TLS handshake, and an SSL connection. This is crucial because it is measured before any other core web vitals like LCP, FID, CLS, and INP are measured. Hence, if TTFB is slow, all other web vitals are affected. As a rough guide, most sites should strive to have a TTFB of 0.8 seconds or less.

TTFB is not a core web vital; hence, it’s not absolutely necessary that sites meet the “good” TTFB threshold, provided it doesn’t impede their ability to score well on the metrics that matter.

- First Contentful Paint (FCP)

This measures the time from when the page loads to when any content appears on the screen. For this metric, content refers to text, images (including background images), and SVG elements.
This is different from LCP in that FCP measures the first loaded content on the page, whereas LCP measures when the page’s main contents have finished loading.

It has a stated scoring metric as follows:

• Good: 1.8s and below

• Needs Improvement: 1.8s to 3s

• Poor: 3s and more

-Time to Interactive (TTI)

This measures the time from when the page starts loading to when it’s fully interactive. A page is considered fully interactive when

• The page displays useful content

• Event handlers are registered for the most visible page elements

TTI is reached only after FCP, and a satisfactory TTI score is 3.8 seconds or less. A site that scores 5 seconds or more should strive to improve its TTI.

-Total Blocking Time (TBT)

It measures the time between FCP and TTI. It helps quantify the severity of how non-interactive a page is before it becomes reliably interactive. A low TBT helps ensure the page is usable. A good TBT should be less than 300 milliseconds.

Why are Web Vitals important?

So we have taken a look at the different web vitals and their scoring metrics, but why is it important to know these? Broadly speaking, web vitals help to improve user experience and SEO.

A bad user experience can lead to an increase in bounce rate and, hence, a drop in the conversion rate, as users will tend to leave the site for, most likely, a competitor site. A good example is the study made by Amazon in 2006, as stated above. According to Google, when a site meets the core web vitals thresholds, the bounce rate could drop by up to 24%.

Google cares about giving users fast and smooth results; hence, it takes into consideration the web vitals in calculating search engine rankings, and poor web vitals can push your site down on the Search Engine Results Page (SERP).

Conclusion

In conclusion, as explained above, taking into consideration these web vitals as provided by Google can greatly impact the business in terms of bounce rate and SEO.
In the coming articles, we shall take a deep dive into every one of these vitals to understand how they can be measured, how they can be improved upon, and so much more.

Thanks for reading so far, and see you next time.👋🏻