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
| Reference | Description | |-----------|-------------| | frontend-perf.md | Bundle analysis, rendering, Core Web Vitals | | backend-perf.md | Query optimization, caching, async patterns | | load-testing.md | k6, Artillery patterns, CI integration | | profiling-guide.md | Chrome DevTools, Node profiling, flame graphs |