The Cost of Server Think Time
In a typical web request, the browser sends a GET request and then waits. During this period, known as \"server think time,\" the server might be querying a database, fetching data from an API, or rendering a complex template. While the server is busy, the browser's connection remains idle, wasting valuable milliseconds that could be used to download critical assets like CSS, fonts, or JavaScript.
What are HTTP 103 Early Hints?
HTTP 103 Early Hints is an informational status code that allows a server to send headers to the browser before the final response is ready. By sending a 103 response containing Link headers with rel=preload or rel=preconnect, you inform the browser about required resources while the server is still processing the main HTML. This effectively parallelizes the server's backend work with the browser's resource discovery.
Previously, developers tried to solve this with HTTP/2 Server Push, but it was complex to implement and often resulted in bandwidth waste. Early Hints is the cleaner, more efficient successor.
How to Implement Early Hints in Node.js
Modern environments like Cloudflare and various Nginx modules support Early Hints, but you can also handle this at the application level. In a Node.js environment using the http or http2 module, you can manually write the 103 response to the socket.
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/') {
// 1. Send Early Hints immediately
res.writeContinue(); // This is for 100-continue, for 103 we use raw socket
res.socket.write(
'HTTP/1.1 103 Early Hints\r\n' +
'Link: </style.css>; rel=preload; as=style\r\n' +
'Link: </script.js>; rel=preload; as=script\r\n\r\n'
);
// 2. Simulate heavy database work (500ms)
setTimeout(() => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<html><head><link rel="stylesheet" href="/style.css"></head><body>Hello World</body></html>');
}, 500);
}
}).listen(3000);
The Impact on Core Web Vitals
Implementing Early Hints primarily targets Largest Contentful Paint (LCP) and First Contentful Paint (FCP). By the time the browser receives the first byte of your HTML, it might have already finished downloading the CSS and fonts required to render the page. In high-latency scenarios, this can shave off hundreds of milliseconds from the critical rendering path.
To verify implementation, use Chrome DevTools under the Network tab. You will see the initial 103 response followed by the 200 OK. Browsers that do not support 103 will simply ignore the informational response, making it a perfect candidate for progressive enhancement.
Summary
Optimization isn't just about making code run faster; it's about making better use of the idle time in a request lifecycle. HTTP 103 Early Hints is a low-risk, high-reward strategy for any full-stack developer looking to squeeze extra performance out of modern web applications.
