← Frontend interview questions

Web Performance Interview Questions

Performance interviews are really prioritization interviews. Everyone wants a fast site; not everyone agrees what "slow" means or who owns the fix. Strong candidates bring a measurement story: what you instrumented (Lighthouse, RUM, browser APIs), what regressed, what you changed, and how you guarded against backsliding with budgets or CI checks. Weak candidates list techniques like a grocery list with no receipt.

Core Web Vitals with context

Delivery and caching

HTTP/2 vs HTTP/3 at a high level, CDN cache keys, stale-while-revalidate for static assets, splitting bundles by route—pick two you have touched and go deep. If your wins were backend-driven (API latency), say so; performance is a system property.

Close the loop with React specifics

If your stack is React-heavy, revisit Virtual DOM and React interview questions so you can connect bundle size, code splitting, and server rendering choices to the same metrics you cite here.

Budget + CDN: Front Door reality

Preconnect + responsive hero (HTML you can defend)

<link rel="preconnect" href="https://yourcdn.azureedge.net" crossorigin />
<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 60vw"
  width="1200" height="630"
  alt="Product screenshot"
  fetchpriority="high"
/>

Marketing ships a 4 MB PNG; you swap formats, dimensions, and priority hints. Pair with Azure Front Door caching rules: "immutable build assets, short TTL for HTML." Interviewers want the sequence: measure LCP, fix the hero, verify in RUM, document the budget in CI.

Questions with sample answers

These are interview-ready outlines—sound human by swapping in your own metrics, team names, and war stories. The examples are generic on purpose so you can map them to what you actually shipped.

  1. Primary prompt

    Prioritize three fixes for a page with bad LCP, high JS execution time, and huge images—explain ordering.

    1) Fix LCP image (size, priority, CDN)—user sees content. 2) Trim JS blocking main thread (code split, defer non-critical). 3) Optimize images further (formats, responsive)—order by user-visible impact first.

  2. Primary prompt

    How do you set performance budgets in CI without blocking legitimate refactors?

    Budget on bundle size + Lighthouse CI thresholds with warn→fail tiers; allow temporary overrides with ticket; track trends not only hard gates.

  3. Primary prompt

    Describe font loading strategy that avoids FOIT and massive CLS.

    font-display: swap or optional; preload critical woff2; size-adjust/fallback metrics match; subset fonts; avoid invisible text flash with matching system fallback.

  4. Primary prompt

    What is your approach to third-party scripts marketing insists on?

    Tag manager governance, async/defer, consent gating, load after interaction, proxy with timeouts, document perf impact in SLA; A/B test conversion vs Core Web Vitals.

Follow-ups interviewers often ask

Expect nested "why?" questions—brief answers here; expand with your production defaults.

  1. Follow-up

    How do you separate server TTFB issues from client rendering issues?

    Compare TTFB in RUM vs LCP element timing; server traces for DB; if TTFB good but LCP bad, client/asset issue.

  2. Follow-up

    What RUM fields do you alert on vs only dashboard?

    Alert on p75 INP regression, error rate, LCP SLO breach; dashboard long-tail device segments.

  3. Follow-up

    How do you optimize INP for a complex widget without freezing product scope?

    Break tasks with scheduler.yield / startTransition, defer non-critical work, web worker for heavy compute, reduce event handler work.

  4. Follow-up

    When is prefetch/preconnect worth the extra bandwidth?

    High-confidence next navigation (login→app), critical origins for LCP; cap hints; measure wasted prefetch in analytics.

  5. Follow-up

    How do you communicate trade-offs when design wants heavy animation?

    Show FPS/INP on low-end devices; offer CSS transforms over layout thrashing; reduce motion for prefers-reduced-motion; negotiate staged delivery.