Core Web Vitals - Plain English
Tags: webdev, webperf, chrome, javascript
Published: 2021-05-08 13:40:55

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](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg) 

**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](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg)

**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.

![Text node moved down](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v33fi3jlc6c2qp6cv7p.png)

![CLS](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg)

**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](https://github.com/GoogleChrome/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](https://github.com/GoogleChrome/web-vitals) library, measuring the core web vitals is as simple as invoking a function.

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

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

<sup>* Images taken from web.dev</sup>