Performancehighassets

Minimize HTTP requests

rule · http-requests

Reducing HTTP requests minimizes network overhead and improves load times.

Code Examples

1. Bundle Critical Resources

JavaScript

// vite.config.js - bundle optimization
export default {
  build: {
    rollupOptions: {
      output: {
        // Create separate chunks for vendor code
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'date-fns']
        }
      }
    }
  }
}

2. Inline Critical CSS

HTML

<!-- Inline critical CSS to avoid extra request -->
<head>
  <style>
    /* Critical above-fold CSS */
    body { margin: 0; font-family: system-ui; }
    .hero { height: 100vh; display: flex; align-items: center; }
  </style>
 
  <!-- Load remaining CSS asynchronously -->
  <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

3. SVG Sprite for Icons

HTML

<!-- Single request for all icons -->
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27..."/>
  </symbol>
</svg>
 
<!-- Use icons without additional requests -->
<svg class="icon"><use href="#icon-home"/></svg>
<svg class="icon"><use href="#icon-search"/></svg>

4. Data URIs for Small Assets

CSS

/* Inline small images as data URIs */
.icon-small {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L2 7l10 5 10-5-10-5z"/%3E%3C/svg%3E');
}

5. Font Subsetting

CSS

/* Load only needed characters */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-subset.woff2') format('woff2');
  unicode-range: U+0000-007F; /* Basic Latin only */
}

Why It Matters

Each HTTP request incurs network overhead—DNS lookup, TCP connection, and TLS handshake add latency. Reducing requests significantly improves initial load time.

Request Overhead Breakdown

Phase	Time (ms)	Notes
DNS lookup	20-120	First request to new domain
TCP connection	20-100	Three-way handshake
TLS handshake	30-100	HTTPS connection setup
Time to first byte	50-500	Server processing + network
Content download	Varies	Based on file size

HTTP/1.1 vs HTTP/2

Feature	HTTP/1.1	HTTP/2
Connections per domain	6	1 (multiplexed)
Request overhead	High	Lower
Bundling benefit	High	Moderate
Header compression	No	Yes (HPACK)

React Code Splitting

TSX

import { lazy, Suspense } from 'react'
 
// Split heavy components into separate chunks
const HeavyChart = lazy(() => import('./HeavyChart'))
const AdminPanel = lazy(() => import('./AdminPanel'))
 
function App() {
  return (
    <Suspense fallback={<Loading />}>
      {showChart && <HeavyChart />}
      {isAdmin && <AdminPanel />}
    </Suspense>
  )
}

Next.js Automatic Optimization

TSX

// Next.js automatically optimizes requests
import Image from 'next/image'
import Script from 'next/script'
 
// Images automatically optimized and served efficiently
<Image src="/hero.jpg" width={1200} height={600} priority />
 
// Scripts loaded efficiently with strategy
<Script src="https://analytics.com/script.js" strategy="lazyOnload" />

Measuring Requests