Boost Web Performance: Why Reducing HTTP Requests Matters
The article explains why web performance matters, outlines the 2‑5‑8 response time rule, and details five key optimization strategies—reducing HTTP requests, internal page tweaks, caching, minimizing download size, and network improvements—while also discussing engineering practices and tools like StyleCombine and H5 incremental packaging.
Why Improve Web Performance?
Web performance is crucial for user experience. According to the 2‑5‑8 rule, users feel the system is fast when a response arrives within 2 seconds, acceptable within 5 seconds, tolerable up to 8 seconds, and unacceptable beyond 8 seconds.
1. When users receive a response within 2 seconds, they perceive the system as very fast. 2. When the response is between 2‑5 seconds, they consider the speed acceptable. 3. When the response is between 5‑8 seconds, they find it slow but still tolerable. 4. After 8 seconds, users think the system is terrible and may abandon it.
Yahoo engineers summarized 14 front‑end optimization rules, which can be grouped into five main areas.
Why Reducing HTTP Requests Improves Web Performance
Each HTTP request involves establishing a TCP connection (three‑way handshake), sending the request, waiting for network latency and server processing, and downloading data. In many cases, the connection and waiting phases dominate the total time.
Images from Baidu’s homepage illustrate that most of the time is spent on connection setup and waiting, not on downloading the content.
Therefore, reducing the number of HTTP requests is an effective way to improve performance.
How to Improve Web Performance
1. Reduce HTTP Requests
Focus on decreasing image requests and combining script and stylesheet files.
Image reduction techniques include CSS sprites, inline images (data URLs), and IconFont.
CSS Sprites : Merge multiple images into a single file and use background‑position to display the needed part, reducing download size.
Inline Images : Embed small images as base64 data URLs to avoid extra requests (note: not supported in IE8‑ and limited to ~23 KB).
IconFont : Use font icons instead of images for scalable, lightweight icons.
2. Internal Page Optimization
Place stylesheets in the <head>, scripts at the bottom of the page, avoid CSS expressions, use external files, and remove duplicate scripts.
Loading scripts at the bottom prevents blocking of page rendering; adding async (or defer for IE) further improves parallel downloading.
3. Enable Caching
Two main caching mechanisms: HTTP/1.0 Expires/If‑Modified‑Since and HTTP/1.1 Cache‑Control/ETag. The latter takes precedence when both are present.
If‑Modified‑Since (conditional GET) lets the browser send the last modified time; the server responds with 304 Not Modified if the resource is unchanged.
Expires sets an absolute expiration time, allowing the browser to use the cached copy without any request until it expires.
ETag provides a unique identifier for a specific version of a resource; the browser sends If‑None‑Match and receives 304 if the tag matches.
Cache‑Control uses max‑age (seconds) for fine‑grained control, avoiding a request altogether while the cached copy is fresh.
4. Reduce Download Size
Enable GZIP compression on the server to shrink text‑based responses (HTML, CSS, JS, JSON, XML) by up to 70 %. Do not compress images or PDFs.
5. Optimize Network Connections
Use a CDN to serve content from locations close to users, reduce DNS lookups (keep the number of hostnames low, ideally 2‑4), and avoid redirects (especially trailing‑slash redirects).
What Is Engineering?
Engineering in the front‑end context means turning experience and knowledge into repeatable, standardized processes and tools that enable consistent, high‑quality product delivery.
PC Era Performance Optimization Engineering Product – StyleCombine
StyleCombine is a server‑side module loader that automatically applies ten of Yahoo’s optimization rules, works with Nginx/Apache, and supports Java, PHP, Node.js, etc. It can parse AMD/CMD dependencies and merge module URLs.
Mobile Era Performance Optimization Engineering Product – H5 Incremental Package Mechanism & Style Diff Center
For mobile H5 applications, incremental packages and a style diff center allow performance improvements to be packaged and deployed efficiently, extending the engineering approach from PC to wireless platforms.
Front‑end performance optimization should be a technical, not a manual, effort; adopting engineering practices makes it sustainable.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.