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:

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?”

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

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

Do Path A, plus:

Do Path B, plus:

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

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

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

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