How to Reduce HTTP Requests: Combine and Inline in 2027

Quick answer: To reduce HTTP requests, combine CSS/JS files into bundles, inline critical CSS and small images (base64/SVG), use CSS sprites or icon fonts for icons, enable HTTP/2 multiplexing, and lazy-load non-critical resources. Each HTTP request adds 20-100ms of overhead (DNS, TCP, TLS). With HTTP/2, multiplexing reduces the penalty, but fewer requests still mean faster loads. Target: under 50 total requests per page, under 10 for above-the-fold content.[1][3][4]

Every HTTP request adds overhead: DNS lookup, TCP handshake, TLS negotiation, and server processing. While HTTP/2 multiplexing has reduced the penalty, minimizing requests remains a fundamental performance optimization. In 2027, with Core Web Vitals as ranking factors, every millisecond counts.

The cost of HTTP requests

Per-request overhead

• DNS lookup: 20-120ms
• TCP handshake: 1 RTT (round-trip time)
• TLS handshake: 1-2 RTT
• Server processing: 10-100ms
• Total per request: 50-300ms (before any data transfers)

Impact on performance

A page with 100 requests has 100x the connection overhead of a page with 1 request. Even with HTTP/2 multiplexing, more requests mean more data to transfer and process.[3][4]

Optimization techniques

1. Combine CSS files

Instead of 5 separate CSS files:

<!-- Before: 5 requests -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="utilities.css">

<!-- After: 1 request -->
<link rel="stylesheet" href="styles.css">

Use build tools (Webpack, Vite) to automatically combine CSS.[3]

2. Combine JavaScript files

<!-- Before: 3 requests -->
<script src="utils.js"></script>
<script src="components.js"></script>
<script src="app.js"></script>

<!-- After: 1 request -->
<script src="bundle.js"></script>

3. Inline critical CSS

<head>
  <style>
    /* Critical CSS inlined - 0 requests */
    body { font-family: system-ui; margin: 0; }
    .header { background: #0b1216; }
  </style>
  <link rel="stylesheet" href="styles.css"> <!-- Non-critical, deferred -->
</head>

4. Inline small images (base64)

For images under 2-4 KB, inline as base64:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Icon">

Or in CSS:

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2Zy...');
}

Trade-off: Base64 increases file size by ~33% but eliminates an HTTP request. Only use for very small images.[3]

5. Use inline SVG for icons

<!-- Instead of an image request -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z"/>
</svg>

SVG icons are text-based and can be inlined directly in HTML. Zero HTTP requests.[3]

6. Use HTTP/2 multiplexing

HTTP/2 allows multiple requests over a single connection:

• No need for domain sharding (was needed for HTTP/1.1)
• Parallel requests without head-of-line blocking
• Server push (deprecated but still relevant)

Key insight: With HTTP/2, the penalty for multiple requests is reduced but not eliminated. Fewer requests still means less data to transfer.[3][4]

7. Lazy-load non-critical resources

<!-- Images -->
<img src="image.webp" loading="lazy" alt="Description">

<!-- Iframes -->
<iframe src="widget.html" loading="lazy"></iframe>

<!-- Scripts -->
<script src="analytics.js" defer></script>

8. Use resource hints

<!-- Preconnect to third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Prefetch resources for next page -->
<link rel="prefetch" href="next-page.js">

<!-- Preload critical resources -->
<link rel="preload" href="hero.webp" as="image">

9. Reduce third-party requests

Audit and remove unnecessary third-party scripts. Each third-party domain adds DNS + TCP + TLS overhead:

• Analytics: 1-2 requests
• Ads: 5-20 requests
• Chat widgets: 10-30 requests
• Social embeds: 5-15 requests

Target: Under 5 third-party requests per page.[3][4]

10. Use a bundler

Modern bundlers (Webpack, Vite, Rollup) automatically:

• Combine JS modules into bundles
• Tree-shake unused code
• Split code by route
• Minify output

Configure for optimal bundle sizes:

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'date-fns'],
        },
      },
    },
  },
};

Performance budget

Measuring HTTP requests

Chrome DevTools Network tab

• Total request count shown at bottom
• Filter by type (JS, CSS, Img, etc.)
• Check "Waterfall" for request timing
• Look for duplicate requests[3]

Lighthouse

• "Minimize main-thread work" (flags excessive requests)
• "Reduce the impact of third-party code"[4]

WebPageTest

• Request count and size breakdown
• "First View" vs "Repeat View" (repeat should be much fewer requests due to caching)[4]

Frequently Asked Questions (FAQ)

How many HTTP requests is too many?

For HTTP/1.1: Under 30-50 requests per page. For HTTP/2: Under 50-80 requests. Above 100 requests, performance degrades noticeably even with HTTP/2.[3][4]

Does HTTP/2 eliminate the need to reduce requests?

No. HTTP/2 multiplexing reduces the penalty for multiple requests, but each request still adds data transfer and processing overhead. Fewer requests still means faster loads.[3][4]

Should I inline all CSS and JS?

No. Inline only critical CSS (above-the-fold). For JS, use code splitting instead of inlining. Inlining everything increases HTML size and prevents caching of individual resources.[3]

What is domain sharding?

Domain sharding was a technique for HTTP/1.1 where you served assets from multiple subdomains (e.g., cdn1.example.com, cdn2.example.com) to bypass the 6-connection-per-domain limit. It's unnecessary with HTTP/2 and can actually hurt performance.[3]

Should I use base64 for all small images?

No. Base64 increases file size by ~33%. Only use for images under 2-4 KB where eliminating a request is worth the size increase. For larger images, use separate files.[3]

How do I find duplicate requests?

Use Chrome DevTools Network tab. Sort by name and look for duplicates. Common causes: same library loaded from different URLs, duplicate CSS imports, and redundant third-party scripts.[3]

What is HTTP/2 server push?

Server push (now deprecated in favor of 103 Early Hints) allowed the server to send resources before the browser requested them. It's being replaced by 103 Early Hints, which sends preload hints before the main response.[3][4]

How do I check if my site uses HTTP/2?

Use Chrome DevTools Network tab. The "Protocol" column shows "h2" for HTTP/2. Or use online tools like HTTP/2 Test (http2.pro).[3]

Related reading on MintSaaS

• JavaScript Bundle Optimization: Code Splitting Guide
• CSS Optimization: Reduce Render-Blocking Resources
• How to Optimize Images for SEO: Complete Guide

Sources

[1] MDN Web Docs — HTTP: https://developer.mozilla.org/en-US/docs/Web/HTTP

[2] Web.dev — Reduce HTTP requests: https://web.dev/articles/reduce-http-requests

[3] MintSaaS Image Compressor: https://www.mintsaas.net/products/image-compressor

[4] Web.dev — Core Web Vitals: https://web.dev/vitals/

[5] MintSaaS PDF Compressor: https://www.mintsaas.net/products/pdf-compressor

Free tools on MintSaaS

Try our free tools to put this guide into practice:

• Image Compressor
• PDF Compressor
• Image Converter
• MintSaaS Home
• MintSaaS Blog
• How to Compress Images