Skip to content
Optimal Lab

Networking · interactive

HTTP/1.1, HTTP/2 and HTTP/3

A page needs ten files. How they share the connection decides when each one arrives. The link carries one chunk per tick; a handshake and each request's round trip cost time too.

  • app.css
  • app.js
  • vendor.js
  • logo.svg
  • hero.jpg
  • font.woff2
  • icons.svg
  • data.json
  • avatar.png
  • chart.js
054 ticks

Amber: delayed by the lost packet.

  • HTTP/1.1, 1 connection48 ticks
  • HTTP/1.1, 6 connections30 ticks
  • HTTP/230 ticks
  • HTTP/3 (QUIC)29 ticks

One connection, every file interleaved as separate streams, so small files finish early. 30 ticks.

Protocol

Packet loss

Step 2 of 4

  1. 1

    HTTP/1.1: one at a time

    A connection carries one request and response at a time, so browsers open several connections.

    Hence old tricks: sprites, bundling, domain sharding.

  2. 2

    HTTP/2: streams on one connection

    Requests become numbered streams whose frames interleave. Headers are compressed. One handshake.

    Bundling matters much less.

  3. 3

    TCP head-of-line blocking

    TCP delivers bytes strictly in order. If one packet is lost, everything after it waits, even for other streams.

    Worse on lossy mobile networks.

  4. 4

    HTTP/3 over QUIC

    QUIC runs on UDP with its own per-stream reliability and a combined transport+TLS handshake. Loss only stalls the affected stream.

    Connections also survive switching networks.

In production

Tools and technologies

Browsers and CDNs negotiate HTTP/2 and HTTP/3 automatically.

Not tied to one language — use these names when you search docs or design a system.