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
