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