Frontend Performance Path

Performance skill is a loop: measure → fix → prevent. This path builds that loop, not a bag of random tips.

Interview map: Performance talking points. Browser base: Browser interview questions.

Stage 0 — Prerequisites

• Comfortable with DevTools Network + Performance
• JS main-thread mental model — Event loop
• How browsers load a page

Stage 1 — Measurement mindset

Goals: Lab vs field; p75; metrics definitions.

• Measuring performance mindset
• Core Web Vitals
• Lab vs field data
• Lighthouse interpretation
• RUM
• PerformanceObserver

Checkpoint: Report p75 LCP/INP/CLS for a real page (CrUX or your RUM).

Stage 2 — Loading path

• Critical rendering path
• Network waterfall reading · Network tab interview
• LCP tactics
• Image optimization · Responsive images
• Font loading
• Critical CSS
• Preconnect & dns-prefetch
• Compression
• TTFB
• HTTP caching · Asset fingerprinting
• HTTP/2 & HTTP/3

Checkpoint: Improve LCP on a demo page by ≥30% with evidence.

Stage 3 — JavaScript cost

• JS bundle budget
• Code splitting strategies
• React lazy
• Tree shaking
• Third-party script cost

Checkpoint: Route-based split; measure bundle delta in CI locally.

Stage 4 — Runtime & interactivity

• INP tactics
• Long tasks & yielding
• scheduler.yield
• Idle work
• Avoid layout thrashing
• Reflow vs repaint
• Main vs compositor
• Long tasks API
• Event timing INP

Checkpoint: Break a long task; show shorter interactions in Performance panel.

Stage 5 — Stability (CLS)

• CLS tactics
• Layout instability API
• Reserve space for images/ads/fonts

Checkpoint: Eliminate a layout shift you can reproduce.

Stage 6 — Framework performance (React)

• React performance checklist
• React DevTools profiler
• React.memo · useMemo/useCallback
• List virtualization · Virtual lists perf
• Memoization tradeoffs
• Concurrent features overview

Checkpoint: Profile a slow list; fix with virtualization or state colocation — not blind memo.

Stage 7 — Institutionalize

• Performance budgets in CI
• RUM dashboards + alert on regressions
• Perf review in design docs
• Error monitoring & RUM design

Checkpoint: Budget fails a PR intentionally once; team understands the signal.

Stage 8 — Interview & leadership

• Performance talking points
• Case study story with metrics — Behavioral stories
• Design: perf for feed/gallery — News feed

Suggested projects

1. Optimize a content site LCP end-to-end
2. Bundle analysis on a React app
3. Virtualize a 10k-row table
4. Add Lighthouse CI budgets

Case-study template (use for portfolio + interviews)

Context: page/app, device, user segment
Baseline: metric + percentile + date
Hypothesis: top cause from evidence
Change: what shipped
Result: new metric + confidence
Guardrail: budget / CI / RUM alert

Interviewers and staff promotions both respond to this shape. Vague “I improved performance” does not.

Cadence for a product team

Cadence	Activity
Per PR	Bundle/budget checks when relevant
Weekly	Glance RUM for regressions
Monthly	Pick one vitals villain; ship a fix
Quarterly	Revisit third parties and architecture

Pair with Performance talking points before loops.

What to skip early

• Micro-optimizing reducers before measuring
• Rewrites for perf without RUM
• Premature Workers for tiny work
• Celebrating Lighthouse 100 with bad field data
• Memoizing the entire tree “just in case”

Related on this site

• Core Web Vitals
• Browser DevTools performance
• Network tab debugging
• Frontend roadmap
• Interview hub

Further reading

• web.dev — Vitals
• Chrome performance docs

If you cannot show a metric moving, you didn’t finish the exercise.