Every asset on a page (HTML, CSS, JS, images) is one HTTP request of size Si that must be fully downloaded. At any instant the shared link of capacity C is split equally across whatever is actively transferring:
B_i(t) = C / N_active(t)
request i finishes when ∫ B_i(t) dt = S_i
HTTP/1.1 opens at most K TCP connections per origin (browsers cap K at 6). Each connection carries exactly one request at a time — a 7th request cannot start until one of the K connections frees up, no matter how small it is. Every newly-opened connection also pays a one-off handshake delay H before its first byte.
HTTP/2 multiplexes all requests as independent streams over a single TCP connection, so N_active(t) can rise to the full request count at once — only one handshake is ever paid.
This page renders the identical bandwidth-sharing model as three linked 2D panels instead of a 3D client/server scene:
- Bandwidth river (top) — a scrolling stacked-area stream graph: the filled column height at each moment is the live-recomputed link capacity, split into bands, one per active request, each band's thickness equal to that request's instantaneous share C/N_active(t). The river makes head-of-line blocking visible directly as band count.
- Completion timeline (middle) — a Gantt-style row per request; bar length is fraction downloaded, colour is state. Queued rows stay flat until a slot frees.
- Connection wheel (bottom) — a radial gauge: HTTP/1.1 draws K wedges, one per TCP connection, filling as its current request downloads and dimming during handshake; HTTP/2 draws one ring subdivided live by however many streams are concurrently active.
Requests on page — asset count (mobile pages: 15–40 typical). Max parallel connections — the K cap (HTTP/1.1 only). Link bandwidth — total capacity C (3G ≈ 150–300 KB/s, 4G ≈ 500–1500 KB/s, 5G ≈ 2000+ KB/s). Handshake / RTT — per-connection setup latency. History window — how many seconds of river history stay on screen.