Free — no signup required

HTTP/2: HPACK Header Compression and Server Push

2 min read

Efficiency and Proactivity

Header Compression with HPACK

Every HTTP request carries headers: metadata about the request. A typical set includes User-Agent (which browser you are), Accept-Encoding (compression formats you support), Cookie (session data), Authorization (auth tokens), and dozens more. In HTTP/1.1, these are sent as plain text on every single request — even when they haven't changed at all between requests.

On a page that makes 100 requests, you might retransmit 5KB of identical headers 100 times, wasting 500KB of bandwidth before a single byte of actual content is transferred.

HTTP/2 solves this with HPACK, a compression algorithm specifically designed for HTTP headers. HPACK works in two ways:

  1. Static table: A predefined list of 61 common header name/value pairs (like :method: GET or content-encoding: gzip) that can be referenced by a single index number instead of the full string.
  2. Dynamic table: A shared dictionary built up during the connection. Once a header like cookie: session_id=abc123 has been sent once, subsequent requests can reference it by index. If the cookie hasn't changed, the entire header compresses to a single byte.

The result is that after the first request, repeated headers cost almost nothing to transmit.

Server Push

In normal HTTP, the browser requests index.html, receives it, parses it, discovers it needs style.css and app.js, then sends two more requests. Each of those round-trips adds latency — on a 100ms round-trip network, that's 200ms of wasted time just waiting for requests to be made.

HTTP/2 Server Push allows the server to proactively send resources the client hasn't requested yet. When the server sends index.html, it can simultaneously push style.css and app.js with a PUSH_PROMISE frame, saying: "I know you'll need these." The browser caches them and uses them when it encounters the references in the HTML.

The Server Push Caveat

Server Push has a fundamental problem: the server doesn't know what the browser already has cached. If the browser already has style.css cached from a previous visit, the server pushes it anyway, wasting bandwidth. Getting this right requires complex cache-awareness logic. As a result, Server Push has been deprecated in Chrome (as of 2022) and is being removed from other browsers. The replacement pattern is HTTP 103 Early Hints — a response status that tells the browser to start fetching certain resources while the server is still preparing the main response.

This is one of 18 chapters

Every chapter is free — Kubernetes, Terraform, SRE, distributed systems, and more — with fast daily review built in.

Sign up free