FSD Frontend System Design

Part III — The Speed · Lesson 5.2

Performance Importance

In one lineLatency is a business metric — it moves conversion, retention, and reach, not just Lighthouse scores.

Where you've seen itEvery large retailer that has published A/B data on load time reaches the same conclusion — slower pages sell less, consistently.

  • Time12 min
  • DiagramLatency vs conversion curve + who your slow users are
  • Chapter5 · Performance

Diagram

diagram
CONVERSION vs LOAD TIME — the shape everyone measures

  conversion
     ▲
 100%│●
     │  ●●
     │     ●●●
     │         ●●●●
     │              ●●●●●●
     │                     ●●●●●●●●●
   0 └────┬────┬────┬────┬────┬────┬────► load time
        1s   2s   3s   4s   5s   6s

  Steepest losses happen in the first few seconds —
  where most of your optimisation budget should go.
diagram
WHO YOUR SLOW USERS ACTUALLY ARE

  your laptop         ████ 1.2s      ← what you test on
  flagship phone      ██████ 2.1s
  mid-tier Android    ████████████ 4.8s   ← the median real user
  4-year-old phone,   ████████████████████ 9.3s
  patchy 4G                                ← the ones who leave

  Median device CPU is ~4× slower than a developer machine.
diagram
THE COMPOUNDING EFFECTS

  slow page ──► fewer conversions       (direct revenue)
            ──► lower engagement        (retention)
            ──► worse ranking signal    (less traffic)
            ──► more support load       ("the site is broken")
            ──► more infra cost         (retries, abandoned sessions)

How it works

  1. Tie the metric to money before asking for time: "p75 LCP is 4.1s; every 500ms is worth roughly X% of checkout completions."
  2. Test on the device your users have. Throttle to 4× CPU slowdown and Slow 4G by default in DevTools.
  3. Watch the tail, not the mean — p75 and p95 are where churn lives (see 4.5).
  4. Treat it as a feature with a budget, not a cleanup task. Cleanup tasks lose to roadmap items every quarter.

Trade-offs

InvestmentTypical return
Image optimisation + CDNLarge LCP win, low effort
Code splitting by routeLarge TTI/INP win, medium effort
SSR/SSG migrationLarge LCP win, high effort
Micro-optimising React rendersSmall win unless you have long tasks

Diminishing returns are real: going 6s → 3s is transformative; 1.2s → 1.0s rarely shows up in any business metric. Know which side of the curve you're on before spending a sprint.

Interview angle

"How do you justify a performance sprint to a product manager?"

  • Convert the metric into their language: p75 LCP, the conversion delta measured or benchmarked, and the revenue that implies.
  • Show the device gap — most stakeholders have never seen the site on a mid-tier Android on 4G.
  • Ask for a budget in CI instead of a one-off sprint, so the win doesn't erode by the next quarter.

Recap

  • Performance is revenue, retention, and reach — argue it in those terms.
  • Your users' devices are several times slower than yours; test that way.
  • Biggest gains are at the slow end of the curve; know where you sit.