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.
Frontend Interview Team
March 01, 2026
How to use this
For each question:
- 30-second answer → what you say first
- What the interviewer is testing → the hidden signal
- Follow-up → the next question they usually ask
- Common wrong answer → what candidates say when they don't understand
1) What are Core Web Vitals?
30-second answer: LCP (main content visible), INP (interaction responsiveness), CLS (layout stability).
What the interviewer is testing: Whether you can name CWV correctly and tie them to user experience.
Follow-up: Which one would you optimize first on a slow product page and why?
Common wrong answer: A generic explanation with no measurement plan.
2) How do you improve LCP?
30-second answer: Optimize the LCP element + reduce TTFB + remove render-blocking resources.
What the interviewer is testing: Whether you can identify the LCP element and reason about the critical path (TTFB → render blocking → resource).
Follow-up: How do you find the LCP element and its blocking resource in DevTools?
Common wrong answer: “Just compress everything.” (Compression helps, but LCP is usually a critical path problem: TTFB + blocking + LCP element.)
3) How do you improve INP?
30-second answer: Reduce long tasks and main-thread work; ship less JS; avoid heavy interaction handlers.
What the interviewer is testing: Whether you understand responsiveness as a main-thread scheduling problem (long tasks) not just “fast code”.
Follow-up: What are long tasks and how do they show up in a Performance trace?
Common wrong answer: “INP is about fast servers.” (INP is mostly main-thread responsiveness on the client.)
4) What causes CLS?
30-second answer: Late-loading images/fonts/ads without reserved space.
What the interviewer is testing: Whether you know CLS root causes and the fix pattern: reserve space + avoid late inserts above content.
Follow-up: How do fonts cause CLS and how do you prevent it?
Common wrong answer: A generic explanation with no measurement plan.
5) What is hydration and why does it matter?
30-second answer: Attaching interactivity to SSR HTML; can create long tasks and hurt INP.
What the interviewer is testing: Whether you can explain hydration cost and why too much client JS hurts INP on real devices.
Follow-up: How do you decide what should be a client component vs server component?
Common wrong answer: A generic explanation with no measurement plan.
6) How does HTTP caching work?
30-second answer: Cache-Control controls freshness; ETag enables validation; immutable hashed assets can be cached for a year.
What the interviewer is testing: Whether you know freshness vs validation and can choose headers for assets vs HTML.
Follow-up: What caching headers would you use for HTML vs hashed JS bundles?
Common wrong answer: “Set max-age=1 year on everything.” (Great for hashed assets, dangerous for HTML/API.)
7) What does a CDN do?
30-second answer: Reduces latency/TTFB by serving from edge caches.
What the interviewer is testing: Whether you can explain edge caching + latency/TTFB improvements.
Follow-up: What's the risk of caching personalized content at the CDN?
Common wrong answer: A generic explanation with no measurement plan.
8) How do you debug performance?
30-second answer: Measure → find bottleneck → hypothesize → validate → fix → re-measure.
What the interviewer is testing: Whether you have a repeatable debugging loop (measure → bottleneck → hypothesis → validate).
Follow-up: What's the first thing you do when a PM says “the page feels slow”?
Common wrong answer: A generic explanation with no measurement plan.
9) When should you preload?
30-second answer: Only when it shortens the critical path for above-the-fold resources.
What the interviewer is testing: Whether you understand preload as critical-path manipulation (and the risk of bandwidth contention).
Follow-up: What happens if you preload too many resources?
Common wrong answer: “Preload all the important assets.” (You'll compete with CSS/JS/fonts and can slow down LCP.)
10) Why can Lighthouse be misleading?
30-second answer: It’s lab data; real users vary by device/network.
What the interviewer is testing: Whether you can separate lab vs field and avoid optimizing the wrong thing.
Follow-up: How do you validate a fix improved real users, not just Lighthouse?
Common wrong answer: “If Lighthouse score improved, we're done.” (Field data can disagree.)
11) What’s the difference between lab and field metrics?
30-second answer: Lab is controlled; field is RUM real-user data.
What the interviewer is testing: Whether you know which decisions require lab vs field data.
Follow-up: Which metric is most important for user-perceived speed on mobile?
Common wrong answer: A generic explanation with no measurement plan.
12) What is a long task?
30-second answer: ~50ms+ uninterrupted main-thread work that can delay input/paint.
What the interviewer is testing: Whether you can connect long tasks to INP/jank and know how to find them.
Follow-up: What's a practical way to reduce long tasks without a rewrite?
Common wrong answer: A generic explanation with no measurement plan.
13) What is render-blocking?
30-second answer: Resources (often CSS/JS) that must load/execute before first render.
What the interviewer is testing: Whether you understand the critical rendering path and what blocks first paint.
Follow-up: Is CSS render-blocking? When and why?
Common wrong answer: A generic explanation with no measurement plan.
14) How do images impact performance?
30-second answer: They dominate bytes and often decide LCP; fix with responsive images + compression.
What the interviewer is testing: Whether you can do responsive images correctly and not lazy-load the hero.
Follow-up: What's the difference between srcset and sizes?
Common wrong answer: A generic explanation with no measurement plan.
15) How do fonts impact performance?
30-second answer: They delay text paint and can cause CLS; fix with WOFF2, preload critical, and stable fallbacks.
What the interviewer is testing: Whether you can explain FOIT/FOUT, font-display, and CLS-safe strategies.
Follow-up: When would you use font-display: optional?
Common wrong answer: A generic explanation with no measurement plan.
16) What is layout thrashing?
30-second answer: Interleaving layout reads and writes causing forced synchronous layout.
What the interviewer is testing: Whether you understand layout thrash as read/write interleaving causing forced sync layout.
Follow-up: How do you fix layout thrashing in a scroll handler?
Common wrong answer: A generic explanation with no measurement plan.
17) How do you avoid layout thrashing?
30-second answer: Batch reads/writes and avoid measuring layout in hot paths.
What the interviewer is testing: Whether you can propose a fix strategy (batching, throttling, transforms).
Follow-up: Why is transform usually preferred for animations?
Common wrong answer: A generic explanation with no measurement plan.
18) What is the critical rendering path?
30-second answer: The sequence of work to go from HTML/CSS/JS to pixels on screen.
What the interviewer is testing: Whether you can reason end-to-end from HTML/CSS/JS to pixels and identify bottlenecks.
Follow-up: What's your step-by-step plan to improve LCP on a slow page?
Common wrong answer: A generic explanation with no measurement plan.
19) How do third-party scripts hurt performance?
30-second answer: Network + main-thread work + unpredictable long tasks.
What the interviewer is testing: Whether you understand third-party scripts as uncontrolled main-thread work + network overhead.
Follow-up: How do you identify which third-party script caused INP regression?
Common wrong answer: “Third-party scripts are fine if async.” (Async only changes parser blocking; main-thread work can still destroy INP.)
20) How do you control third-party cost?
30-second answer: Audit, remove, defer, load after idle/interaction, isolate.
What the interviewer is testing: Whether you can propose governance + load strategy, not just “add async”.
Follow-up: How do you decide the load timing for analytics vs chat widgets?
Common wrong answer: A generic explanation with no measurement plan.
21) What is code splitting?
30-second answer: Loading only the JS needed for the current route/feature.
What the interviewer is testing: Whether you understand route/feature splitting and loading less code upfront.
Follow-up: How would you split code in a Next.js app?
Common wrong answer: A generic explanation with no measurement plan.
22) What is tree-shaking?
30-second answer: Removing unused exports during bundling.
What the interviewer is testing: Whether you know tree-shaking limitations and how import style affects it.
Follow-up: When does tree-shaking fail (common reasons)?
Common wrong answer: A generic explanation with no measurement plan.
23) What is prefetching?
30-second answer: Loading likely-next resources early to reduce navigation latency.
What the interviewer is testing: Whether you understand prefetch trade-offs and when it hurts (bandwidth/priority).
Follow-up: When can prefetch make things worse?
Common wrong answer: A generic explanation with no measurement plan.
24) What is the best single performance fix?
30-second answer: There isn’t one, but optimizing the LCP element and reducing JS are the most common big wins.
What the interviewer is testing: Whether you prioritize: LCP element + TTFB + JS/hydration as the usual biggest wins.
Follow-up: Give a concrete “first 2 fixes” you'd try for bad LCP.
Common wrong answer: A generic explanation with no measurement plan.
25) How do you prevent performance regressions?
30-second answer: Budgets + CI checks + RUM monitoring.
What the interviewer is testing: Whether you think in systems: budgets, CI, monitoring, ownership.
Follow-up: What budgets would you set and how would you enforce them?
Common wrong answer: “We'll just optimize later.” (Performance regresses silently without budgets/ownership.)
Quick recap
- Performance interviews test mental models + debugging process.
- Know CWV, caching, JS cost, and rendering pipeline.
- Always talk in measurement and bottlenecks.