HTTP 103 Early Hints is an informational status code that allows a server to send preliminary response headers before the final response. It is mainly used to hint browsers to start loading critical resources (like CSS or fonts) early, reducing page load time.
? Key Concepts
103 is an informational HTTP status code
Sent before the final response (e.g., 200 OK)
Typically includes Link headers
Helps browsers preload important assets
? Syntax / Theory
The server sends a temporary response with status 103 and one or more Link headers. The client processes these hints but continues waiting for the final response.
? View Code Example
// HTTP/1.1 103 Early Hints with preload headers
HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </app.js>; rel=preload; as=script
? Live Output / Explanation
? What Happens?
Browser immediately starts fetching style.css and app.js
Server continues processing the main request
Final response (e.g., 200 OK) is sent later
? Interactive Flow Diagram
⚡ Visualize the Speed
0ms: Client sends GET Request
100ms: Received 103 Early Hints. Preloading assets...
1500ms: Received 200 OK. Assets are already loaded! ?
? Use Cases
Preloading critical CSS for faster first paint
Preloading fonts to avoid layout shifts
Optimizing performance for large web apps
Improving Core Web Vitals (LCP, FCP)
? Tips & Best Practices
Use only for critical resources
Ensure server and CDN support 103 responses
Always include proper as attribute in preload links
? Try It Yourself
Configure a server (Node.js / Nginx) to send 103 Early Hints