Monitoring and Debugging

Find performance bottlenecks with Web Vitals, browser profiling, server traces, bundle analysis, and production investigation workflows.

45 min

7 sections

monitoring

debugging

analytics

profiling

web-vitals

01. Use an investigation workflow

Section 1 of 7

Debugging performance is a narrowing process. Decide whether the issue is field-only or reproducible locally, identify the affected route and user segment, classify the bottleneck, make one change, then verify with the same metric that exposed the problem.

text

Performance triage checklist:
1. Confirm the symptom: LCP, INP, CLS, TTFB, memory, or error rate.
2. Segment the data: route, device class, country, browser, tenant, and release.
3. Reproduce with throttled network and CPU in browser DevTools.
4. Classify the bottleneck: server, network, JavaScript, rendering, image, font, or third party.
5. Inspect the exact route bundle and server logs for that release.
6. Ship the smallest fix that targets the measured bottleneck.
7. Watch p75 and p95 after deploy, not just local Lighthouse scores.

Performance Optimization

Production Observability and Security

Back to Course