What are the Web Vitals?

Table of Contents

• Overview
• Core Web Vitals
• Glossary
• Sources

Overview 

Web Vitals is an initiative by Google to provide a standardization for judging site performance in reference to the user's experience. The purpose of the Core Web Vitals is to simplify performance metrics into the metrics that Google has decided that sites should primarily focus on for an optimal user experience. There is a video of Blue Triangle's CTO, Tim Grant, briefly explaining Core Web Vitals available here. 

Core Web Vitals

The Core Web Vitals are subject to change as the needs of users and site owners evolve. "The current set (of Web Vital metrics) focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics: 

• Largest Contentful Paint
• First Input Delay 
• Cumulative Layout Shift  

For each of the above metrics, to ensure you're hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices." (web.dev)

Glossary

Largest Contentful Paint: the amount of time to render the largest content element visible in the viewport, from when the user requests the URL. The largest element is typically an image or video, or perhaps a large block-level text element. This is important because it tells the reader that the URL is actually loading. (support.google)

First Input Delay: The time from when a user first interacts with your page (when they clicked a link, tapped on a button, and so on) to the time when the browser responds to that interaction. This measurement is taken from whatever interactive element that the user first clicks. This is important on pages where the user needs to do something, because this is when the page has become interactive. (support.google)

Cumulative Layout Shift: CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. The score is zero to any positive number, where zero means no shifting and the larger the number, the more layout shift on the page. This is important because having page elements shift while a user is trying to interact with the page is a bad user experience. If you can't seem to find the reason for a high value, try interacting with the page to see how that affects the score. (support.google)

Sources

web.dev

support.google