What is Time to First Byte (TTFB)?

Time to First Byte measures how long it takes for the first byte of a response to reach the browser after a request is sent. For server-rendered or edge-rendered commerce storefronts it is the foundational latency metric: every downstream Vital, especially LCP, sits on top of it. A bad TTFB cannot be saved by clever client-side code.

Definition

TTFB includes DNS resolution, TCP and TLS handshakes, request forwarding through any CDN and reverse-proxy hops, the upstream render time at the origin or edge worker, and finally the time to flush the first byte of the HTML document. It is captured via the Navigation Timing API and surfaced in tools like the web-vitals library, Lighthouse and most RUM platforms. Google considers values under 800 ms good for navigation requests, while sub-200 ms is realistic for cached responses served from a content-delivery-network-cdn or an edge worker.

Why it matters

TTFB sets the ceiling for perceived performance. In headless storefronts running SSR on Next.js or Remix, TTFB is often dominated by upstream calls to commerce APIs, search providers and personalization services. A 600 ms cold SSR render leaves no budget to hit a 2.5 second LCP on slow mobile networks. TTFB also gates streaming SSR strategies: without an early flush of the document head, browsers cannot start preloading critical resources. Improving TTFB therefore has compounding effects on Core Web Vitals, conversion-rate-optimization-cro and search-engine-optimization-seo.

Use cases

Composable storefront teams attack TTFB by caching HTML at the edge with ISR or stale-while-revalidate, collocating render workers with the origin, and shrinking the number of blocking API calls during SSR. Storefronts on Vercel Edge, Cloudflare Workers or Netlify Edge use edge-rendered fragments to keep dynamic content fast while static shells stream first. Streaming SSR is paired with React Server Components to flush early HTML and resolve product data later. Teams monitor TTFB per route and per region, and treat regressions in the cache-layer hit rate as production incidents because they immediately propagate into LCP and bounce-rate.

Related

Explore Performance and Core Web Vitals · Composable Headless Frontend.