Understanding Metrics
Next.js Metrics
- Next.js-hydration (Hydration Duration) | Length of time it takes for the page to start and finish hydrating (in ms)
- Next.js-route-change-to-render (Before Render Start) | Length of time it takes for a page to start rendering after a route change (in ms)
- Next.js-render (Before Hydration Duration) | Length of time it takes for a page to finish render after a route change (in ms)
Key Lighthouse Metrics
- Performance | Identifies areas that may lead to slow performance or reduced responsiveness, such as large images.
- Accessibility | Analyzes performance against accessibility best practices, including compatibility with assistive technology.
- Best Practices | Recommendations against the best practices in modern web development.
- SEO | Highlights potential improvements to improve search engine performance.
Performance Web Vitals
- First Contentful Paint (FCP) | The time at which the first text or image is painted.
- Time to Interactive (TTI) | The amount of time it takes for the page to become fully interactive.
- Speed Index (SI) | How quickly the contents of a page are visibly populated.
- Total Blocking Time (TBT) | Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
- Largest Contentful Paint (LCP) | The time at which the largest text or image is painted.
- Cumulative Layout Shift (CLS) | The movement of visible elements within the viewport.
