Why Upgrade to HTTP/2 Now? Real‑World Performance Gains and Best Practices

Current Adoption of HTTP/2

Since the HTTP/2 specification was released in May 2015, major browsers and server vendors have added support, and large‑scale sites such as Facebook, Google, Twitter, Amazon, Taobao, and Tmall have begun serving traffic over HTTP/2. Smaller, well‑architected sites often upgrade faster because they face fewer architectural constraints.

Key Benefits of HTTP/2

Multiplexing : A single TCP connection can carry many parallel requests and responses, eliminating head‑of‑line blocking.

Priority and Dependency : Clients can assign weights to resources so the server knows which assets to deliver first.

Server Push : The server can proactively send resources the client will need, reducing request latency.

Multiplexing Demo

A test loading 169 images as a single large picture shows the difference between HTTP/1.1 and HTTP/2. The HAR files ( http1.1-images.har and http2-images.har) were inspected with HAR Viewer.

HTTP/1.1 processes images in groups of six, issuing a new group only after the previous one finishes, resulting in a total load time of 2.47 s. HTTP/2 streams all requests concurrently, completing in 1.53 s – about a 40 % speed gain.

Server Push Demo

Two HAR files compare a normal HTTP/2 request with a request that uses server push ( serverpush.har vs nomalrequest.har). Server push eliminates the request‑setup phase, delivering the resource directly and allowing caching.

Core server‑push code (Koa example):

router.get('/serverpush', function (ctx, next) {
  var zepto = fs.readFileSync(resolve(root, 'public/js/zepto.js'), { encoding: 'UTF-8' });
  var html = fs.readFileSync(resolve(root, 'public/item2_1.html'), { encoding: 'UTF-8' });
  ctx.res.push('/zepto.js', options, function (err, stream) {
    if (err) return;
    zlib.gzip(zepto, function (err, buf) {
      stream.end(buf);
    });
  });
  ctx.body = html;
});

Priority and Dependency

Setting resource priorities (e.g., via the Priority header) can speed up CSS and JS delivery, though it may slow down image requests. Screenshots illustrate the effect before and after applying priorities.

Impact on Legacy Optimizations

Sprite Images : With HTTP/2’s multiplexing, the performance benefit of sprites diminishes; the extra maintenance cost often outweighs any gain.

Domain Sharding : Because HTTP/2 removes the per‑origin connection limit, consolidating domains reduces DNS lookup overhead.

Combined API Endpoints : Fine‑grained API calls are now feasible; there is no need to merge data into monolithic endpoints.

Inline Resources : Server push supersedes inline scripts/styles, offering cacheable, reusable assets without inflating HTML size.

Compatibility Overview

According to caniuse data and Baidu statistics, Chrome holds ~40 % of the desktop market, Android 5.0+ accounts for ~26 % of mobile users, and iOS 9.2+ covers over 60 % of iOS devices. Thus, a substantial portion of users can already benefit from HTTP/2.

HTTP/2 is backward‑compatible; browsers that do not support it fall back to HTTP/1.1, and servers can negotiate the protocol per request.

Recommendations

Given its performance advantages and broad support, HTTP/2 is the most cost‑effective way to accelerate web delivery today. For environments where HTTP/2 support is still limited, consider SPDY as an interim solution, but plan to transition to HTTP/2 as soon as possible.