What are Web Vitals?

PerformanceAdobeMetaGoogle

Web Vitals

Rather than one metric that measures from start of the page to the end of the page. We have four different metrics that measure four different aspects of performance, and these are called web vitals. Three of them (LCP, CLS, and INP) are the Core Web Vitals.

  • FCP: First Contentful Paint
  • LCP: Largest Contentful Paint
  • CLS: Cumulative Layout Shift
  • INP: Interaction to Next Paint

FCP: First Contentful Paint

This is the time from the start, when the user first clicks the link or enters the URL, until the first meaningful content enters the page. It's something was rendered.

The time until the user sees an indication that the page is loading. (Responding Quick)

LCP: Largest Contentful Paint

Throughout the loading cycle, different parts of your screen will draw, and we can measure how much of the screen has been drawn. The time at which the largest percentage of the screen was rendered, is the largest contentful paint.

The time until user sees most of the page and believes it is (almost) ready. (Get To The Point)

CLS: Cumulative Layout Shift

You come to a page and you go to click a button, but just as you're about to click a button. Some reallby obnoxious thing loads in asynchronously and pushes the content down and you almost just click on an ad. This movement is called the layout shift, and the cumulative layout shift is the measurement of all the times that this happens during the lifetime of your page.

The movement distance and impact of page elements during the entire lifetime of the document the user sees. (Don't move stuff)

INP: Interaction to Next Paint

Let's say a page has loaded and you start using it. You click a filter, open a menu, or type in a search box. After each of these interactions, the browser has to run your event handlers and then paint the result on the screen. If the browser is still busy running JavaScript, that paint is late and the page feels stuck. INP measures this time for every click, tap, and key press during the whole visit, and reports one of the slowest ones.

INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. FID only measured the delay before the first click handler could start. INP covers every interaction, and includes the time the handler takes to run and the paint that follows.

The time from a user's interaction until the browser paints the next frame, across the entire visit. (Stay Responsive)

Conceptual