09 · Engineering craft
Performance
Core Web Vitals, loading strategy, and the measurable wins.
Every system-design answer is judged on this. Know the metrics, know how to move them.
Metrics
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Core Web Vitals overview | 🟡 | 45m | #metrics |
web.dev: Web Vitals ⭐ |
| LCP (Largest Contentful Paint) | 🟡 | 45m | #metrics #lcp |
web.dev: LCP ⭐ |
| CLS (Cumulative Layout Shift) | 🟡 | 45m | #metrics #cls |
web.dev: CLS ⭐ |
| INP (Interaction to Next Paint) | 🔴 | 1h | #metrics #inp |
web.dev: INP ⭐ |
| TTFB | 🟡 | 30m | #metrics |
web.dev: TTFB ⭐ |
| FCP & FID (legacy) | 🟢 | 30m | #metrics |
web.dev: FCP ⭐ |
| Lab vs field data (RUM) | 🟡 | 45m | #metrics #tooling |
web.dev: RUM ⭐ |
Loading performance
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Bundle optimization & code splitting | 🔴 | 1.5h | #bundling |
web.dev: code splitting ⭐ |
| Tree shaking & dead code | 🟡 | 45m | #bundling |
web.dev: tree shaking ⭐ |
| Lazy loading (routes/components/images) | 🟡 | 45m | #loading |
web.dev: lazy loading ⭐ |
| Image optimization (formats, responsive) | 🟡 | 1h | #images |
web.dev: images ⭐ |
| Font loading strategy | 🟡 | 45m | #fonts |
web.dev: fonts ⭐ |
| Preload / prefetch / preconnect | 🟡 | 45m | #loading |
web.dev: resource hints ⭐ |
| Compression (gzip/brotli) | 🟢 | 30m | #networking |
web.dev: compression ⭐ |
| Critical CSS & above-the-fold | 🟡 | 45m | #rendering |
web.dev: critical CSS ⭐ |
| HTTP caching & service worker cache | 🟡 | 1h | #caching |
web.dev: HTTP cache ⭐ |
| CDN & edge delivery | 🟡 | 45m | #cdn |
Cloudflare: CDN ⭐ |
Runtime performance
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| List virtualization / windowing | 🔴 | 1.5h | #large-data #rendering |
Flagship ⭐ |
| Infinite scroll vs pagination | 🟡 | 45m | #large-data #ux |
Flagship ⭐ |
| Debounce/throttle & long-task splitting | 🟡 | 45m | #interaction |
web.dev: long tasks ⭐ |
| Rendering performance (reflow/repaint) | 🔴 | 1h | #rendering |
web.dev: rendering perf ⭐ |
| Avoid layout thrashing | 🔴 | 45m | #rendering |
web.dev ⭐ |
| Web Workers offloading | 🟡 | 1h | #workers |
web.dev: off main thread ⭐ |
| Memory leaks & profiling | 🔴 | 1h | #memory |
Chrome DevTools ⭐ |
| React render optimization | 🔴 | 1h | #react |
React deep dive ⭐ |
Tooling
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Lighthouse | 🟡 | 45m | #tooling |
Lighthouse ⭐ |
| DevTools Performance panel | 🟡 | 1h | #tooling |
Chrome DevTools ⭐ |
| Performance budgets | 🔴 | 45m | #strategy |
web.dev: budgets ⭐ |
| Bundle analysis | 🟡 | 30m | #bundling #tooling |
webpack-bundle-analyzer ⭐ |
❓ Rapid-fire web performance interview questions
Real performance interview questions. Answer out loud, then verify above.
- What are the Core Web Vitals (LCP, CLS, INP) and their thresholds?
- How do you improve LCP?
- What causes layout shift (CLS) and how do you prevent it?
- What is INP and how do you make interactions faster?
- How does code splitting reduce bundle size?
- What is tree shaking?
- How do you optimize images (formats,
srcset, lazy loading)? preloadvsprefetchvspreconnect— what's the difference?- How does HTTP caching improve performance?
- What is list virtualization and when do you need it?
- Infinite scroll vs pagination — performance trade-offs?
- How do you debounce/throttle expensive handlers?
- How do you find and fix a memory leak?
- What is a performance budget?
- How do you measure performance in the field (RUM vs lab)?
- How do web workers improve responsiveness?
Related: 02-browser · 12-networking · 17-interview-patterns
Missing something? Add a row.