--- # System prepended metadata title: Introduction of Web Vitals --- # Introduction of Web Vitals --- 2020 May https://web.dev/vitals/ --- Optimizing for quality of **user experience** is key to the long-term success of any site on the web. --- To quantify the experience of your site and identify opportunities to improve. --- # Core Web Vitals --- The current set for 2020 focuses on three aspects of the user experience: * *loading (speed)* * *interactivity* * *visual stability* --- **Largest Contentful Paint (LCP)** measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. https://web.dev/lcp/#what-is-lcp --- **Largest Contentful Paint (LCP)** - The browser will stop reporting new entries as soon as the user interacts with the page (via a tap, scroll, or keypress), as user interaction often changes what's visible to the user (which is especially true with scrolling). https://web.dev/optimize-lcp/ --- **First Input Delay (FID)** measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds. https://web.dev/fid/#what-is-fid --- **First Input Delay (FID)** Why only consider the first input? - first input delay will be the user's first impression of your site's responsiveness - The biggest interactivity issues we see on the web today occur during page load What counts as a first input? - only focuses on input events from discrete actions like clicks, taps, and key presses. --- **Cumulative Layout Shift (CLS)**: measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1. https://web.dev/cls/#what-is-cls --- **Cumulative Layout Shift (CLS)**: `layout shift score = impact fraction * distance fraction` --- **Cumulative Layout Shift (CLS)**: Not all layout shifts are bad. A layout shift is only bad if the user isn't expecting it. - Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations. --- 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. --- **Measurement tool** https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma/related --- **References** https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html https://web.dev/defining-core-web-vitals-thresholds/