TTFB Analyzer

TTFB (Time to First Byte) is the time from when the browser sends an HTTP request to when it receives the first byte of the response. It includes DNS lookup, TCP connection, TLS handshake, server processing time, and network transmission. Google's PageSpeed Insights flags TTFB over 800ms as 'needs improvement'. A high TTFB directly delays LCP because the browser can't start parsing HTML or loading subresources until the first byte arrives.

Common causes: 1) Slow server processing (database queries, ORM N+1 problems, no query caching). 2) No server-side or CDN caching — every request triggers a full page render. 3) Geographic distance — user is far from the server (fix: use a CDN). 4) Slow DNS resolution (fix: use a fast DNS provider and DNS prefetch). 5) TLS handshake overhead (fix: TLS 1.3 reduces this significantly). 6) Resource-intensive backend (heavy middleware, external API calls in the critical path).

1) Use a CDN to serve cached HTML from edge nodes near users — this is the single biggest win. 2) Cache server-rendered pages (Redis, Varnish, or CDN full-page caching). 3) Optimize database queries: add indexes, use query caching, avoid N+1. 4) Reduce server-side computation in the critical path — defer to background jobs. 5) Use HTTP/2 or HTTP/3. 6) Enable TLS 1.3 for faster handshakes. 7) Use HTTP 103 Early Hints to start loading subresources before TTFB completes.

HTTP 103 Early Hints is a status code that allows servers to send preliminary response headers (like preload Link headers) before the final 200 response is ready. While the server processes the request, the browser can start loading critical resources (fonts, CSS, hero images). This effectively reduces the perceived impact of TTFB on LCP — resources start loading in parallel with server processing. Supported by Cloudflare, Fastly, and modern browsers (Chrome 103+, Firefox 120+).

TTFB is the first byte of the HTML document. FCP (First Contentful Paint) is when the browser renders the first text or image — typically 200–800ms after TTFB. LCP (Largest Contentful Paint) is when the largest visible element finishes rendering. TTFB is a server metric; FCP and LCP are user-facing paint metrics. Reducing TTFB improves all subsequent metrics proportionally, since everything depends on the HTML arriving first. A TTFB of 200ms vs 2000ms means FCP and LCP are also 1800ms slower.