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
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
- Vue performance specifics: Vue Performance — v-memo, shallowRef, markRaw, defineAsyncComponent
- React rendering (Fiber, reconciliation): React
- Build tools (where bundle splitting + tree shaking actually live): Build Tools — Senior Interview Prep
- Backend HTTP version impact (HOL, multiplexing): HTTP Versions — 1.0, 1.1, 2, 3
- Frontend system design (where these budgets get applied): Frontend System Design — Worked Examples