Mastering HTTP/2: Essential Front‑End Optimizations and Nginx Setup

What changes when you upgrade to HTTP/2? Most HTTP/1.x optimizations become unnecessary because HTTP/2 multiplexes many requests over a single TCP connection. Multi‑domain parallel connections no longer improve performance, and if your CDN uses a different IP or certificate, it will open an extra TCP connection.

Resource concatenation is still acceptable; you don’t need to aggressively merge files solely for HTTP/2. Server Push is a powerful feature that lets the server send resources before the client requests them, improving bandwidth utilization and load timing, although current Nginx versions may not support it.

Browser support : Over half of global browsers already support HTTP/2, though older Chinese browsers (IE8/9/10 and non‑Windows‑10 IE11) lag behind. Servers negotiate protocols, so unsupported clients fall back to HTTP/1.x.

Performance considerations : Multiplexing and Server Push can dramatically reduce waiting time, but TLS overhead may offset gains, especially for large files or video streams. Testing is essential to determine the best configuration for your environment.

Prerequisite : HTTP/2 requires HTTPS; obtain a TLS certificate and configure your server accordingly.

Enabling HTTP/2 in Nginx :

server {
    listen 443 ssl http2 default_server;
    ssl_certificate    server.crt;
    ssl_certificate_key server.key;
    ...
}

Refer to the official Nginx HTTP/2 documentation for compilation and configuration details.

Server Push mechanics : Browsers can pre‑load resources by analyzing the document or reacting to user actions (e.g., hover). Front‑end developers can also hint pre‑loads using dns-prefetch or inline critical resources.

Compared with HTTP/1.x, HTTP/2 reduces the need for manual pre‑loading, header overhead, and multiple TCP handshakes, leading to faster first‑byte times and better bandwidth efficiency.

Major sites such as Google, Twitter, and Facebook have already deployed HTTP/2.

References

HTTP/2 Frequently Asked Questions

Jetty SPDY Push Demonstration

Innovating with HTTP 2.0 Server Push

7 Tips for Faster HTTP/2 Performance

Can I Use HTTP/2

NGINX Open Source 1.9.5 Released with HTTP/2 Support

Announcing an Early Alpha Patch for HTTP/2

HTTP/2 Now Fully Supported in NGINX Plus

Nginx HTTP2 White Paper v4

High Performance Browser Network Special Edition: Selected Content For HTTP2

Nginx HTTP 2 的编译和配置

Module ngx_http_v2_module

What effect does HTTP2 push have on a web app w/ HTML Imports?

[Slides] HTTP/2 is here, let’s optimize