🌟 We are Open Source! Check out our repository on GitHub
Back to Blog
What Is HTTP 103 Early Hints? Speed Up Your Website Before It Even Loads
Uncategorized
4 min read

What Is HTTP 103 Early Hints? Speed Up Your Website Before It Even Loads

Website speed is one of the most important factors for user experience, SEO, and Core Web Vitals.

Most performance optimizations focus on making your code smaller or improving server response times. But what if your browser could start downloading important resources before your server even finished generating the page?

That is exactly what HTTP 103 Early Hints does.

What Is HTTP 103 Early Hints?

HTTP 103 Early Hints is an informational response that a server sends before the final response.

Instead of waiting for the complete HTML document, the server can immediately tell the browser:

  • “Start downloading this CSS file”
  • “Connect to this CDN”
  • “Preload this important image”
  • “Fetch these fonts”

The browser can begin loading these resources while your backend continues working.

Early Hints uses the same resource hints you normally add inside your HTML <head>:

<link rel="preload" href="/style.css" as="style">
<link rel="preconnect" href="https://cdn.example.com">

The difference is that these hints arrive much earlier.

How Traditional Loading Works

Without Early Hints, the browser usually has to wait for the HTML response before discovering important assets.

Example:

❌ Without Early Hints
The browser can't discover preload links until
the server finishes rendering the HTML.
GET /
...backend rendering...
...database queries...
200 OK
Content-Type: text/html
<!DOCTYPE html>
<link rel="preload"
      href="/style.css"
      as="style">
<link rel="preload"
      href="/hero.webp"
      as="image">
👉 Only now does the browser start
downloading style.css and hero.webp.

The problem is that your server might spend several hundred milliseconds generating HTML, running database queries, or calling APIs.

During that time, the browser is waiting.

How HTTP 103 Early Hints Changes This

With Early Hints, your server can send resource information immediately.

The browser does not need to wait for the final HTML response.

✅ With HTTP 103 Early Hints
GET /
103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </hero.webp>; rel=preload; as=image
Link: <https://cdn.example.com>;
      rel=preconnect
👉 The browser immediately starts
downloading these resources.
...server continues rendering...
...database queries...
200 OK
Content-Type: text/html
<!DOCTYPE html>
<link rel="preload"
      href="/style.css"
      as="style">
<link rel="preload"
      href="/hero.webp"
      as="image">
✅ CSS and hero image may already
be downloading or cached.

The browser is now doing useful work while your backend is still processing the request.

Why Early Hints Improves Performance

Early Hints can improve:

Faster Largest Contentful Paint (LCP)

The largest element on your page is often:

  • Hero images
  • Main headings
  • Large banners
  • Important content blocks

By starting these downloads earlier, the browser can display important content faster.

Faster CSS Loading

Critical CSS can start downloading before the HTML is fully generated.

This reduces the time users see an unstyled page.

Faster Font Loading

Custom fonts are often a hidden performance bottleneck.

Using Early Hints with font preloads can reduce delays caused by waiting for font discovery.

How To Enable HTTP 103 Early Hints

Cloudflare

If your website uses Cloudflare, enabling Early Hints is simple.

Cloudflare can automatically convert your existing Link headers into HTTP 103 Early Hints responses.

You can enable it from:

Cloudflare Dashboard → Speed → Optimization → Early Hints

No major code changes are required.

NGINX

Modern NGINX versions support Early Hints using the early_hints directive.

Example:

location / {
    early_hints $http2;
}

Your server should support:

  • HTTP/2 or HTTP/3
  • Proper Link headers
  • Browser support

Browser Support

Early Hints support is improving, but not every browser handles every hint the same way.

Current behavior:

✅ Chrome supports Early Hints
✅ Edge supports Early Hints
✅ Firefox supports Early Hints
⚠️ Safari has more limited support, especially for preload behavior

Because of this, keep your existing HTML preload tags.

Early Hints should be treated as a performance enhancement, not a replacement.

Example: Sending Early Hints Headers

A server can send:

HTTP/1.1 103 Early Hints
Link: </assets/app.css>; rel=preload; as=style
Link: </images/hero.webp>; rel=preload; as=image
Link: <https://fonts.googleapis.com>; rel=preconnect

Then later:

HTTP/1.1 200 OK
Content-Type: text/html

The browser receives the instructions before the actual page arrives.

Is HTTP 103 Early Hints Worth Using?

Early Hints is especially useful for websites where:

  • Server-side rendering takes time
  • Pages depend on database queries
  • APIs slow down HTML generation
  • Important assets are large
  • You care about Core Web Vitals

For static websites with instant responses, the improvement may be smaller.

Final Thoughts

HTTP 103 Early Hints is a simple but powerful performance optimization.

Instead of making the browser wait for your entire HTML response, you can tell it what resources matter immediately.

By allowing browsers to download critical files while your server is still working, you can reduce loading delays and improve the user experience.

If you already use preload and preconnect, Early Hints is the next step toward building faster websites.