performance-optimization

# Performance Optimization

Systematic approach to identifying and fixing performance bottlenecks.

## Performance Analysis Workflow

```
1. Measure First
   └─→ Never optimize without data
   └─→ Establish baseline metrics

2. Identify Bottleneck Type
   ├─→ Network? (TTFB, downloads)
   ├─→ CPU? (parsing, execution)
   ├─→ Memory? (leaks, GC pressure)
   ├─→ I/O? (disk, database)
   └─→ Rendering? (layout, paint)

3. Apply Targeted Fix
   └─→ One change at a time
   └─→ Re-measure after each change

4. Validate Improvement
   └─→ Compare against baseline
```

## Quick Wins Checklist

### Frontend Quick Wins

| Action | Impact | Effort |
|--------|--------|--------|
| Enable gzip/brotli compression | 60-80% smaller | Low |
| Add caching headers | Eliminate repeat downloads | Low |
| Lazy load below-fold images | Faster initial paint | Low |
| Preconnect to critical origins | 100-300ms savings | Low |
| Remove unused CSS/JS | 20-50% smaller | Medium |
| Code split by route | 50%+ smaller initial | Medium |

### Backend Quick Wins

| Action | Impact | Effort |
|--------|--------|--------|
| Add database indexes | 10-100x faster queries | Low |
| Enable query result caching | Eliminate repeat queries | Low |
| Use connection pooling | Better throughput | Low |
| Fix N+1 queries | 90%+ fewer queries | Medium |
| Add response caching | Sub-ms responses | Medium |

## Core Web Vitals

| Metric | Good | Needs Work | Poor |
|--------|------|------------|------|
| **LCP** (Largest Contentful Paint) | < 2.5s | < 4.0s | > 4.0s |
| **INP** (Interaction to Next Paint) | < 200ms | < 500ms | > 500ms |
| **CLS** (Cumulative Layout Shift) | < 0.1 | < 0.25 | > 0.25 |
| **TTFB** (Time to First Byte) | < 800ms | < 1.8s | > 1.8s |

**LCP optimization:**
- Preload LCP image with `fetchpriority="high"`
- Avoid lazy loading LCP element
- Inline critical CSS
- Use SSR/SSG for critical content

**CLS prevention:**
- Always set width/height on images
- Reserve space for ads/embeds
- Use `fon