⚡ Performance Optimization
Making applications faster without premature optimization.
Golden rule
"Measure first, optimize second." — Never guess where the bottleneck is.
Performance checklist
Frontend
- [ ] Minimize bundle size (tree shaking, code splitting)
- [ ] Lazy load images and non-critical assets
- [ ] Use CDN for static assets
- [ ] Optimize images (WebP, responsive sizes)
- [ ] Minimize layout shifts (CLS)
- [ ] Cache aggressively with proper cache headers
Backend
- [ ] Profile slow endpoints (APM tools)
- [ ] Optimize database queries (indexes, N+1)
- [ ] Add caching layer (Redis, in-memory)
- [ ] Use pagination for large datasets
- [ ] Compress responses (gzip/brotli)
- [ ] Use connection pooling for DB
Database
- [ ] Check query plans with
EXPLAIN ANALYZE - [ ] Add missing indexes
- [ ] Avoid SELECT * — fetch only needed columns
- [ ] Use read replicas for heavy reads
- [ ] Archive old data
Caching strategies
| Strategy | Where | TTL | Use case |
|---|---|---|---|
| Browser cache | Client | Hours-days | Static assets |
| CDN | Edge | Minutes-hours | Public content |
| Application cache | Server (Redis) | Seconds-minutes | API responses, sessions |
| Query cache | DB | Varies | Expensive queries |
Cache invalidation
- TTL-based — Expires after a set time (simplest)
- Event-based — Invalidate on write/update
- Versioned keys —
user:123:v2— bump version on change
Common bottlenecks
| Layer | Symptom | Likely cause |
|---|---|---|
| Frontend | Slow first paint | Large bundle, render-blocking resources |
| API | High latency | Slow DB queries, missing cache |
| Database | High CPU | Missing indexes, bad queries |
| Network | Timeout | No CDN, large payloads, no compression |