How Reducing HTTP Requests Supercharges Web Performance

Why Improve Web Performance?

Web performance golden rule: only 10%‑20% of the final user response time is spent downloading the HTML document, while the remaining 80%‑90% is consumed by downloading page components.

According to the famous 2‑5‑8 principle:

When users receive a response within 2 seconds, they feel the system is extremely fast.

When the response is between 2‑5 seconds, the speed feels acceptable.

When the response is between 5‑8 seconds, the system feels slow but still tolerable.

Beyond 8 seconds, users consider the system terrible and may abandon it.

Why Reducing HTTP Requests Improves Web Performance

To answer this, we need to understand the steps a browser takes when sending an HTTP request: establishing a TCP connection (three‑way handshake), sending the request, waiting (network latency and server processing), and downloading data.

Analysis of Baidu’s homepage shows that most of the time for HTTP requests is spent in the connection establishment and waiting phases.

Therefore, the majority of an HTTP request’s duration is consumed by connection setup and waiting, so reducing the number of requests is a key optimization.

How to Improve Web Performance

1. Reduce HTTP Requests

Generally, reduce requests by minimizing image requests and consolidating script and stylesheet files.

CSS Sprites : Combine multiple images into a single file and use CSS background‑position to display the needed part, reducing download size and request count.

Inline Images : Use data URLs to embed small images directly in the page, avoiding extra requests (note: not supported in IE8‑ and limited to ~23 KB).

IconFont : Replace icons with font glyphs, offering smaller size, scalability, and easy styling.

For scripts and stylesheets, merge multiple files into one, then minify and optionally obfuscate the code to reduce size. Tools like Gulp can automate bundling.

2. Page Internal Optimization

Key practices include placing stylesheets at the top, scripts at the bottom, avoiding CSS expressions, using external stylesheets, and removing duplicate scripts.

Placing CSS at the top allows the browser to render content progressively, while moving scripts to the bottom (or adding async / defer) prevents blocking rendering.

3. Enable Caching

Two main caching schemes:

Expires / If‑Modified‑Since (HTTP/1.0): Sets an expiration time; the browser serves the cached copy until it expires.

Cache‑Control / ETag (HTTP/1.1): Uses max‑age for fine‑grained control and ETag headers for validation.

Expires : Directly tells the browser how long a resource is fresh, avoiding a conditional request.

ETag : A unique identifier for a specific version of a resource; the browser sends If‑None‑Match to validate freshness.

Cache‑Control : Uses max‑age directive to specify how long a response may be cached, providing more granular control than Expires.

4. Reduce Download Size

Enable gzip compression on the server. Gzip reduces the size of text‑based responses (HTML, CSS, JS, JSON, XML) by up to 70%, at the cost of additional CPU for compression/decompression.

5. Optimize Network Connection

Three main rules:

Use a CDN to serve content from locations closer to users, shortening transfer time.

Reduce DNS lookups by limiting the number of hostnames per page (ideally 2‑4) and leveraging browser and OS caching.

Avoid redirects because each redirect adds an extra HTTP request and latency.

Example of a 301 redirect:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html