DEV Community 👩‍💻👨‍💻

Cover image for What are Web Vitals?
Dreamy Developer
Dreamy Developer

Posted on

What are Web Vitals?

Web Vitals

Proposed by Google to measure the quality of user experince on web and improve web performance.


Measured by the above three aspects of website

Largest Contentful Paint (LCP): measures loading performance. Time that browser takes to render the element having largest height in the viewport of the webpage
e.g. large slider image in the hero section.

  • Good < 2.5 seconds
  • Average < 4 seconds
  • Poor > 4 seconds


First Input Delay (FID): measures interactivity. There might be a delay in browser performing user's action upon user's interaction becasue main thread might be busy parsing and executing some large Javascript.

  • Good < 100 ms
  • Average < 300 ms
  • Poor > 300 ms


Cumulative Layout Shift (CLS): measures visual stability. The sudden changes on webpage e.g. due to asynchronous loading of content, loading of video with unknown dimensions or an image.

  • Good < 0.1
  • Average < 0.25
  • Poor > 0.25


Measuring web vitals

  • use npm package web-vitals to monitor your app.
  • Use Chrome extension web-vitals
  • Run in Chrome DevTools Lighthouse

Top comments (0)

🔠 Find your favorite font

You can change your default font in Settings.