35 Performance interview questions with answers

All Performance interview questions

• What are Core Web Vitals? What are the three main metrics?

  Core Web Vitals are Google's three metrics measuring real-user experience, an SEO ranking factor since 2021. - LCP (Largest Contentful Paint) — loading speed: render time of the largest element in the viewport. Good <2.5s, poor 4s. - INP (Interaction to Next Paint) — responsiveness,…

• What is LCP (Largest Contentful Paint)? How do you improve LCP?

  LCP measures the render time of the largest element in the viewport — typically a hero image, a large text block, or a video poster. Good <2.5s, poor 4s. How to improve: - Improve TTFB first — server response time, CDN, edge caching; TTFB is…

• What is CLS (Cumulative Layout Shift)? What causes it and how do you fix it?

  CLS measures unexpected layout shifts across the entire page lifecycle, including after loading finishes. Good is 0.1 or less, poor is above 0.25. Scoring (current definition, since June 2021): - Each shift scores impact fraction × distance fraction. - Shifts are grouped into session windows…

• What is lazy loading? How do you implement it in React?

  Lazy loading defers loading resources (images, JavaScript) until they are actually needed, to reduce what has to be downloaded when the page opens. As a result the main content appears sooner (LCP) and the main thread is less busy (INP). - Images — native <img…

• What is code splitting? What are the code splitting strategies for web apps?

  Code splitting divides the bundle into smaller chunks — a lighter initial load, with the rest loaded on demand. The foundation is dynamic import(): it returns a Promise and the bundler emits a separate chunk. Strategies: - Route-based — one chunk per route (React Router…

• How does HTTP caching work? What are the Cache-Control headers?

  HTTP caching cuts bandwidth and latency by storing responses in the browser or a CDN, controlled via the Cache-Control header. Key directives: - max-age=3600 — cache for 1 hour before going stale; no-cache — must revalidate with the server before use (not 'never cache'); no-store…

• Image optimization on the web: what are the common techniques?

  Image optimization is one of the most effective ways to reduce page weight and improve LCP. - Modern formats — WebP is 25–34% smaller than JPEG, AVIF about 50% (slower to encode); use <picture with a fallback image for browsers that do not support them.…

• 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?

  Lighthouse is Google's tool for auditing websites across 4 categories: - Performance: this score is a weighted sum of 5 measured metrics, the heaviest being TBT (Total Blocking Time, how long JS holds the main thread, 30%), LCP (when the largest content renders, 25%) and…

• What are the web performance metrics LCP, INP, CLS, and TTFB, and how do you optimize them?

  These four metrics measure four different moments when a user opens a page. LCP, INP, CLS are the three Core Web Vitals Google uses to judge experience; TTFB is not one of them, but it is the floor under every loading metric. Metric What it…

• What is the browser rendering pipeline? What is the critical rendering path?

  The rendering pipeline is the sequence of steps a browser takes from HTML/CSS bytes to pixels on screen. The critical rendering path is the part of that sequence that must finish before the user sees the first frame; optimizing it means removing what blocks that…

• A website loads slowly — how do you approach debugging it?

  The principle: measure before fixing — determine which stage is slow (server, network, or render) before optimizing. - Run Lighthouse / PageSpeed Insights — get an overview of LCP/INP/CLS and the opportunities list; PageSpeed also shows field data from real users (CrUX). - DevTools Network…

• What is the difference between reflow (layout) and repaint? What is layout thrashing and how do you avoid it?

  Reflow (layout) is when the browser recalculates the position and size of elements. It is expensive because one change can force the surrounding elements to be recalculated too. Repaint only redraws pixels without recalculating positions, so it is cheaper. Layout thrashing is interleaving style reads…

• How can misusing `useMemo`/`useCallback` make an app slower than not using them?

  It can. Neither is free: each hook adds an entry to the component's memory, a dependency array that must be created and compared on every render, and it keeps old values alive longer than necessary. Three common misuses: - Memoizing cheap work — additions, string…

• Typing in one input of a large form feels laggy. How do you diagnose and fix it?

  Typical cause: state placed too high. The controlled input keeps its state in a parent (or in App), so every keystroke re-renders the whole subtree — including unrelated tables, charts and lists. Diagnose before fixing: open React DevTools, go to the Profiler tab, hit record,…

• 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?

  Images usually dominate page weight, and handling them wrong also causes layout shift. What to do: - Lazy-load below-the-fold images: loading="lazy". The first-viewport image (the LCP one) must stay loading="eager" with fetchpriority="high" — lazy-loading the hero image makes LCP worse. - Set width/height or aspect-ratio…

• Where should code-splitting boundaries go with `lazy` + `Suspense`, and what goes wrong if you place them badly?

  lazy turns a static import into a dynamic import(), producing a separate chunk fetched only when the component first renders. Good boundaries: - Per route — the sensible default; users download only the page they are on. - Heavy, rarely used components — rich text…

• How do you use the React DevTools Profiler to find the component causing slowness?

  Practical workflow: 1. Enable "Highlight updates when components render" in the Components tab. Repeat the interaction — the flashing outlines immediately show regions re-rendering unexpectedly (typing one character and seeing the whole sidebar flash is a clear signal). 2. Record the interaction in the Profiler…

• Why does Next.js recommend `next/image` over a plain `<img>`? When is `<img>` still acceptable?

  next/image is an <img wrapped with four things that are tedious to do by hand: - On-demand format conversion and resizing: the server produces a WebP variant (the default; AVIF must be enabled via images.formats in next.config) sized for the current viewport instead of shipping…

• What does `next/font` do for performance? How does it prevent font-related layout shift?

  next/font solves three web-font problems: 1. Automatic self-hosting. Google font files are downloaded at build time and served from your own domain. No request to fonts.googleapis.com — one fewer DNS + TLS round trip to a third-party host, and no request data sent elsewhere. 2.…

• A page reports 800KB of First Load JS. How do you investigate and reduce it?

  Measure first. Turn on the bundle analyzer to see which chunk is heavy: The treemap immediately shows which library dominates. The next build summary table also lists First Load JS per route. Ways to cut it, in order of impact: - Move components back to…

• Lighthouse scores 95 but users still say the site feels slow. How do you measure real Core Web Vitals in Next.js?

  Because Lighthouse is lab data: one run, one emulated device, a throttled network, no cache, no extensions. Real users have varied hardware, 3G connections, and backgrounded tabs. What actually affects ranking is field data — measurements from real users. Next.js ships a hook to collect…

• What is the difference between reflow and repaint? Which operations trigger a reflow?

  Reflow (layout) is when the browser must recompute geometry — the position and size of boxes. Repaint only redraws pixels with geometry unchanged. A reflow always implies a repaint; a repaint does not imply a reflow. Triggers reflow: changing width, height, padding, margin, top/left, font-size,…

• How do `preload`, `prefetch`, `preconnect` and `dns-prefetch` differ? When do you use each?

  All four are resource hints, differing in when and how much work the browser does ahead of time. - preload — fetch now, at high priority, a resource the current page definitely needs but that the browser discovers late (a font referenced from CSS, an…

• What do LCP, INP and CLS measure? What are the good thresholds and how do you improve each?

  The three Core Web Vitals measure three different experiences: LCP (Largest Contentful Paint) — when the largest content element in the viewport renders, usually a hero image or heading block. Good: ≤ 2.5s. - Cut TTFB, because without the HTML the browser does not yet…

• How should `loading="lazy"` and `fetchpriority` be used? Why should above-the-fold images not be lazy-loaded?

  loading="lazy" tells the browser to defer an image until it approaches the viewport, lightening the initial load. fetchpriority does not change discovery order; it adjusts the priority the browser assigns when queuing the fetch. Correct usage by position: Why not lazy-load above the fold: a…

• What is a passive event listener? Why does it make scrolling smoother?

  For touchstart, touchmove and wheel, the browser cannot know in advance whether the handler will call preventDefault() to cancel scrolling. With an unannotated listener it must wait for the handler to finish before scrolling — a delay on every touch, felt as janky scrolling. {…

• 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?

  Measure first, cut second. Run a bundle analyzer to see where the weight comes from; usually 2–3 heavy libraries dominate (charts, rich-text editor, date library, maps). In order of payoff: 1. Split by route. Each page becomes its own chunk, so a visitor to the…

• How is p99 computed from a histogram? Why can't you average the p99 of several instances?

  A histogram does not store individual values; it counts observations falling into cumulative buckets: le=0.1, le=0.5, le=1, le=+Inf. Each bucket is a counter, and counters add up across instances. p99 is then interpolated from those buckets (histogramquantile(0.99, ...) in PromQL), so accuracy depends on the…

• A user reports "the API is slow". How do you diagnose it end to end?

• When working on a React project, which techniques do you use to optimize web performance?

  The first rule: measure first, optimize second. Use Lighthouse, the DevTools Performance tab, React DevTools Profiler and Core Web Vitals (LCP, INP, CLS — INP replaced FID in March 2024) to find what is slow before picking a technique. The techniques fall into three groups.…