Optimizing Time-to-First-Byte with HTTP 103 Early Hints

Introduction to the Server Processing Bottleneck

In the quest for search engine visibility and seamless user experiences, optimizing Time-to-First-Byte (TTFB) is paramount. TTFB represents the duration between the client making an HTTP request and receiving the first byte of the page response from the server.

In modern dynamic web applications, this metric is frequently a bottleneck. When a browser requests a page, the server must query databases, call external API endpoints, compile templates, or execute Server-Side Rendering (SSR) loops before it can begin transmitting the HTML document.

While the server is busy crunching data, the client browser sits idle, waiting. Only after the HTML is received can the browser parser discover critical sub-resources—such as main CSS sheets, font files, and primary JavaScript bundles—and start downloading them. This sequential processing creates a classic network waterfall bottleneck that delays the First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

How HTTP 103 Early Hints Resolves the Waterfall

HTTP 103 Early Hints is an informational status code that allows a server to send a preliminary response containing headers before the actual content response is ready. By serving a 103 response immediately upon receiving a request, the edge node instructs the browser to begin preloading critical resources (via preloading and preconnect links) while the server is still computing the main HTML document.

This parallelizes the network load: the browser downloads CSS and JavaScript bundles simultaneously while the backend finishes generating the HTML. Once the HTML is finally returned under a standard 200 OK status, the browser has already cached or is actively downloading the critical rendering assets, allowing it to paint the layout instantly.

Architectural Flows and Network Timelines

Implementing Early Hints at the network edge changes the request-response lifecycle from a single-round-trip model to a multi-stage streaming stream:

• Immediate 103 Response: The edge worker immediately returns an HTTP 103 containing Link: </main.css>; rel=preload; as=style headers.
• Parallel Execution: The browser parses these links and begins fetching assets, while the edge worker simultaneously forwards the request to the origin server or initiates database queries.
• Final 200 OK Delivery: The server finishes generating the HTML, and the edge worker streams it down as a standard HTTP 200 response, terminating the connection.

Technical Implementation: Edge Worker HTTP 103 Injection

The following JavaScript code displays how an edge worker intercepts a client request, detects client HTTP protocol capability, issues a 103 Early Hints response with preloads, and then proceeds to perform an asynchronous fetch to fetch page data:

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Identify critical assets necessary for the initial paint
    const criticalPreloads = [
      '</assets/theme.css>; rel=preload; as=style',
      '</assets/app.js>; rel=preload; as=script; crossorigin',
      '</fonts/inter-var.woff2>; rel=preload; as=font; type=font/woff2; crossorigin'
    ];

    // Check if the connection supports HTTP/2 or HTTP/3 where Early Hints are active
    const cfProtocol = request.cf?.httpProtocol || '';
    const supportsEarlyHints = cfProtocol.includes('HTTP/2') || cfProtocol.includes('HTTP/3');

    // Create and stream the 103 Early Hints informational response
    if (supportsEarlyHints) {
      const earlyHintsHeaders = new Headers();
      criticalPreloads.forEach(link => earlyHintsHeaders.append('Link', link));
      
      const earlyResponse = new Response(null, {
        status: 103,
        headers: earlyHintsHeaders
      });

      // Send the early hints response down the pipeline immediately
      ctx.waitUntil(Promise.resolve(earlyResponse));
    }

    // Perform the heavy origin API call or database fetch to construct the HTML page
    const dbResponse = await fetch(`https://api.internal/v1/pages?path=${encodeURIComponent(url.pathname)}`, {
      headers: { 'Authorization': `Bearer ${env.API_KEY}` }
    });
    
    const pageData = await dbResponse.json();
    const renderedHtml = `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/assets/theme.css">
        <script src="/assets/app.js" defer crossorigin></script>
        <title>${pageData.title}</title>
      </head>
      <body>
        <main>
          <h1>${pageData.heading}</h1>
          <div>${pageData.content}</div>
        </main>
      </body>
      </html>
    `;

    // Return the final HTML response with duplicate link headers for non-supporting browsers
    const finalHeaders = new Headers({
      'Content-Type': 'text/html; charset=utf-8'
    });
    criticalPreloads.forEach(link => finalHeaders.append('Link', link));

    return new Response(renderedHtml, {
      status: 200,
      headers: finalHeaders
    });
  }
};

Preemptive Performance: 103 Early Hints with Bramsley

Configuring and maintaining HTTP 103 link headers across complex dynamic routes can be a maintenance burden. Bramsley Digital Studio eliminates this complexity by deploying automated, zero-latency HTTP 103 Early Hints injection directly at the nearest network edge routing layer. By resolving bottlenecks before requests reach your backend, Bramsley helps enterprise teams achieve record-breaking TTFB and LCP.