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.

LCP, FID, CLS

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

LCP

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

FID

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

CLS

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)