Core web vitals

What are core web vitals

Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page. It is highly recommended that site owners achieve good Core Web Vitals for success with Search engines and to ensure a great user experience generally.

web vitals types

  1. Largest Contentful Paint (LCP)
  2. Cumulative Layout Shift (CLS)
  3. Interaction to Next Paint (INP)
  • First Contentful Paint (FCP)
  • Time To First Byte (TTFB)
  • Total Blocking Time (TBT)
  • Speed Index (SI)

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

Cumulative Layout Shift  (CLS)

measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

Interaction to Next Paint (INP)

measures interactivity. To provide a good user experience, pages should have a INP of 200 milliseconds or less.

INP replaced First Input Delay (FID) in 2024 which were used to measure the time from when a user first interacts with a page (that is, 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 begin processing event handlers in response to that interaction.

First Contentful Paint (FCP)

 FCP measures the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen

Time To First Byte(TTFB)

TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.

Total Blocking Time (TBT)

The Total Blocking Time (TBT) metric measures the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.

Speed Index (SI)

performance metric that shows how quickly the contents of a web page are visibly populated a good speed index value is below 3.4s

How to Measure core web vitals

  • Chrome DevTools measures and reports the Core Web Vitals for a given page in the live metrics view of the Performance panel. This view provides developers with real-time performance feedback as they make code changes.
  • Lighthouse Lighthouse reports on LCP, CLS, and TBT, and also highlights possible performance improvements. Lighthouse is available in Chrome DevTools, as an npm package, and can also be incorporated into continuous integration workflows using Lighthouse CI.

  • WebPageTest includes Web Vitals as a part of its standard reporting. WebPageTest is useful for gathering information on Web Vitals under particular device and network conditions.

  • Yellow Lab Tools is a free online web performance analyzer. It audits a webpage for performance and front-end quality issues. And it's open-source!

References

Made with Slides.com