Where LCP time goes

React chapter 143 · Web Perf · ch.2–3 · TTFB, FCP, LCP, latency, CDN, cache · source: Nadia Makarevich, Web Performance Fundamentals, Chapters 2–3 (initial load metrics, network conditions, CDN, repeat visits)

The problem

The team spends a sprint making React render twice as fast and LCP barely moves. The server is in Norway, the users are in Australia: most of the 1.2 s is the server thinking and packets crossing the planet, not your components.

The pattern that fixes it

Draw the whole load waterfall first, then fix the biggest bar. High latency → CDN. Slow HTML → fix the server. Big JS on slow bandwidth → split the bundle. Only when JS + React is the biggest slice is React the thing to optimize.

In plain words

Before a page shows its main content, the browser waits for the server, downloads files, then runs JavaScript. LCP (Largest Contentful Paint) is the moment the biggest text or image appears. Speeding up the part that was 3% of the wait cannot make the page feel faster.

A pizza takes 60 minutes: 40 in traffic, 15 in the oven, 5 boxing it. Training the boxer to be twice as fast saves 2½ minutes. Opening a shop closer to the customer (a CDN) saves 30.

Terms

TTFB
Time To First Byte: from request to the first byte of HTML. Network latency + server think time.
latency (RTT)
How long one round trip takes, no matter how small the file. Distance, not bandwidth.
render-blocking
CSS in <head> and sync scripts. Nothing paints until they arrive. type="module" scripts are deferred.
LCP
Largest Contentful Paint. Good ≤ 2.5 s, poor > 4 s (at the 75th percentile of real users).

Going deeper

Why CSR makes LCP wait for JavaScript

A client-rendered app sends <div id="root"></div>. The browser can paint after CSS arrives, but there is nothing to paint until the JS downloads, evaluates and React renders. So in CSR, LCP ≈ TTFB + JS download + JS eval + render. Chapter 103 shows how SSR moves LCP earlier and what it costs.

Latency beats bandwidth

At 1 Gbps with 300 ms RTT the page is slower than at 10 Mbps with 40 ms RTT. Every request pays the round trip at least once (more with TLS and redirects). That is why a CDN — edge servers close to users — is step zero, before code splitting or Server Components.

Lab numbers vs field numbers

DevTools on your laptop is lab data: one device, one network. Google ranks with CrUX — real Chrome users, 75th percentile, 28-day window. Start with CrUX or RUM to find which pages are slow for real users, then reproduce locally with throttling (Performance panel → Network + CPU).

Repeat visits

Hashed file names (index-a1b2.js) + Cache-Control: max-age=31536000, immutable let returning users skip downloads entirely. Change one line and the hash changes, so the whole chunk is downloaded again — the reason splitting vendor code into its own chunk helps repeat visits (chapter 146).

Keep learning

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.