Master resource hints (preload, prefetch, preconnect), HTTP/2 multiplexing, image optimization (WebP, lazy loading, srcset), connection management, and network performance patterns. The complete guide to network optimization questions in frontend system design.
Network optimization is about predicting the future. The browser can only download what it knows it needs. Resource hints are a way to tell the browser what it will need next — before it figures it out itself. Preconnect starts the TCP handshake early. Prefetch downloads future-page assets in idle time. Preload tells the browser 'you'll discover this in 2 seconds anyway — start now'. The goal is eliminating the gap between 'browser discovers a resource' and 'browser starts downloading it'.
Tells the browser to download a resource with high priority immediately — even before the parser discovers it naturally. Use for critical resources on the current page.
<!-- Preload the LCP image before the parser reaches the img tag -->
<link rel="preload" as="image" href="/hero.webp" />
<!-- Preload a critical font to avoid FOIT (Flash of Invisible Text) -->
<link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin />
<!-- Preload a critical JS module -->
<link rel="preload" as="script" href="/critical-chunk.js" />Warning: only preload resources you'll use on the current page. Unused preloads waste bandwidth and trigger browser warnings.
Downloads a resource at low priority during browser idle time, for use on a future navigation. The browser may ignore it if the connection is slow or the device is battery-constrained.
<!-- Prefetch the JS chunk for a page the user is likely to navigate to -->
<link rel="prefetch" href="/checkout-chunk.js" />
// Next.js does this automatically for visible <Link> components
// React Router's <Link> with preload prop does similarEstablishes a TCP connection, TLS handshake, and DNS resolution for a third-party origin before any requests are made. Saves 100–500ms when the first actual request goes to that origin.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://api.example.com" crossorigin />
<link rel="dns-prefetch" href="https://analytics.third-party.com" />
<!-- dns-prefetch: only resolves DNS — lower cost, less benefit than preconnect -->Images are the #1 cause of slow LCP (Largest Contentful Paint). Three strategies:
<picture>
<source srcset="/hero.avif" type="image/avif" />
<source srcset="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" loading="lazy" />
</picture>
<!-- AVIF: 50% smaller than JPEG. WebP: 30% smaller. JPEG: fallback --><img
src="/photo-800.webp"
srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Photo"
/>
<!-- Browser picks the appropriate resolution for the current viewport --><img src="/below-fold.webp" loading="lazy" alt="..." />
<!-- Native lazy loading — browser defers download until image near viewport -->
<!-- Do NOT lazy-load the LCP image — it will delay your most important metric -->HTTP/1.1 allows ~6 concurrent connections per domain. Workarounds included domain sharding and bundling many files together.
HTTP/2 multiplexes multiple requests over a single TCP connection. Domain sharding is now counterproductive. Many small files are fine because they share one connection.
HTTP/3 uses QUIC (UDP-based) — eliminates TCP head-of-line blocking, faster reconnection on mobile network switches. Chrome uses HTTP/3 for Google services.
preload and prefetch are the same — preload is high-priority for the current page; prefetch is low-priority for future pages. Confusing them wastes bandwidth or misses the optimization.
More parallel connections = faster — HTTP/1.1 domain sharding (splitting assets across sub-domains) is harmful in HTTP/2 because it breaks multiplexing and adds connection overhead.
Lazy loading all images improves performance — lazy loading the LCP (Largest Contentful Paint) image delays the most important metric. Only lazy-load below-the-fold images.
WebP is always better than JPEG — AVIF is significantly better than WebP (~50% vs ~30% savings over JPEG). Serve AVIF with WebP and JPEG as fallbacks using the picture element.
Next.js Image component: automatic WebP/AVIF conversion, srcset generation, lazy loading, blur placeholder — abstracts all image optimization into one component
Vercel edge network: preconnect headers injected automatically for common third-party origins (Google Fonts, etc.) on all Next.js deployments
React Router future flag (preloadData): automatically prefetches route data for Link components in the viewport, not just the chunk
E-commerce product pages: preload the hero product image (LCP), prefetch the cart page chunk, preconnect to the payments API origin
What is the difference between preload, prefetch, and preconnect?
How does HTTP/2 multiplexing improve performance over HTTP/1.1?
What is the difference between defer and async on script tags?
What is image optimization and what techniques does Next.js Image component apply?
What is the critical rendering path and how do you optimize it?
What is TTFB (Time to First Byte) and what factors affect it?
Reading answers is not the same as knowing them. Practice saying them out loud with AI feedback — that's what builds real interview confidence.