This content originally appeared on DEV Community and was authored by DEV Community
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
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-04T15:46:25+00:00) What are Web Vitals?. Retrieved from https://www.scien.cx/2022/03/04/what-are-web-vitals/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.