The Core Web Vitals

Table of Contents

• Overview
  • LCP
  • FID
  • CLS
• Sources

Overview

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. 

The Core Web Vitals, as of Spring 2022, are: 

• Largest Contentful Paint (LCP): Measures the time from navigation to the time when the browser renders the largest bit of content from the DOM.
• First Input Delay (FID): Measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
• 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.

Blue Triangle will continue to support these new metrics as they are further rolled out to other browsers and continue to mature within Chrome.

LCP

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful. (Source: Google, https://web.dev/lcp/)

Check out this article from Blue Triangle all about LCP!

FID

First Input Delay (FID) is an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable. (Source: Google, https://web.dev/fid/)

Check out this article from Blue Triangle all about FID!

CLS

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful. (Source: Google, https://web.dev/cls/)

Check out this article from Blue Triangle all about CLS!

Sources

https://web.dev/vitals/

https://web.dev/lcp/

https://web.dev/cls/

https://web.dev/fid/