Web Vitals
Why do we need to monitor web vitals?
Just having your website up and running is not enough in todays world, it is important to understand the experience that is being delivered to the users, to understand this we can look at some performance metrics to analyze and then make changes accordingly so that our end users have an enhanced experience.
We use an open source tool Lighthouse to generate these metrics. Lighthouse Github Link.
Let's start with the score indexes
Performance Index
This index calculates the value based on the weighted average of the below audit. This score is based out of 100 and the higher the performance index the better it is.
| Audit | Weight |
|---|---|
| First Contentful Pain | 10% |
| Speed Index | 10% |
| Largest Contentful Paint | 25% |
| Time to Interactive | 10% |
| Total Blocking Time | 30% |
| Cumulative Layout Shift | 15% |
For more details about the performance index please visit Performance Scoring
Speed index
Speed Index measures how quickly content is visually displayed during page load.
For more details about the performance index please visit Speed Index Scoring
Additional Resources
To understand all the metrics in great depth you can head over to Web Vitals.