103 Early Hints: Speeding Up Your Website with Preloading
Link headers (e.g., rel=preload, rel=preconnect) before the final response body is ready. The browser can then start loading critical resources earlier, significantly improving page load time — especially for dynamic content.
How 103 Early Hints Works
When a client requests a page, the server may need time to generate the full HTML (e.g., from a database or CMS). Instead of waiting, the server immediately sends a 103 Early Hints response containing a set of Link headers. The browser processes these hints and begins preloading assets (CSS, fonts, images, etc.) while the server continues generating the main response.
Example Flow
| Step | Direction | HTTP Message |
|---|---|---|
| 1 | Client → Server | GET /article/123 HTTP/1.1 |
| 2 | Server → Client | HTTP/1.1 103 Early Hints</styles.css>; rel=preload; as=style</font.woff2>; rel=preload; as=font; type=font/woff2<https://cdn.example.com/api>; rel=preconnect |
| 3 | Browser (in parallel) | Starts downloading /styles.css and /font.woff2 |
| 4 | Server → Client | HTTP/1.1 200 OK |
| 5 | Browser | Renders page; styles are already loaded, reducing time to first paint. |
Common Use Cases
- Dynamic pages – where HTML generation takes more than 100–200 ms.
- Critical CSS/JS – preload above‑the‑fold assets.
- Fonts – avoid FOUT (Flash of Unstyled Text).
- Preconnect – establish early connections to third‑party origins (CDN, APIs).
Browser Support
Modern browsers (Chrome, Edge, Firefox, Safari) support 103 Early Hints. It works alongside <link rel="preload"> in HTML, but the 103 approach is faster because the hints are sent before the HTML itself is parsed.
Frequently Asked Questions
Is 103 Early Hints the same as Server Push?
No. Server Push (HTTP/2) forces the server to send resources without the client asking. Early Hints simply inform the client about what will be needed, and the client decides whether to preload them. Early Hints are more cache‑friendly and respect the client's preferences.
Can I use 103 with any web server?
Not all servers support it out of the box. Nginx and Apache support it via modules (e.g., ngx_http_early_hints_module). Cloudflare and some CDNs also offer it. Check your server's documentation.
Does 103 replace traditional preload tags in HTML?
No, it complements them. Early Hints are sent before HTML, giving the browser a head start. However, you should still include rel="preload" in the final HTML as a fallback for browsers that don't support 103.