Web Performance Optimization: Reducing HTTP Requests and Improving Page Load Speed

Web performance is crucial for user experience; according to the 2‑5‑8 principle, users perceive a system as fast when responses are under 2 seconds, acceptable between 2‑5 seconds, tolerable up to 8 seconds, and unacceptable beyond that.

Yahoo engineers summarized 14 front‑end optimization rules, which can be grouped into five major areas:

Reduce HTTP requests

Page‑internal optimization

Enable caching

Reduce download size

Network connection optimization

Why reduce HTTP requests? A typical browser request involves establishing a TCP connection (three‑way handshake), sending the request, waiting for network latency and server processing, and finally downloading data. Most of the time spent on a request is in the connection and waiting phases, as shown by the Baidu homepage example.

Open a connection (TCP three‑way handshake) → Send request → Wait (network latency + server processing) → Download data

Therefore, minimizing the number of requests directly cuts down this overhead.

Techniques to reduce HTTP requests:

Image reduction: CSS sprites, inline images (data URL), and IconFont replace multiple image files with a single resource.

Script and stylesheet reduction: Merge files, minify, and optionally obfuscate JavaScript. Tools like Gulp can bundle AMD/CMD modules and inline HTML templates.

Examples of image‑related techniques:

CSS Sprites: Combine several images into one and use background‑position to display the correct part, reducing both request count and download size.

Inline Images: Embed small images as data:image/...;base64, URLs. This works in modern browsers but has size limits in older IE versions.

IconFont: Use font files to render icons, offering scalability and smaller payloads compared to raster images.

Page‑internal optimization: Place CSS at the top of the document, move JavaScript to the bottom, avoid CSS expressions, use external scripts/styles, and remove duplicate scripts.

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

Caching strategies:

HTTP/1.0: Expires and If‑Modified‑Since (conditional GET, 304 Not Modified).

HTTP/1.1: Cache‑Control (max‑age) and ETag (entity tag) for finer‑grained validation.

Example of a 301 redirect response:

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

Reduce download size: Enable GZIP compression on the server; compressing text resources (HTML, CSS, JS, JSON, XML) can shrink payloads by up to 70%.

Network connection optimization:

Use a CDN to serve static assets from geographically close edge servers.

Minimize DNS lookups by reducing the number of hostnames per page (ideally 2‑4).

Avoid unnecessary redirects, which add extra round‑trips and latency.

These combined practices, originally proposed by Yahoo and later extended by modern front‑end engineering, help achieve faster page loads and better user satisfaction.