Minimizing HTTP requests

#In short: why it matters

Every HTTP request is:

• a separate connection to the server (TCP, TLS handshake),
• latency while the request-response cycle runs,
• load on the server and network.

The more requests, the slower the page renders, the longer it takes to show content to the user, and metrics like LCP, FCP, and TTFB drop.

---

#What happens on every request

When the browser makes a new HTTP request (for example, for a CSS, JS, or image file):

1. DNS resolution - finding the domain's IP.
2. TCP connection - a "handshake" between client and server.
3. TLS encryption (if HTTPS) - another handshake.
4. Request -> response - the data starts loading.

Even if the resource is small, these stages take tens to hundreds of milliseconds. And if there are hundreds of such files, the delay adds up.

---

#Why this slows down a site

---

#Code examples

#Bad:

• 7 HTTP requests just for CSS and JS.

#Better:

• 2 requests instead of 7. CSS and JS are minified and bundled.

---

#How to reduce the number of HTTP requests

#1. Bundling and minification

• Combine CSS and JS (Webpack, Vite, Rollup, esbuild, Next.js does this by itself).
• Minify (remove whitespace, shorten variable names).

#2. Icon sprites

• SVG sprites or a single PNG sprite instead of dozens of small images.
• In CSS you can use background-position to crop them out.

#3. Use image-set() and srcset

• Instead of loading every size of an image, load only the one that fits the screen.

#4. HTTP/2 and HTTP/3

• These protocols allow multiplexing several files over a single connection.
• But even then, fewer requests mean fewer headers, less overhead.

#5. Caching and a CDN

• Use the Cache-Control, ETag, Last-Modified headers.
• Then the browser makes no new requests if the resources haven't changed.

#6. Lazy Loading

• Load images, video, and JS only when they're actually needed.

#7. Inlining

• Critical CSS or SVG can be inserted directly into HTML (<style> or <svg>).
• Especially important for above-the-fold content.

---

#Numbers for reference

Even 10-20 small 5 KB files can slow a page down by hundreds of milliseconds - purely from network delays.

---

#The result of optimization

After minimizing requests:

• faster first render (First Paint);
• lower Time to Interactive (TTI);
• fewer render-blocking resources;
• better SEO and Core Web Vitals;
• the site feels like it "flies" to the user.

---

#Short conclusion