Web Performance Interview Questions

February 26, 2026 • By Surya Singh • Performance • React • Frontend • Interview

Web performance interview questions — Core Web Vitals, lazy loading, code splitting, caching.

PerformanceReactFrontendInterview

Key Takeaways

  • 1Core Web Vitals: LCP (largest contentful paint), FID/INP (interactivity), CLS (layout stability).
  • 2Optimize: lazy load images, code split, minimize main-thread work, reduce JavaScript payload.
  • 3Use React.memo, useMemo, useCallback only when profiling shows benefit; virtualize long lists.
  • 4Measure with Lighthouse, Chrome DevTools Performance tab, and real-user monitoring (RUM).

The questions below are commonly asked in technical interviews. Each answer is written to help you understand the concept clearly and explain it confidently. Focus on understanding the "why" behind each answer—that is what interviewers care about.

In this guide

Interview Questions & Answers

What are Core Web Vitals and why do they matter?

Core Web Vitals are three metrics Google uses for page experience: LCP (Largest Contentful Paint) measures loading—when the main content appears; INP (Interaction to Next Paint, formerly FID) measures interactivity—how quickly the page responds to input; CLS (Cumulative Layout Shift) measures visual stability—unexpected layout jumps. They affect both user experience and SEO. Targets: LCP under 2.5s, INP under 200ms, CLS under 0.1. Use Lighthouse or PageSpeed Insights to measure and improve.

How do I improve LCP (Largest Contentful Paint)?

LCP is usually an image or text block. Optimize the LCP element: use a CDN, serve appropriately sized images (srcset, WebP), preload the LCP image with link rel="preload", reduce server response time (edge caching, faster backend). Also reduce render-blocking resources (defer non-critical CSS, load scripts async). Ensure the LCP element is above the fold and not hidden by lazy loading—lazy load images below the fold, but the LCP image often should load eagerly.

What causes Cumulative Layout Shift (CLS) and how do I fix it?

CLS happens when content moves after the page loads—images without dimensions, ads or embeds pushing content, dynamic content inserted above existing content. Fix: always set width and height (or aspect-ratio) on images and embeds so the browser reserves space. For dynamic content (e.g., a banner), reserve a fixed-height slot or use a skeleton. Avoid inserting content above existing content without reserving space. Use the CSS contain property for isolated components that might resize.

When should I use React.memo, useMemo, and useCallback?

Use them only when profiling shows unnecessary re-renders or expensive recalculations. React.memo prevents a component from re-rendering if props are the same (shallow comparison). useMemo caches expensive computed values. useCallback caches function references so memoized children do not re-render. Overusing them adds cognitive load and can slow things down (comparison has cost). Start without them; add when React DevTools Profiler shows a hot path. For lists, virtualization (react-window, TanStack Virtual) often has a bigger impact.

How do I reduce JavaScript bundle size?

Code splitting: use dynamic import() for routes or heavy components so they load on demand. Tree shaking: use ES modules, avoid importing entire libraries (lodash-es or lodash/function instead of all of lodash). Analyze the bundle (webpack-bundle-analyzer, source-map-explorer) to find large dependencies. Replace heavy libraries with lighter alternatives. Minify and compress (gzip/brotli). Consider a framework that supports partial hydration or islands architecture to ship less JS initially.

Loading...

XLinkedInFacebook
Surya Singh

Surya Singh

Azure Solutions Architect & AI Engineer

Microsoft-certified Azure Solutions Architect with 8+ years in enterprise software, cloud architecture, and AI/ML deployment. I build production AI systems and write about what actually works—based on shipping code, not theory.

  • Microsoft Certified: Azure Solutions Architect Expert
  • Built 20+ production AI/ML pipelines on Azure
  • 8+ years in .NET, C#, and cloud-native architecture
LinkedInTwitter/XAbout Me