Optimization is one of the most important things to do in order to have the long-term success of any website. Google helps developers to optimize their websites as much as possible and for this purpose, we have Web Vitals.

Web Vitals

Web Vitals are the performance metrics that are used to measure how fast, stable, and optimized a website is. Web Vitals are an initiative by Google that helps the developers to deliver a great experience.
There are various metrics that can be used as a performance standard to optimize and improve the experience, including (but not limited to):

• DOM Load -- time to load HTML content
• First contentful Paint (FCP) -- time the browser takes before it renders the very first content
• First Meaningful Paint (FMP) -- when the primary page content becomes visible to the user
• Time to Interactive (TTI) -- time the browser takes to make the page fully interactive

Core Web Vitals

Core Web Vitals are a subset of web vitals that are applicable on every web page. The metrics that make up the Core Web Vitals will evolve with time but for now, it focuses on three aspects of the user experience

• Loading -- how quickly page loads
• Interactivity -- how soon you can interact with the page
• Stability -- how stable the page is

The metrics that makeup Core Web Vitals are:

• Largest Contentful Paint (LCP) -- measures performance
• First Input Delay (FID) -- measures interactivity
• Cumulative Layout Shift (CLS) -- measures visual stability # Image

Largest contentful Paint (LCP)

This is a metric that measures performance - How quickly the largest item is rendered on the screen. It can be an image or a text block.

LCP should occur within 2.5 seconds of when the page first starts loading.

The elements considered for LCP are following:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements
• An element with background image that is loaded via url()
• Block-level elements that contains text nodes

First Input Delay

This is a metric that measures the time between the user performing an action (such as a button click) and the browser processing that action. This metric is about interactivity.

FID of 100 milliseconds or less provides a good user experience.

Cumulative Layout Shift

This metric is to measure the visual stability of the page. You might have experienced this yourself, when you are reading an article and suddenly an image shows up and fits in between the paragraphs, changing the position of paragraphs. Cumulative Layout Shift helps to address such kind of problems by measuring how often it occurs.

CLS of 0.1s or less should be maintained to provide a good user experience.

Measure Core Web Vitals

If you want to measure the Core Web Vitals using JavaScript, the good news is you can by using web-vitals, which is a JavaScript library built by the Chrome team. This library includes other metrics as well such as First Input Delay.

With the web-vitals library, measuring the core web vitals is as simple as invoking a function.

import {getLCP, getFID, getCLS} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

^{* Images taken from web.dev}