Frontend Labs
⋯

Part 10 — The full replay: a millisecond timeline

Two versions of the same click: cold (first visit, nothing cached) and warm (what usually happens: the page you're on already has a connection).

Assumptions: Wi-Fi + fibre, RTT to the region = 40 ms, server work = 90 ms.

Cold path

 t (ms)  Layer   Event
 ──────  ─────   ─────────────────────────────────────────────────────────────────
      0  L7      fetch() called. Browser checks DNS cache: miss
      0  L4/L3   DNS query over UDP → router → ISP resolver
                   (each packet: L3 IP → L2 Wi-Fi frame → L1 radio, then Ethernet, then light)
     25  L7      DNS answer: 198.51.100.20 (resolver had .com cached; went to authoritative)
     25  L4      TCP SYN →
     65  L4      ← SYN-ACK. ACK →. Connection ESTABLISHED          (1 RTT)
     65  L5/L6   TLS ClientHello (SNI, ALPN h2, key share) →
    105  L5/L6   ← ServerHello + cert + Finished. Keys ready       (1 RTT)
    105  L5      HTTP/2 connection preface + SETTINGS
    105  L7      POST /api/v1/orders (HEADERS + DATA frames, encrypted) →
    125          request arrives at ALB (½ RTT)
    126  L7      ALB: decrypt, parse, route, add X-Forwarded-For, pick pod
    127  L4      ALB → pod over an existing keep-alive connection (~0.5 ms in-VPC)
    128  L7      orders-service: auth (Redis 1 ms), idempotency check, payment call (60 ms),
                 INSERT into Postgres (5 ms), build response
    215  L7      201 Created → ALB → encrypt → TCP → IP → ... →
    235  L7      Browser receives response (½ RTT), decrypts, parses JSON
    240  L7      UI shows "Order confirmed"

Warm path (connection reused)

      0  L7      fetch() → reuse the existing HTTP/2 connection, new stream ID
      0  L7      POST sent immediately
     20          arrives at ALB (½ RTT)
    110          server done (90 ms)
    130  L7      response arrives. UI updates.

Where the time goes

COLD (240 ms)                                   WARM (130 ms)
DNS        ████                     25 ms
TCP        ███████                  40 ms
TLS        ███████                  40 ms
Network    ███████                  40 ms        ███████        40 ms
Server     ███████████████          90 ms        ███████████████ 90 ms
Client       █                       5 ms

What a senior engineer reads from this:

  • About 45% of the cold request is setup (DNS + TCP + TLS) before your code even runs. Connection reuse, DNS prefetching (<link rel="preconnect">), and HTTP/3 attack exactly this.
  • Network RTT appears at least once in every request, and once per sequential round trip. A page that makes 5 dependent API calls pays 5 RTTs. Batch calls, or move the work closer to users.
  • Server time is the only part you fully control in code, and inside it the payment call (another network journey) dominates.

Generated from real-life-example-osi.md · 8 Oct 2026 16:36