A Comprehensive Guide to Web Vitals: Metrics That Matter for Performance

Introduction

In this day and age of the Web, web performance is critical in determining user engagement and experience. When we talk about web performance, Web Vitals are the key matrices that will help us measure and improve it. In this article, we will explore the basics of Web Vitals and understand how they can help us to improve web performance.

What are Web Vitals?

Web Vitals are a set of metrics introduced by Google to measure the key aspects of user experience. They focus on web performance, emphasizing factors that directly impact how users perceive the speed, responsiveness, and stability of a webpage. In short, web vitals are there to help you measure your website's performance.

Core Web Vitals

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. In this article, we are going to focus on the main 3 Web Vitals.

1. Largest Contentful Paint (LCP)


2. Interaction to Next Paint (INP)


3. Cumulative Layout Shift (CLS)

Largest Contentful Paint (LCP)

LCP defines the time it takes for the largest visible content (e.g., hero image, heading) to load on the screen. The good threshold for LCP is less than 2.5 seconds.

If your website's LCP is higher means the main content of the page takes more time to load, thus resulting in bad web performance.

Interaction to Next Paint (INP)

INP assesses the delay between a user interaction (like clicking a button or typing in an input field) and the next time the browser visually updates the page in response. The good threshold for INP is less than equal to 200 milliseconds.

Previously, we measured this matric using FID (First Input Delay). But unlike the traditional First Input Delay (FID) metric, which only measures the delay for the first user interaction, INP evaluates responsiveness across all interactions on a webpage.

Cumulative Layout Shift (CLS)

CLS is measured by the visual stability of a webpage during the loading phase (e.g., content shifting unexpectedly). A good threshold for CLS is less than 0.1.

Now the calculation for this CLS score is a little bit tricky. To calculate it we need to understand 2 things:

• Impact Fraction



• Distance Fraction




• Impact Fraction
  
  The portion of the viewport is affected by unstable elements. To give an example, let's say 50% viewport height is occupied by a shifting element, the impact fraction is 0.5.




• Distance Fraction
  
  The distance the unstable element moves, relative to the viewport size. To give an example, if an element moves 25% of the viewport height, the distance fraction is 0.25.

Now, the CLS score is the product. of the impact fraction and distance fraction for all layout shifts that occur during the lifecycle of the page.

The formula to calculate the CLS score is:

CLS = Impact Fraction X Distance Fraction 

Tools to Measure Web Vitals

There are several tools available now in the market to measure the Web Vitals. Some of the most popular tools are:

• Chrome Lighthouse


• PageSpeed Insights


• Chrome User Experience Report (CrUX)

You can use any tool of your choice to get started.

Conclusion

In this article, we have learned about What are Web Vitals, Core Web Vitals and how these matrices are used to measure web performance. To learn more about them check out the web.dev performance section here. If you like this blog and you want to learn more about Frontend Development and Software Engineering you can follow me on Dev.to.