Early Hints (103) — Faster Page Loads with Cloudflare

In this tutorial, you'll learn about Early Hints (103). We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Cloudflare Early Hints sends a 103 Early Hints response to browsers before the full HTTP response, allowing the browser to preload CSS, fonts, and images while the origin server generates the page.

What You'll Learn

By the end of this tutorial, you will understand how the 103 Early Hints status code works, how Cloudflare implements it, and how to measure the improvement in Largest Contentful Paint and Time to First Byte.

Why It Matters

Server response time is a direct component of Core Web Vitals. Early Hints lets the browser begin fetching critical subresources before the server finishes assembling the HTML, shaving hundreds of milliseconds off perceived load time.

Real-World Use

Pages served through Cloudflare that use Early Hints see LCP improvements of 10-30%. For an e-commerce site generating millions of page views, this translates directly to higher conversion rates.

Your Learning Path

flowchart LR
  A[Brotli Compression] --> B[Early Hints]
  B --> C[Rocket Loader]
  C --> D[Prefetch & Preload]
  D --> E[Signed Exchanges]
  B --> F{You Are Here}
  style F fill:#f90,color:#fff

How Early Hints Works

When a browser requests a page, Cloudflare intercepts the request and immediately sends a 103 Early Hints response containing Link headers for critical assets. The browser begins fetching these assets while the origin builds the HTML. When the final 200 response arrives, the preloaded assets are already in the browser cache.

Standard Flow vs Early Hints Flow

sequenceDiagram
  participant B as Browser
  participant CF as Cloudflare Edge
  participant O as Origin Server

  rect rgb(200, 220, 240)
    Note over B,O: Without Early Hints
    B->>CF: GET /page
    CF->>O: Forward request
    O-->>CF: Generate HTML (slow)
    CF-->>B: 200 OK + HTML
    B->>B: Parse HTML
    B->>CF: GET /style.css
    B->>CF: GET /font.woff2
  end

  rect rgb(220, 240, 200)
    Note over B,O: With Early Hints (103)
    B->>CF: GET /page
    CF->>O: Forward request
    CF-->>B: 103 Early Hints + Link hints
    B->>CF: GET /style.css (preload starts)
    B->>CF: GET /font.woff2 (preload starts)
    O-->>CF: Generate HTML (slow)
    CF-->>B: 200 OK + HTML
    Note over B: CSS and font already cached
  end

Enabling Early Hints

1. Log in to the Cloudflare dashboard.
2. Select your domain.
3. Go to Speed > Optimization.
4. Find the Early Hints card and toggle it on.
5. Configure your origin server to emit Link headers for hints Cloudflare should relay.

# Origin server should set Link headers for priority assets
Link: </style.css>; rel=preload; as=style
Link: </font.woff2>; rel=preload; as=font; crossorigin
Link: </hero.webp>; rel=preload; as=image

Verifying Early Hints Are Working

# Use curl with Early Hints support to inspect the response
curl -v --early-response https://yourdomain.com/page 2>&1 | head -20

# Expected output includes a 103 response before the 200
# < HTTP/2 103
# < link: </style.css>; rel=preload; as=style
# < link: </app.js>; rel=preload; as=script
# < HTTP/2 200
# < content-type: text/html

Server Configuration Examples

Nginx

location / {
  add_header Link "</style.css>; rel=preload; as=style, </app.js>; rel=preload; as=script";
}

Apache

Header set Link "</style.css>; rel=preload; as=style, </app.js>; rel=preload; as=script"

Common Errors

No 103 response visible. Not all curl versions support the 103 output. Use Cloudflare's Analytics dashboard under Speed > Early Hints to confirm hints are being sent.

Early Hints not working for logged-in users. Cloudflare only applies Early Hints to cacheable responses. If the page is marked Cache-Control: private, hints are suppressed.

Too many Link headers. Sending more than 10 Link headers dilutes the benefit. Prioritize the top 3-5 render-blocking resources such as above-the-fold CSS and hero images.

Hints for uncached assets. Preloading a URL that redirects or returns 404 wastes the early connection. Only hint for assets that resolve quickly.

Cross-origin preloads blocked. Fonts and other cross-origin resources need the crossorigin attribute in the Link header. Omitting it causes the preload to fail silently.

Practice Questions

1. What HTTP status code does Early Hints use and what is its purpose?
2. Why should you limit the number of Link headers in an Early Hints response?
3. How does Early Hints improve Largest Contentful Paint specifically?

Challenge

Set up a test page with a hero image, custom font, and large CSS file. Enable Early Hints and configure the appropriate Link headers. Measure LCP before and after using Lighthouse.

Real-World Task

Identify the three most render-blocking resources on your production website. Add Link headers for these assets and verify through Cloudflare Analytics that hints are being delivered.

FAQ

Related Tutorials

• Rocket Loader — Async JavaScript loading complements Early Hints
• Prefetch & Preload — Predictive resource loading strategies
• HTTP/2 & HTTP/3 — Multiplexing hints across connections

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.