🪴 Web Vitals

Terms

Largest Contentful Paint (LCP)

https://web.dev/lcp/) measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

How to improve

Slow server response times
Render-blocking JavaScript and CSS
Resource load times
Client-side rendering

First Input Delay (FID)

https://web.dev/fid/ measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.

How to improve

Cumulative Layout Shift (CLS)

https://web.dev/cls/ measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

Note that layout shifts only occur when existing elements change their start position. If a new element is added to the DOM or an existing element changes size, it doesn’t count as a layout shift—as long as the change doesn’t cause other visible elements to change their start position.

layout shifts that occur in response to user interactions (clicking a link, pressing a button, typing in a search box and similar) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user
…
Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations.

How to improve

Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes . This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

Total Blocking Time (TBT)

https://web.dev/tbt/ measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.

Time to interactive (TTI)

https://web.dev/tti/ measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly

Guides

Identify slow 3rd party scripts https://web.dev/identify-slow-third-party-javascript/

Efficiently load third-party JavaScript https://web.dev/efficiently-load-third-party-javascript/

Tools

Chrome Extension https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma/related

NPM package https://github.com/GoogleChrome/web-vitals

The Science Behind Web Vitals https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html

One study found that mobile web users didn’t tend to keep their attention on the screen for more than 4–8 seconds at a time.5 This would mean that if they avert their attention before your page has loaded, the time they’re looking away further delays how soon they finally see the page. So a 5-second load time might turn into a 10-second effective delay.

Providing a smooth journey for users is one of the most effective ways to grow online traffic and web-based businesses

https://psycnet.apa.org/record/1964-05029-000

https://www.nngroup.com/articles/response-times-3-important-limits/

seo