Performance Profiling
Rule: Measure First
Never optimize without profiling. Identify the actual bottleneck before changing code.
Frontend
- Lighthouse: LCP, FID, CLS, TTI
- Chrome DevTools: Performance tab, Network throttling
- Bundle:
npx vite-bundle-visualizeror webpack-bundle-analyzer - React: Profiler, why-did-you-render
Backend
- Response time: P50, P95, P99
- Database: Slow query log, EXPLAIN
- Memory: Heap snapshots, leaks
Critical Path
- What does the user do first?
- What blocks the initial render?
- What blocks the primary action?
Before/After
- Record baseline metrics before changes
- Re-measure after each optimization
- Compare before claiming improvement
Optimization Order
- Measure and identify bottleneck
- Fix the biggest impact first
- Validate with metrics
- Document the change