Web Performance Interview Questions
20 Web Performance interview questions with worked answers, complexity notes, and runnable code you can edit in the browser — ordered easy to hard so you build up steadily. Free, no signup. Open any question for the full answer.
Measure first, then spend the main thread wisely
Performance work goes wrong the same way every time: someone optimizes what is easy to optimize instead of what is slow. So the first move, always, is to measure — and to know which measurement you are looking at. Lab data (Lighthouse, a profiler on your machine) is reproducible and good for diagnosis; field data (real users, the Core Web Vitals your users actually experience) is the truth you are ultimately judged on. They disagree constantly, and understanding why is half the skill.
The Core Web Vitals give you a shared vocabulary. LCP measures how fast the main content paints, and you improve it by attacking its sub-parts — time to first byte, resource load time, render delay — not by guessing. INP measures responsiveness, and it comes down to long tasks: any script that hogs the main thread for tens of milliseconds is what makes a tap feel stuck, so you break work up, defer it, or move it to a Web Worker. CLS measures visual stability, and you fix it at the source by reserving space for images, ads, and late-arriving content so nothing jumps.
Underneath the metrics sits the critical rendering path: render-blocking CSS and JavaScript decide how fast anything appears at all, which is why code-splitting, deferring non-critical scripts, and trimming the bundle matter so much. Every kilobyte of JavaScript is paid for twice — once to download and again to parse and execute — so the cheapest fast code is the code you never ship. The questions here move from these foundations through the working techniques (virtualization, lazy loading, IntersectionObserver, resource hints used as a scalpel) into hunting the memory leaks and layout thrash that only show up under real use.
Easy
- Critical rendering path: what blocks first paint Critical Rendering Path
Walk through what the browser does between receiving HTML and painting the first pixel. What blocks that first paint? - Core Web Vitals: LCP, INP, CLS Core Web Vitals
Name the three Core Web Vitals, what each measures, and the 'good' threshold for each. - Render-blocking scripts: defer vs async Script Loading
Compare a plain , one with defer, and one with async. When would you reach for each? - Image optimization essentials Images
You have a page dominated by images. What are the highest-leverage optimizations, and how do images cause layout shift? - Minification, compression, and bundling Transfer Size
Distinguish minification, compression (gzip/brotli), and bundling. Do they overlap, and what does each save? - Browser caching & Cache-Control Caching
How would you cache static assets so repeat visits are fast, without ever serving a stale file after a deploy? - Debounce vs. throttle Event Handling
A scroll/resize/input handler is firing far too often and janking the page. When do you debounce and when do you throttle? Implement both. - Lab vs. field data (Lighthouse vs. RUM) Measurement
Lighthouse says your site scores 95, but users complain it's slow. How can both be true?
Medium
- Code-splitting and lazy-loading routes Code Splitting
Your app ships one 800KB JS bundle and time-to-interactive is poor. How does code-splitting help, and where do you split? - Long tasks and yielding to the main thread Main-Thread / INP
What is a 'long task', why does it wreck INP, and how do you break one up so the UI stays responsive? - Avoiding layout thrash Layout / Reflow
This loop that reads offsetHeight and then sets style each iteration is slow. What is 'layout thrashing' and how do you fix it? - Font loading: FOIT, FOUT, and font-display Fonts
Text is invisible for a second while a web font loads, then it pops in. What's happening and how do you control it? - Tree-shaking and shipping less JavaScript Tree-shaking
You import one function from a utility library but the whole thing ends up in your bundle. Why, and how does tree-shaking prevent it?
Hard
- Eliminating layout shift at the source Layout Stability (CLS)
CLS is 0.35 and content jumps as the page loads. Enumerate the root causes and the fix for each. - Optimizing LCP end-to-end Loading (LCP)
LCP is 4.5s. Break the LCP timeline into its sub-parts and give the optimization for each. - Virtualizing long lists (windowing) List Virtualization
Rendering 10,000 rows freezes the page. Explain windowing, what it costs, and the tricky parts. - Offloading work to a Web Worker Web Workers
A CPU-heavy computation freezes the UI. When does a Web Worker help, what are its constraints, and how do you communicate with it? - IntersectionObserver for lazy work and infinite scroll IntersectionObserver
Why is IntersectionObserver better than scroll listeners for lazy-loading and infinite scroll? Implement an infinite-scroll sentinel. - Finding and fixing memory leaks in SPAs Memory Leaks
A single-page app gets slower the longer it runs and eventually crashes a tab. What causes leaks in SPAs and how do you find them? - Resource hints and priority Resource Hints
Distinguish preconnect, dns-prefetch, preload, prefetch, and fetchpriority. When does each help, and how can they hurt?
Other topics
HTML/CSS · Browser · JavaScript · TypeScript · React · System Design · Accessibility · Testing · Networking/Security · DSA