perflisted

# Performance Audit The budgets below are the project's decisions. The optimisation techniques are not restated here — you know them. ## 1. Measure ```bash npx next build 2>&1 | tail -30 # bundle sizes npx lighthouse http://localhost:3000 --output=json --quiet ``` Measure before changing anything. A perf change with no before/after number is a guess. ## 2. Budgets | Metric | Good | Needs work | Poor | |--------|------|------------|------| | LCP | < 2.5s | 2.5–4s | > 4s | | INP | < 200ms | 200–500ms | > 500ms | | CLS | < 0.1 | 0.1–0.25 | > 0.25 | | FCP | < 1.8s | 1.8–3s | > 3s | | TTFB | < 800ms | 800–1800ms | > 1800ms | | Bundle | Target | If over | |--------|--------|---------| | Total JS | < 200KB gzipped | Code split, lazy load | | Single chunk | < 50KB | Dynamic import | | Image | < 100KB | WebP, compress, lazy load | | Font | < 50KB | Subset, `font-display: swap` | ## 3. Fix in this order Highest yield first, and stop when you are inside budget: 1. **Request waterfalls** — parallelise, hoist fetches, preload what blocks LCP. 2. **Payload** — images, then fonts, then JS. An unoptimised hero image usually outweighs every code change you could make. 3. **Bundle** — split routes, dynamic-import anything below the fold. 4. **Server** — cache, stream, move work off the request path. 5. **Re-render optimisation last.** It is the most invasive and the least often the actual cause. ## 4. Report ``` Performance Audit ───────────────── LCP: 1.8s ✅ INP