Skip to content
Frontend Interview

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

Progress: 0/16

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.

4 min readStart lesson →

How to Study the Web Performance Track

Web performance is one of the highest-signal topics in senior and staff frontend interviews. Instead of asking generic trivia, interviewers present a slow page or poor Core Web Vitals report and ask how you would isolate the bottleneck across network waterfalls, browser rendering stages (Style, Layout, Paint, Composite), main-thread JavaScript execution, and hydration cost.

This roadmap gives you a repeatable production playbook covering Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS), alongside HTTP caching headers, CDN invalidation, font and image optimization, CSS containment, service worker offline strategies, and real-user monitoring (RUM) vs Lighthouse lab budgets.

What Interviewers Evaluate in This Track

  • Diagnosing LCP, INP, and CLS regressions using the Chrome DevTools Performance and Network panels
  • Breaking up main-thread Long Tasks, reducing hydration payloads, and isolating third-party script impact
  • Designing end-to-end caching strategies with Cache-Control, ETags, stale-while-revalidate, and Service Workers

Roadmap (16)

Practice Web Performance articles →
  1. 1

    Web Performance Roadmap: Start Here (2 hours / 1 day / 1 week)

    4 min read

    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.

  2. 2

    Core Web Vitals: The Mental Model (LCP, INP, CLS)

    ~18 min

    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.

  3. 3

    Performance Debugging Playbook (Chrome DevTools + Real Signals)

    3 min read

    A senior-level workflow to diagnose performance issues: find the bottleneck, verify the hypothesis, ship the fix, and prevent regressions.

  4. 4

    Images for Performance: Sizes, Formats, Priority, and Preload

    3 min read

    How to ship fast images: responsive sizes, AVIF/WebP, LCP hero strategy, lazy loading, and when preloading helps (or hurts).

  5. 5

    Fonts Without Regret: Fast Loads, No CLS

    2 min read

    How fonts hurt LCP/CLS, when to preload, how font-display works, and practical strategies to avoid layout shift with good typography.

  6. 6

    JavaScript Cost: Hydration, Long Tasks, and Shipping Less JS

    4 min read

    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).

  7. 7

    Caching & CDNs: HTTP Caching That Actually Works

    2 min read

    A practical guide to cache-control, ETag, immutable assets, and CDN strategy to reduce TTFB and speed up repeat visits.

  8. 8

    Rendering Pipeline: Layout, Paint, Composite (and How to Avoid Jank)

    ~16 min

    A practical mental model of the browser rendering pipeline and how common coding patterns cause forced reflow, jank, and slow interactions.

  9. 9

    Third-Party Scripts: Containment Strategies That Keep Pages Fast

    2 min read

    How third-party scripts hurt performance, how to measure the damage, and pragmatic strategies: defer, isolate, audit, and remove.

  10. 10

    Next.js Performance: RSC, Streaming, and Caching Patterns

    2 min read

    How Next.js (App Router) affects performance: server components, client boundaries, streaming, caching, and avoiding accidental JS bloat.

  11. 11

    Measuring Performance: Lighthouse vs RUM (and Setting Budgets)

    2 min read

    How to measure performance like a pro: lab vs field metrics, what to trust, and how to set practical budgets to prevent regressions.

  12. 12

    Performance Recipes: High-ROI Fixes (Before/After Patterns)

    2 min read

    A collection of practical performance fixes with before/after patterns: LCP hero, INP long tasks, CLS shifts, caching, and third-party containment.

  13. 13

    Web Performance Interview Pack: 25 Questions + Best Answers

    11 min read

    High-signal web performance interview questions with crisp answers: Core Web Vitals, caching, rendering, images, fonts, JS cost, and debugging.

  14. 14

    CSS Performance: contain, content-visibility, and Rendering Cost Control

    2 min read

    How to reduce rendering cost with modern CSS tools: containment, content-visibility, and avoiding expensive effects that trigger heavy paint/layout.

  15. 15

    Performance APIs: Web Vitals, Long Tasks, and Real Metrics

    2 min read

    Understand the browser APIs behind performance measurement: PerformanceObserver, long tasks, navigation timing, and capturing Web Vitals in real apps.

  16. 16

    Offline & Service Workers: Caching Without Breaking Users

    2 min read

    A practical introduction to service workers and offline caching strategies, including common pitfalls (stale content, cache invalidation) and when to avoid SWs.

Interview prep