Performance monitoring
- React course
- Advanced
- Lesson 51/56
- 4 min
Learn to monitor performance with Lighthouse and web vitals.
Performance monitoring
Web Vitals are three core metrics that summarise user experience: LCP (largest contentful paint), INP (interaction latency) and CLS (layout shift). In React the web-vitals package captures them.
You send the values to an aggregation service; for example sendToAnalytics(metric). Adding a Lighthouse audit to CI catches regressions on every push.
Lighthouse also gives accessibility and SEO scores; a low score can fail the build.
Lighthouse audit
Lighthouse reports performance, accessibility and SEO scores. In CI you run it with the lhci command; below a threshold the build fails.
To catch regressions a baseline JSON is saved; later runs compare against it. If a score drops the team is alerted.
For key metrics you set a budget; for example the JS bundle cannot exceed 200 KB.
Practice Write the reportWebVitals function
Write a reportWebVitals function. Take a metric parameter and call console.log(metric.name, metric.value). Export it.
Starter code
// Write the reportWebVitals function hereSample solution
function reportWebVitals(metric) {
console.log(metric.name, metric.value);
}
export default reportWebVitals;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match Web Vitals metrics
| Term | Meaning |
|---|---|
LCP |
Largest contentful paint |
INP |
Interaction latency |
CLS |
Layout shift |
TTFB |
Time to first byte |
2 What does INP measure?
- Largest contentful paint
- Layout shift
- Response delay after interaction Correct answer
- Time to first byte
Explanation: INP measures interaction latency.
3 Fill in the blank: set a Lighthouse threshold
assertions:
categories:
performance: ____
accessibility: 90assertions:
categories:
performance: 0.8
accessibility: 90Explanation: Lighthouse scores are decimals from 0 to 1.