How to Configure Strict Early Hints (HTTP 103) Link Preloading in Google Chrome

In modern web performance engineering, the “server think time”—the interval between the browser dispatching an initial document request and the backend server returning the first byte of HTML (Time to First Byte, TTFB)—often leaves the client connection completely idle. The HTTP 103 Early Hints informational status code allows web servers and edge CDNs to send preliminary HTTP response headers immediately while the main response payload is still being computed. Google Chrome parses these early Link: <...>; rel=preload headers to fetch critical render-blocking stylesheets and fonts ahead of time, dramatically improving Largest Contentful Paint (LCP).

Understanding HTTP 103 Early Hints Mechanics

Early Hints operates within HTTP/2 and HTTP/3 connection streams by splitting response headers into two distinct stages:

• Informational 103 Stage: The web server emits an initial HTTP/1.1 103 Early Hints block containing Link preload headers as soon as the request arrives. The connection remains open.
• Subresource Preloading in Chromium: Upon receiving the 103 status code, Google Chrome’s preload scanner initiates DNS lookup, TLS handshakes, and parallel downloads for critical assets before any HTML is parsed.
• Final 200 OK Stage: Once database queries and server-side rendering complete, the backend returns the definitive HTTP/1.1 200 OK response with complete response headers and HTML payload.

Configuring HTTP 103 Early Hints in Nginx and Cloudflare

Configure your edge reverse proxy or CDN to emit 103 Early Hints for critical stylesheets and fonts:

# Nginx Configuration with Early Hints module
server {
    listen 443 ssl http2;
    server_name fast.example.com;

    # Enable HTTP 103 Early Hints
    early_hints on;

    # Emit Link preload headers immediately on request receipt
    add_header Link "</css/critical.css>; rel=preload; as=style" always;
    add_header Link "</fonts/inter-latin.woff2>; rel=preload; as=font; crossorigin" always;

    location / {
        proxy_pass http://backend_app_upstream;
        proxy_set_header Host $host;
    }
}

Verifying Early Hints Processing in Chrome DevTools

To confirm that Google Chrome has leveraged Early Hints to accelerate asset loading:

1. Open Google Chrome, navigate to your target URL, and open DevTools via F12.
2. Select the Network tab, tick Disable cache, and refresh the page.
3. Click on the primary document request in the waterfall.
4. In the Headers panel, locate the Early Hints Headers section; Chrome explicitly separates headers received in the 103 response from the final 200 OK headers.
5. Inspect the Initiator column for critical.css and inter-latin.woff2; Chrome reports the initiator as push / early hints.
6. Examine the waterfall timing: asset downloads initiate simultaneously with the document’s TTFB interval rather than waiting for HTML parsing to discover <link> tags.

Best Practices and Common Implementation Pitfalls

• Preload Only Render-Blocking Assets: Restrict 103 preloads to critical CSS and primary font files. Preloading excessive non-critical images saturates client bandwidth and delays core DOM rendering.
• Include the as Attribute: Ensure every Link header specifies a valid as destination (such as as=style, as=script, or as=font) to ensure correct prioritization in Chromium’s network queue.
• CORS for Web Fonts: Font preloads must include the crossorigin attribute; omitting it causes Chrome to download the font twice due to anonymous CORS request requirements.