34 Performance interview questions with answers
34 Performance interview questions with detailed answers, sorted from basic to advanced. Free to practice, with progress saved automatically.
All Performance interview questions
What are Core Web Vitals? What are the three main metrics?
What is LCP (Largest Contentful Paint)? How do you improve LCP?
What is CLS (Cumulative Layout Shift)? What causes it and how do you fix it?
What is lazy loading? How do you implement it in React?
What is code splitting? What are the code splitting strategies for web apps?
How does HTTP caching work? What are the Cache-Control headers?
Image optimization on the web: what are the common techniques?
Bundle analysis: how do you detect and reduce bundle size?
What is a Service Worker and what are the caching strategies in a PWA?
What is virtual scrolling (windowing)? When should you use it?
What is Lighthouse? How do you improve a website's Lighthouse score?
What are the web performance metrics LCP, INP, CLS, and TTFB, and how do you optimize them?
What is the browser rendering pipeline? What is the critical rendering path?
A website loads slowly — how do you approach debugging it?
What is the difference between reflow (layout) and repaint? What is layout thrashing and how do you avoid it?
How can misusing `useMemo`/`useCallback` make an app slower than not using them?
Typing in one input of a large form feels laggy. How do you diagnose and fix it?
A 10,000-row table scrolls badly. In what order do you attack it, and what are the pitfalls of virtualization?
A product listing page is slow because of images. What do you optimize?
Where should code-splitting boundaries go with `lazy` + `Suspense`, and what goes wrong if you place them badly?
How do you use the React DevTools Profiler to find the component causing slowness?
Why does Next.js recommend `next/image` over a plain `<img>`? When is `<img>` still acceptable?
What does `next/font` do for performance? How does it prevent font-related layout shift?
A page reports 800KB of First Load JS. How do you investigate and reduce it?
Lighthouse scores 95 but users still say the site feels slow. How do you measure real Core Web Vitals in Next.js?
What is the difference between reflow and repaint? Which operations trigger a reflow?
How do `preload`, `prefetch`, `preconnect` and `dns-prefetch` differ? When do you use each?
What do LCP, INP and CLS measure? What are the good thresholds and how do you improve each?
How should `loading="lazy"` and `fetchpriority` be used? Why should above-the-fold images not be lazy-loaded?
What is a passive event listener? Why does it make scrolling smoother?
What is a long task and how does it affect INP? How do you break up main-thread work?
A page loads slowly because the JavaScript bundle is too large — how do you split it?
How is p99 computed from a histogram? Why can't you average the p99 of several instances?
A user reports "the API is slow". How do you diagnose it end to end?