Header
Early-Hints
Learn how 103 Early Hints allows servers to send preload hints while preparing the main response. Improve page load performance with early resource loading.
TL;DR: Sends resource preload hints with 103 status before the main response is ready. Allows browsers to start fetching CSS, fonts, and scripts while the server prepares the HTML.
What is Early-Hints?
Early Hints is primarily a 103 interim response workflow, not a standalone standardized header name. In practice, servers send Link preload headers in a 103 Early Hints response before the final response.
This can reduce time-to-first-render by overlapping backend work with browser resource fetching.
Example
HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </script.js>; rel=preload; as=script
HTTP/1.1 200 OK
Content-Type: text/html
...
```text
## What to Send in 103
Focus on critical assets that are very likely to be needed:
- main CSS
- critical font files
- app bootstrap script
Keep hints stable and avoid preloading speculative assets.
## Implementation Notes
- Use `Link: ...; rel=preload; as=...`
- Send identical preload hints later in the final response/HTML when possible
- Validate with browser DevTools because some intermediaries or clients may ignore/drop 103
## Implementation
```javascript
res.writeEarlyHints({
link: '<https://example.com/style.css>; rel=preload; as=style'
})Common Mistakes
- Treating
Early-Hintsas a regular response header instead of a 103 phase - Preloading too many assets (can waste bandwidth and hurt priority)
- Sending hints for resources that are often unused
Related Headers
Early Hints vs HTTP/2 Server Push
Early Hints (103) replaced HTTP/2 Server Push as the recommended mechanism for preloading resources. Server Push was deprecated in Chrome 106 and removed from most browsers because it had fundamental problems: the server had no way to know what the client already had cached, so it often pushed resources the browser already had, wasting bandwidth. It also required HTTP/2 and was complex to implement correctly.
Early Hints solves these problems by sending Link preload headers before the final response, letting the browser decide whether to fetch the hinted resources. The browser checks its cache first and only fetches resources it does not already have. This makes Early Hints bandwidth-efficient and cache-aware by design.
CDN support is the key enabler for Early Hints. Cloudflare, Fastly, and Akamai can generate Early Hints automatically from the Link headers in your HTML <head>, without any changes to your origin server. The CDN intercepts the request, sends the 103 response immediately from the edge, and then forwards the request to your origin. By the time your origin responds, the browser has already started fetching the critical CSS and fonts.
The performance benefit is most significant for pages with slow server-side rendering. If your server takes 200ms to generate HTML, Early Hints lets the browser use that 200ms to fetch CSS and fonts in parallel. For pages that are already fast (under 50ms), the benefit is smaller but still measurable, particularly on mobile networks where connection setup overhead is higher.
Frequently Asked Questions
What are Early Hints?
Early Hints (103 status) let servers send Link headers before the final response, allowing browsers to preload resources while the server prepares the main response.
How do Early Hints improve performance?
Browsers can start fetching CSS, fonts, and scripts while waiting for HTML. This parallelizes resource loading with server processing time.
Which browsers support Early Hints?
Chrome 103+, Edge 103+, and Firefox 102+ support Early Hints. Safari support is limited. Check browser compatibility for your audience.
How do I implement Early Hints?
Configure your server or CDN to send 103 responses with Link headers. Many CDNs like Cloudflare can generate Early Hints automatically from your HTML.