Web Performance Roadmap: Start Here (2 hours / 1 day / 1 week)

If you’re preparing for frontend interviews (or you’re owning performance for a real production app), you don’t need 50 random tips.

You need a sequence:

1. Know what to measure (and what “good” looks like)
2. Find the bottleneck (don’t guess)
3. Fix the critical path (LCP) and interaction path (INP)
4. Re‑measure and keep guardrails

This page gives you the best path through the Web Performance roadmap.

---

Quick definitions (so you don’t get lost)

• LCP (Largest Contentful Paint): when the main content looks ready.
• INP (Interaction to Next Paint): how responsive the page feels when users click/type.
• CLS (Cumulative Layout Shift): how stable the layout is while loading.

A senior way to talk about performance is: “What’s the critical path for LCP?” and “What’s the hot path for interactions?”

---

Choose your path

Path A — 2 hours (highest ROI)

If you only have 2 hours, do these in order:

1. #01 Core Web Vitals: The Mental Model (LCP, INP, CLS)
2. #02 Performance Debugging Playbook (Chrome DevTools + Real Signals)
3. #09 Next.js Performance (RSC, streaming, caching)
4. #05 JavaScript Cost (hydration, long tasks, shipping less JS)
5. #12 Web Performance Interview Pack (top 25 Q&A)

You’ll be able to answer most performance questions with confidence, and more importantly: you’ll have a debugging loop.

Path B — 1 day (solid interview prep)

Do Path A, plus:

• #03 Images for Performance (sizes, formats, priority, preload)
• #04 Fonts Without Regret (FOIT/FOUT, preload, CLS-safe loading)
• #06 Caching & CDNs (HTTP caching, validation, edge)
• #07 Rendering Pipeline (layout → paint → composite)
• #10 Measuring Performance (Lighthouse vs RUM, budgets)

Path C — 1 week (production-ready)

Do Path B, plus:

• #08 Third-Party Scripts (tag manager hygiene)
• #11 Performance Recipes (before/after case studies)
• #13 CSS Performance (containment, content-visibility)
• #14 Performance APIs (Long Tasks, Web Vitals, observers)
• #15 Offline & Service Workers (caching strategies)

---

What to measure (minimum setup)

If you’re interviewing, you should always be able to say:

1. I measured it (not “I think it’s slow”)
2. I located the bottleneck in DevTools
3. I validated the fix (lab + field if possible)

Minimum metrics to track

• LCP and the LCP element (what actually became the LCP)
• INP (or at least long tasks + interaction delays)
• CLS
• TTFB (especially for SSR apps)

Minimum tooling

• Chrome DevTools: Performance + Network
• Lighthouse (lab) + a RUM signal (field) if possible

---

A senior debugging loop (copy/paste)

When someone says “this page is slow”, do this:

1. Reproduce on a slower profile (CPU 4× / 6×, cache off on first run)
2. Record a Performance trace while doing the real user action
3. Find the first bottleneck:
   • LCP blocked by TTFB, render-blocking, or late resource discovery
   • INP blocked by long tasks, rerenders, or expensive handlers
4. Fix in priority order:
   • shorten the critical path
   • ship less JS / reduce hydration
   • reduce rerenders
   • move work off the main thread
5. Re‑measure and add a guardrail

---

Roadmap (1 → 15)

• #01: /blog/web-performance-core-web-vitals-mental-model
• #02: /blog/web-performance-debugging-playbook-chrome-devtools
• #03: /blog/web-performance-images-sizes-formats-priority-preload
• #04: /blog/web-performance-fonts-fast-without-cls
• #05: /blog/web-performance-javascript-cost-hydration-long-tasks
• #06: /blog/web-performance-http-caching-and-cdn
• #07: /blog/web-performance-rendering-pipeline-layout-paint-composite
• #08: /blog/web-performance-third-party-scripts-containment
• #09: /blog/web-performance-nextjs-rsc-streaming-caching
• #10: /blog/web-performance-lighthouse-vs-rum-and-budgets
• #11: /blog/web-performance-recipes-high-roi-before-after
• #12: /blog/web-performance-interview-pack-25-questions
• #13: /blog/web-performance-css-performance-containment-content-visibility
• #14: /blog/web-performance-apis-long-tasks-web-vitals
• #15: /blog/web-performance-offline-service-worker-caching

---

What’s next after this roadmap?

If you finish these lessons, the next best “performance multiplier” skills are:

• React rendering fundamentals (rerenders, memoization, concurrency)
• Next.js architecture (RSC boundaries, caching, streaming)
• Observability (RUM + tracing + performance budgets)