frontend / README.md

Frontend Performance — Senior Interview Prep

2 min read index source

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 (p75) INP (p75) CLS (p75) JS transferred 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.

Cross-references