FSD Frontend System Design

Part I — The Pipes · Lesson 1.2

Why Networking Matters

In one lineMost of a page load is waiting, not computing — so most of your wins live in the network.

Where you've seen itZomato on a 3G train connection. The JavaScript executes in 40ms. The user still waits four seconds.

  • Time10 min
  • DiagramLatency budget bar
  • Chapter1 · Networking

Diagram

diagram
WHERE A 4-SECOND PAGE LOAD ACTUALLY GOES  (mid-tier phone, 4G)

  0ms                                                        4000ms
  ├───────────────────────────────────────────────────────────┤
  │DNS│  TCP+TLS  │   HTML   │      JS + CSS       │ API │ paint│
  │120│    340    │   600    │        1900         │ 900 │ 140  │
  └───┴───────────┴──────────┴─────────────────────┴─────┴──────┘
   ◄──────────── network: 3860ms (96%) ─────────────────►  ◄─ CPU
                                                            140ms

  Optimising the 140ms of rendering is a rounding error.
  Optimising the 3860ms of waiting is the job.
diagram
LATENCY IS NOT BANDWIDTH

  Bandwidth ↑  (1 Mbps → 10 Mbps)   page load: 3.2s → 2.9s   (-9%)
  Latency   ↓  (200ms → 20ms)       page load: 3.2s → 1.1s   (-65%)

  Every round trip costs one RTT. Cut round trips, not just bytes.

How it works

  1. A browser can only start work it has bytes for — everything serialises behind a fetch.
  2. Each new connection costs DNS + TCP + TLS, roughly 3 round trips before byte one.
  3. Round trips multiply on slow links; bytes only add.
  4. So the levers are, in order: fewer round trips → closer origin → fewer bytes.

Trade-offs

LeverTypical winCost
CDN / edge100–300ms per requestCache invalidation complexity
HTTP/2 multiplexingRemoves per-file queueingNeeds HTTPS
Preconnect / preload1 RTT saved per originWasted if unused
Bundle size cutsLinear in bytesBuild complexity

Interview angle

"The page is slow. Where do you look first?"

  • Open the waterfall, not the profiler — confirm it's network-bound before touching code.
  • Count round trips and identify the longest dependency chain, not the biggest file.
  • Report at p75 on real devices; averages hide the users who churn.

Recap

  • Page loads are dominated by waiting, and waiting is round trips.
  • Latency hurts more than bandwidth on real networks.
  • Fix order: fewer round trips → closer bytes → fewer bytes.