Frontend / README.md

Frontend Performance — Senior Interview Prep

Updated 2 min read index source
On this page3
  1. Files
  2. Performance budget — the contract
  3. Related

Frontend Performance — Senior Interview Prep

The performance topics a senior fullstack interviewer probes: Core Web Vitals (LCP/INP/CLS) as the measurement layer, the rendering pipeline as the model, then the practical knobs — bundle splitting, tree shaking, lazy loading, virtualization, image/font optimization, resource hints, React profiling, and memoization heuristics.

The cardinal rule: measure before optimizing. The senior answer always names the metric, the budget, the tool, then the technique — never the technique alone.

Files

# Topic
01 Core Web Vitals — LCP, INP, CLS
02 Critical rendering path and the rendering pipeline
03 Bundle analysis and code splitting
04 Tree shaking — how it actually works, what defeats it
05 Lazy loading — route, component, interaction
06 List virtualization
07 Image and font optimization
08 Resource hints — preload, prefetch, preconnect, dns-prefetch, modulepreload
09 React profiling and the cost model of re-renders
10 Memoization heuristics — when useMemo/useCallback/memo help vs hurt

Performance budget — the contract

A real budget is per-route, per-metric, with a CI gate. Example:

Route LCP / INP / CLS (p75) JS / CSS transferred
Marketing landing < 2.0s / < 100ms / < 0.05 < 100 KB / < 30 KB
Logged-in dashboard < 2.5s / < 200ms / < 0.10 < 250 KB / < 50 KB
Long-tail content < 3.0s / < 200ms / < 0.10 < 300 KB / < 50 KB

p75 is the Web Vitals convention — 75th-percentile real users. Pass-Pass-Pass = “Good” badge; Fail any one = “Needs Improvement” or “Poor.”

CI gate: Lighthouse CI or webpack-bundle-analyzer --analyzer-mode static + a script that fails when limits are exceeded.

Contents 10