Performance Recipes: High-ROI Fixes (Before/After Patterns)

What you’ll learn

• What fixes tend to produce the biggest wins
• How to think in “before/after” experiments
• Patterns that repeat across almost every product

---

30‑second interview answer

Most performance wins come from a small set of patterns: optimize the LCP element (usually the hero image), reduce render-blocking resources, cut client JS/hydration, fix CLS by reserving space and stabilizing fonts, and remove/defer third-party scripts. The key is to validate each fix with measurements before and after.

---

Case study template (copy/paste): make your fix undeniable

Use this structure in PR descriptions and postmortems:

• Baseline (before):
  • LCP:
  • INP:
  • CLS:
  • Device/network profile:
• Hypothesis:
  • (e.g., “Hero image is the LCP element and is late due to format/priority”)
• Change (one variable):
  • (e.g., add sizes, use AVIF, remove lazy-load for hero)
• Result (after):
  • LCP:
  • INP:
  • CLS:
• Guardrail:
  • (e.g., CI budget, Lighthouse threshold, RUM alert)

Why this matters: it forces you to measure, not vibe.

---

Recipe 1: LCP hero image

Before: giant JPEG, lazy-loaded, no dimensions.

After: responsive sources + correct dimensions + priority.

Checklist:

• correct width/height
• WebP/AVIF
• no lazy-load on LCP

---

Recipe 2: INP long tasks

Before: click handler does heavy work synchronously.

After: schedule non-urgent work and keep handler minimal.

---

Recipe 3: CLS from images

Before: unknown image size.

After: reserve space.

---

Recipe 4: CLS from fonts

Before: swap + mismatched fallback.

After: metric-compatible fallback + preload only critical.

---

Recipe 5: Third-party scripts

Before: everything loads at startup.

After: defer, load after interaction/idle, remove unused tags.

---

Production rule of thumb

• Don’t guess. Treat fixes as experiments.
• Prefer fewer, bigger wins.
• Re-measure on a throttled profile.

---

Quick recap

• LCP: hero + critical path.
• INP: long tasks + hydration.
• CLS: reserve space + stable fonts.
• Third-party: defer/remove.

---

Performance checklist (copy/paste)

• Pick one metric to improve
• Change one variable at a time
• Measure before/after
• Keep the fix if it moves the metric (and doesn’t break others)