TTFB

Definition

TTFB (Time to First Byte) is the time from request start to the first byte of the response. It includes DNS/TLS/network latency and server processing. High TTFB often worsens LCP and overall user experience.

Why it matters

• TTFB is upstream of LCP and directly slows first paint
• Slow sites reduce user retention and conversion rates
• CDN and edge caching significantly reduce TTFB for global traffic
• Search engines consider server response speed when evaluating site performance
• High TTFB reduces crawler efficiency, impacting crawl budget
• Mobile networks are slower, making TTFB impact more noticeable
• A 0.5-second advantage over competitors can win conversions

How to implement

• Use CDN to cache static HTML/assets and reduce geographic latency
• Reduce backend processing: cache query results, avoid cold starts, optimize DB queries
• Use SSG/prerender for static pages to bypass server computation entirely
• Enable HTTP/2 or HTTP/3 to reduce connection establishment time
• Use Early Hints (103) to push critical resources ahead
• Monitor TTFB: use Lighthouse, WebPageTest, or RUM for ongoing tracking
• Optimize DNS resolution: use fast DNS services (Cloudflare DNS, Google DNS)

Examples

// Browser-side TTFB measurement
const [nav] = performance.getEntriesByType('navigation');
const ttfb = nav.responseStart - nav.requestStart;
console.log(`TTFB: ${ttfb.toFixed(0)}ms`);

// Real-time monitoring with PerformanceObserver
new PerformanceObserver((list) => {
  const nav = list.getEntries()[0];
  console.log('TTFB:', nav.responseStart - nav.requestStart);
}).observe({ type: 'navigation', buffered: true });

// Cloudflare Worker sending Early Hints
export default {
  async fetch(request) {
    return new Response('Hello', {
      headers: {
        'Link': '</styles.css>; rel=preload; as=style',
        'Link': '</main.js>; rel=preload; as=script'
      }
    });
  }
};

Related