Communication networks

How bytes get from a server to a browser and where the time goes: latency, IP, DNS, TCP, UDP, TLS, radio networks, HTTP/1.1 to HTTP/3, and the browser transports built on them. Follows High Performance Browser Networking, updated for QUIC, TLS 1.3 and 2026 browsers. Fetch-level caching and headers live in Fetch API.

Latency and bandwidth

Latency is the time for one bit to reach the other side; RTT is there and back. Bandwidth is the maximum throughput of a path. Most web pages are latency-bound: past ~5 Mbit/s, more bandwidth barely changes page load time, while every RTT cut does.

Light in fiber travels at about 200,000 km/s (refractive index ~1.5), or 5 µs per km.

Real RTTs run 1.5 to 3 times higher because of indirect routing, queuing and the last mile.

• Last mile: the access link (DSL, cable, fiber, Wi-Fi, cellular) often adds more latency than the backbone. Fiber-to-the-home is ~1–5 ms, cable 10–20 ms, mobile far more.
• Bandwidth-delay product (BDP) = bandwidth × RTT = bytes in flight needed to fill the pipe. 100 Mbit/s × 80 ms = 1 MB, so TCP windows must reach 1 MB.

Network layers

The TCP/IP model folds 5–7 into Application and 1–2 into Link. HTTP/3 blurs the lines: QUIC does transport, TLS and multiplexing in user space on top of UDP.

HTTP/1.1, HTTP/2           HTTP/3
+----------------+         +----------------+
| HTTP           |         | HTTP/3 (QPACK) |
+----------------+         +----------------+
| TLS 1.2 / 1.3  |         | QUIC + TLS 1.3 |
+----------------+         +----------------+
| TCP            |         | UDP            |
+----------------+---------+----------------+
|                IP (v4 / v6)               |
+-------------------------------------------+

IP addressing

• Addresses per prefix: 2^(32 - n) for IPv4, 2^(128 - n) for IPv6.
• Happy Eyeballs (RFC 8305): clients race IPv6 and IPv4 connects and keep the winner, so a broken AAAA record costs ~250 ms rather than a timeout.
• Subnet and firewall basics for servers are in Sysadmin.

DNS

browser/OS stub --> recursive resolver (ISP, 1.1.1.1, 8.8.8.8)
                     |  cache hit? answer now
                     +--> root (.)       "ask .com"
                     +--> TLD (.com)     "ask ns1.example.com"
                     +--> authoritative  "A 192.0.2.10, TTL 300"

A cold lookup costs several RTTs; a cached one costs nothing. Browsers, the OS and the resolver all cache until the TTL expires.

In pages: <link rel="dns-prefetch" href="https://cdn.example.com"> for origins you might use, preconnect for origins you will use.

TCP

Reliable, ordered byte stream with flow and congestion control.

client                              server
  | SYN seq=x                          |
  |----------------------------------->|
  |                  SYN-ACK seq=y ack=x+1
  |<-----------------------------------|
  | ACK ack=y+1  (+ first data)        |   1 RTT before data
  |----------------------------------->|

Round trips to fetch N bytes on a fresh connection, ignoring loss: ceil(log2(N / 14.6 KB + 1)). A 64 KB response needs 3 RTTs of slow start, so keep the critical HTML and CSS within the first ~14 KB.

sysctl net.ipv4.tcp_available_congestion_control
sysctl -w net.core.default_qdisc=fq
sysctl -w net.ipv4.tcp_congestion_control=bbr
sysctl -w net.ipv4.tcp_slow_start_after_idle=0
sysctl -w net.ipv4.tcp_tw_reuse=1        # outbound only
sysctl -w net.core.somaxconn=4096        # accept backlog
ss -ti state established '( dport = :443 )'  # cwnd, rtt

Persist settings in /etc/sysctl.d/*.conf. Best wins come from the app: reuse connections (keep-alive, pools), send fewer bytes, and cut round trips.

UDP and NAT traversal

UDP adds ports and a checksum to IP, nothing else: no handshake, ordering, retransmission, or congestion control. QUIC, DNS, WebRTC media and games build what they need on top.

Most peer-to-peer sessions connect directly; a minority (corporate networks, symmetric NAT) need TURN, so production WebRTC always ships one. See WebRTC.

TLS

TLS 1.2 (2 RTT)                    TLS 1.3 (1 RTT)
C: ClientHello           -->       C: ClientHello + key_share  -->
S: ServerHello, Cert,    <--       S: ServerHello + key_share,
   ServerKeyExchange, Done            {Cert, Verify, Finished} <--
C: ClientKeyExchange,              C: {Finished} + HTTP request -->
   ChangeCipherSpec, Fin -->
S: ChangeCipherSpec, Fin <--
C: HTTP request          -->
 
TLS 1.3 resumption with 0-RTT
C: ClientHello + PSK + early data (HTTP request) -->
S: ServerHello ... + HTTP response               <--

TLS costs one extra RTT per new connection (two on 1.2) plus a few KB for certificates: prefer ECDSA certificates (smaller, faster) and keep the chain short.

Wireless and mobile

• Radio power states (RRC): the modem sleeps (RRC_IDLE, 5G adds RRC_INACTIVE), and the first packet after idle pays a promotion delay before any data moves.
• After traffic stops the radio stays high-power for seconds (tail time). Periodic polls and beacons keep it awake and drain the battery.
• Batch requests, defer analytics (navigator.sendBeacon on page hide), prefer push over polling, and treat every mobile request as "may take a second or fail".
• Mobile links change IPs (Wi-Fi ↔ cellular): TCP connections die, QUIC migrates.

HTTP/1.1

HTTP/2

One TCP connection per origin, carrying many interleaved streams of binary frames.

Remaining weakness: all streams share one TCP byte stream, so one lost packet stalls every stream (TCP head-of-line blocking). On lossy mobile links HTTP/2 can lose to several HTTP/1.1 connections.

HTTP/3 and QUIC

QUIC (RFC 9000) is a transport over UDP with TLS 1.3 built in; HTTP/3 (RFC 9114) maps HTTP onto it with QPACK (RFC 9204) header compression.

TCP + TLS 1.3 + HTTP/2           QUIC + HTTP/3
C: SYN              -->          C: Initial (ClientHello)      -->
S: SYN-ACK          <--          S: Initial + Handshake        <--
C: ACK, ClientHello -->          C: Handshake Fin + request    -->
S: ServerHello...   <--          S: response                   <--
C: Fin + request    -->
S: response         <--          1 RTT to first byte (0 on resume)
2 RTT to first byte

Browser transports

Server side: WebSockets, Streaming.

Performance checklist

Diagnostic tools

DevTools timing phases: Queueing → Stalled → DNS Lookup → Initial connection (TCP) → SSL → Request sent → Waiting for server response (TTFB) → Content Download.

Recipes

curl timing breakdown

When you want to know whether DNS, connect, TLS or the server is slow.

cat > curl-timing.txt <<'EOF'
     dns  %{time_namelookup}s\n
 connect  %{time_connect}s\n
     tls  %{time_appconnect}s\n
    ttfb  %{time_starttransfer}s\n
   total  %{time_total}s\n
protocol  HTTP/%{http_version} %{remote_ip}\n
EOF
curl -so /dev/null -w @curl-timing.txt https://example.com
# times are cumulative from the start: tls - connect = TLS

Trace a DNS lookup

When a record looks wrong, stale, or differs between resolvers.

dig +trace example.com                 # root -> TLD -> auth
dig +short example.com A @1.1.1.1      # one resolver
dig example.com AAAA +noall +answer    # with TTL left
dig example.com HTTPS +short           # alpn, ech hints
dig NS example.com +short              # who is authoritative
dig -x 192.0.2.10 +short               # reverse (PTR)

Check HTTP/3 support

When you want to confirm a site advertises and actually serves HTTP/3.

curl -V | grep -o HTTP3                 # curl built with h3?
curl -sI https://cloudflare.com | grep -i alt-svc
curl -sI --http3-only https://cloudflare.com | head -1
dig cloudflare.com HTTPS +short         # alpn="h3,h2"

In Chrome, enable the Protocol column in the Network panel; h3 means QUIC was used.

Inspect a certificate chain

When a client complains about an untrusted or expired certificate.

openssl s_client -connect example.com:443 \
  -servername example.com -alpn h2,http/1.1 \
  -showcerts </dev/null 2>/dev/null \
  | grep -E 's:|i:|Protocol|ALPN'
echo | openssl s_client -connect example.com:443 \
  -servername example.com 2>/dev/null \
  | openssl x509 -noout -dates -subject -ext subjectAltName

Measure connection phases in the browser

When you want real-user DNS, TCP, TLS and TTFB numbers instead of lab ones.

type Phases = Record<
  "dns" | "tcp" | "tls" | "ttfb" | "download",
  number
>;
 
function phases(e: PerformanceResourceTiming): Phases {
  const tlsStart = e.secureConnectionStart;
  return {
    dns: e.domainLookupEnd - e.domainLookupStart,
    tcp: (tlsStart || e.connectEnd) - e.connectStart,
    tls: tlsStart ? e.connectEnd - tlsStart : 0,
    ttfb: e.responseStart - e.requestStart,
    download: e.responseEnd - e.responseStart,
  };
}
 
new PerformanceObserver((list) => {
  for (const e of list.getEntriesByType("resource")) {
    const r = e as PerformanceResourceTiming;
    console.table({ url: r.name, protocol: r.nextHopProtocol,
      ...phases(r) });
  }
}).observe({ type: "resource", buffered: true });

Cross-origin entries report zeros unless the server sends Timing-Allow-Origin. Reused connections show 0 for DNS, TCP and TLS.

References

• Ilya Grigorik, High Performance Browser Networking (opens in a new tab): latency, TCP, UDP, TLS, wireless, HTTP/1.1, HTTP/2, browser APIs
• MDN: Evolution of HTTP (opens in a new tab), HTTP/3 glossary (opens in a new tab), QUIC (opens in a new tab), 103 Early Hints (opens in a new tab), Alt-Svc (opens in a new tab), Content-Encoding (opens in a new tab), Strict-Transport-Security (opens in a new tab), Compression Dictionary Transport (opens in a new tab)
• MDN: Resource Timing (opens in a new tab), rel=preconnect (opens in a new tab), Server-sent events (opens in a new tab), WebSockets API (opens in a new tab), WebTransport API (opens in a new tab), WebRTC API (opens in a new tab)
• RFCs: 9110 HTTP Semantics (opens in a new tab), 9113 HTTP/2 (opens in a new tab), 9000 QUIC (opens in a new tab), 9114 HTTP/3 (opens in a new tab), 9204 QPACK (opens in a new tab), 9846 TLS 1.3 (opens in a new tab), 9849 ECH (opens in a new tab), 9460 SVCB/HTTPS records (opens in a new tab), 8484 DoH (opens in a new tab), 9218 HTTP priorities (opens in a new tab), 8297 Early Hints (opens in a new tab), 9842 Compression Dictionary Transport (opens in a new tab), 6928 initial window (opens in a new tab), 8445 ICE (opens in a new tab)
• Cloudflare Learning Center: What is DNS? (opens in a new tab), HTTP/3 and QUIC (opens in a new tab), TLS handshake (opens in a new tab), Encrypted Client Hello (opens in a new tab)
• web.dev and Chrome for Developers: Early Hints (opens in a new tab), Fetch Priority (opens in a new tab), Establish network connections early (opens in a new tab)
• Let's Encrypt: Ending OCSP support (opens in a new tab), curl --write-out variables (opens in a new tab)