Performance Optimization
Systematic approach to identifying and fixing performance bottlenecks.
Key Principles
- Measure first — Never optimize without data; establish baseline metrics
- Identify bottleneck type — Network, CPU, memory, I/O, or rendering
- One change at a time — Apply targeted fix, re-measure, compare against baseline
- Quick wins first — Check compression, caching, indexes, N+1 queries before deep optimization
Core Web Vitals Targets
| Metric | Good | Poor |
|---|
| LCP (Largest Contentful Paint) | < 2.5s | > 4.0s |
| INP (Interaction to Next Paint) | < 200ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | > 0.25 |
Quick Start Checklist
- Measure baseline (Lighthouse, RUM data, or APM)
- Identify bottleneck type: network, CPU, memory, I/O, or rendering
- Check quick wins: compression, caching headers, indexes, N+1 queries
- Read relevant reference for deep optimization
- Apply fix, re-measure, validate improvement
- Set performance budgets and enforce in CI
References
