Performance monitoring

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.

Exercise Write the reportWebVitals function

Write a reportWebVitals function. Take a metric parameter and call console.log(metric.name, metric.value). Export it.

Show example solution

function reportWebVitals(metric) {
  console.log(metric.name, metric.value);
}
export default reportWebVitals;

Test yourself

Match Web Vitals metrics

LCP

Largest contentful paint
INP

Interaction latency
CLS

Layout shift
TTFB

Time to first byte
What does INP measure?
- Largest contentful paint
- Layout shift
- Response delay after interaction
- Time to first byte
Show answer

Response delay after interaction — INP measures interaction latency.

Fill in the blank: set a Lighthouse threshold

assertions:
  categories:
    performance: ____
    accessibility: 90

Show answer

assertions:
  categories:
    performance: 0.8
    accessibility: 90

Next lesson: Summary - CI/CD and monitoring

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies