How do you optimize network requests?

Performance

The short answer

Reduce the number of requests, make them smaller, and make them faster. Use techniques like bundling, compression, caching, lazy loading, CDNs, and preloading to minimize the time users wait for content.

Key techniques

1. Reduce the number of requests

Every HTTP request has overhead — DNS lookup, TCP connection, TLS handshake. Fewer requests means less overhead.

  • Bundle files — Combine multiple JS/CSS files into one using a bundler (Webpack, Vite)
  • CSS sprites — Combine small images into one image file
  • Inline small assets — Base64-encode tiny images directly in CSS or HTML

2. Make requests smaller

  • Minify code — Remove whitespace, comments, and shorten variable names in JS/CSS
  • Compress responses — Use gzip or Brotli compression on the server. This can reduce file sizes by 60-80%
  • Optimize images — Use modern formats (WebP, AVIF), compress images, and serve the right size for the device
  • Tree shaking — Remove unused code from your bundle

3. Cache aggressively

Cache-Control: public, max-age=31536000, immutable

For static assets (JS, CSS, images) with hashed filenames, cache them forever. The hash changes when the content changes, so browsers automatically fetch the new version.

For API responses, use shorter cache times or ETags:

Cache-Control: max-age=300
ETag: "abc123"

4. Lazy load non-critical resources

Do not load everything upfront. Load images and components when they are needed:

<!-- Lazy load images -->
<img src="photo.jpg" loading="lazy" alt="Photo" />
// Lazy load React components
const Chart = React.lazy(() => import('./Chart'));

5. Use a CDN

A CDN (Content Delivery Network) serves your static files from servers close to the user. Instead of fetching from your origin server in one location, the user gets the file from the nearest CDN edge.

6. Preload critical resources

Tell the browser to start fetching important resources early:

<!-- Preload fonts, critical CSS, or key scripts -->
<link
  rel="preload"
  href="/fonts/main.woff2"
  as="font"
  crossorigin
/>
<link rel="preload" href="/critical.css" as="style" />
<!-- Prefetch resources for the next page -->
<link rel="prefetch" href="/next-page.js" />
  • preload — Fetch this now, I need it for the current page
  • prefetch — Fetch this when you are idle, I might need it for the next page

7. Use HTTP/2 or HTTP/3

HTTP/2 allows multiple requests over a single connection (multiplexing). This reduces the cost of many small requests and makes bundling less critical than it was with HTTP/1.1.

Interview Tip

Organize your answer into categories: reduce requests, make them smaller, cache them, and load them smarter. Give one practical technique for each. Mentioning specific tools (Brotli, WebP, CDN, loading="lazy") shows real experience, not just theoretical knowledge.

Why interviewers ask this

Network performance directly affects user experience. Slow loading times lead to higher bounce rates. Interviewers want to see if you know the practical techniques to make web applications load faster and if you have experience applying them in real projects.

Table of Contents