Web Performance (Interview Prep)
A structured roadmap of performance fundamentals that show up in real frontend interviews and real production apps. Start top-to-bottom.
Series: Web Performance
Start here
Web Performance Roadmap: Start Here (2 hours / 1 day / 1 week)
A guided entry point into the Web Performance roadmap with curated paths (2 hours / 1 day / 1 week) + exactly what to measure and why it matters in interviews.
Roadmap (16)
Practice Web Performance articles →- 1
Web Performance Roadmap: Start Here (2 hours / 1 day / 1 week)
A guided entry point into the Web Performance roadmap with curated paths (2 hours / 1 day / 1 week) + exactly what to measure and why it matters in interviews.
4 min read - 2
Core Web Vitals: The Mental Model (LCP, INP, CLS)
A high-signal mental model for LCP, INP, and CLS: what they measure, what actually moves the needle, and how to debug them in real apps.
~18 min - 3
Performance Debugging Playbook (Chrome DevTools + Real Signals)
A senior-level workflow to diagnose performance issues: find the bottleneck, verify the hypothesis, ship the fix, and prevent regressions.
3 min read - 4
Images for Performance: Sizes, Formats, Priority, and Preload
How to ship fast images: responsive sizes, AVIF/WebP, LCP hero strategy, lazy loading, and when preloading helps (or hurts).
3 min read - 5
Fonts Without Regret: Fast Loads, No CLS
How fonts hurt LCP/CLS, when to preload, how font-display works, and practical strategies to avoid layout shift with good typography.
2 min read - 6
JavaScript Cost: Hydration, Long Tasks, and Shipping Less JS
How JS hurts INP and load performance, how to find long tasks, and practical patterns to reduce client JS in modern apps (especially Next.js).
4 min read - 7
Caching & CDNs: HTTP Caching That Actually Works
A practical guide to cache-control, ETag, immutable assets, and CDN strategy to reduce TTFB and speed up repeat visits.
2 min read - 8
Rendering Pipeline: Layout, Paint, Composite (and How to Avoid Jank)
A practical mental model of the browser rendering pipeline and how common coding patterns cause forced reflow, jank, and slow interactions.
~16 min - 9
Third-Party Scripts: Containment Strategies That Keep Pages Fast
How third-party scripts hurt performance, how to measure the damage, and pragmatic strategies: defer, isolate, audit, and remove.
2 min read - 10
Next.js Performance: RSC, Streaming, and Caching Patterns
How Next.js (App Router) affects performance: server components, client boundaries, streaming, caching, and avoiding accidental JS bloat.
2 min read - 11
Measuring Performance: Lighthouse vs RUM (and Setting Budgets)
How to measure performance like a pro: lab vs field metrics, what to trust, and how to set practical budgets to prevent regressions.
2 min read - 12
Performance Recipes: High-ROI Fixes (Before/After Patterns)
A collection of practical performance fixes with before/after patterns: LCP hero, INP long tasks, CLS shifts, caching, and third-party containment.
2 min read - 13
Web Performance Interview Pack: 25 Questions + Best Answers
High-signal web performance interview questions with crisp answers: Core Web Vitals, caching, rendering, images, fonts, JS cost, and debugging.
11 min read - 14
CSS Performance: contain, content-visibility, and Rendering Cost Control
How to reduce rendering cost with modern CSS tools: containment, content-visibility, and avoiding expensive effects that trigger heavy paint/layout.
2 min read - 15
Performance APIs: Web Vitals, Long Tasks, and Real Metrics
Understand the browser APIs behind performance measurement: PerformanceObserver, long tasks, navigation timing, and capturing Web Vitals in real apps.
2 min read - 16
Offline & Service Workers: Caching Without Breaking Users
A practical introduction to service workers and offline caching strategies, including common pitfalls (stale content, cache invalidation) and when to avoid SWs.
2 min read