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.
-
Interaction to Next Paint (INP): Measures a page's responsiveness to interactions throughout the lifespan of a user's visit to a page.
-
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
|
Good LCP values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement |
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!
INP
|
Good INP values are 200 milliseconds or less, poor values are greater than 500 milliseconds, and anything in between needs improvement |
Interaction to Next Paint (INP) is the successor metric to First Input Delay (FID) that is an important, user -centric metric for measuring a page's overall responsiveness to user interactions because it observes all interactions on a page beginning from the input delay up until the browser has painted the next frame—a low INP means that a page was reliably responsive to user input. (Source: Google, https://web.dev/inp/)
Check out this article from Blue Triangle all about INP!
CLS
|
Good CLS values are 0.1 or less, poor values are greater than 0.25, and anything in between needs improvement |
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