Web Performance Interview Questions and Answers

Core Web Vitals are user-centric metrics for loading, interactivity and visual stability. LCP, Largest Contentful Paint, measures when the largest visible element, usually a hero image or heading, is rendered; good is 2.5 seconds or less. INP, Interaction to Next Paint, replaced FID in 2024 and measures the latency of the worst interaction at a high percentile; good is 200 milliseconds or less. CLS, Cumulative Layout Shift, quantifies unexpected movement of visible content; good is 0.1 or less.

They are evaluated at the 75th percentile of real user visits, combining mobile and desktop. They feed into Google's page experience signal and correlate with user satisfaction and conversion.

Supporting metrics include TTFB, FCP and TBT, which help diagnose root causes but are not vitals. Always optimise the tail, because a good average can hide a poor 75th percentile.

Lazy loading defers work until it is needed. For images, loading="lazy" and decoding="async" defer off-screen loads, but never lazy-load the LCP image because it delays the largest paint. For iframes and heavy media, load on intersection with an IntersectionObserver or loading="lazy".

Code splitting breaks a JavaScript bundle into chunks loaded on demand. Bundlers create a chunk per dynamic import:

const Chart = lazy(() => import('./Chart'));

Route-based splitting is the highest-value pattern, because users only download the page they visit. React.lazy, Vue's defineAsyncComponent and Next.js dynamic imports integrate chunk loading with Suspense boundaries. Also split large vendors and load polyfills conditionally with module and nomodule.

The trade-off is extra network round trips, so preload or prefetch likely next routes and avoid creating hundreds of tiny chunks. Combine splitting with a fast CDN and long-lived caching of hashed filenames.