Today Google Chrome 103 got released with a bunch of new features. One of the notable features is the introduction of HTTP Status Code 103. This blog post will deep-dive into HTTP 103 status code with a quick demo.
From the Mozilla Developer Network Web Docs, HTTP 103 Early Hints is the information response status code is primarily intended to be used with the
Link header to allow the user agent to start preloading resources while the server is still preparing a response.
Here is the RFC link for more details.
HTTP 103 can be used to optimize the page speed by configuring HTTP header fields using link
How does it work?
Normally, when the browser sends a request, the server will receive it and process the request in less than a second and send an HTTP 200 OK response as shown below.
Using the HTTP 103 Early Hints, there is room to improve the page rendering speed.
Once the server is updated with the HTTP 103 feature, when a browser sends a request, if the server knows that the content needs resources like
script.js etc., then it will hint (respond) with the HTTP 103 Early Hints response to the browser to preload the content as shown below.
Then, once the server processed the complete response, it will send normal HTTP 200 OK to the browser.
This process will help in the page rendering speed as the browser preloads the content ahead.
This feature requires updates to the server as I mentioned above. For Apache HTTP Server, please check here to configure.
Early Hints work only with HTTP/2 and HTTP/3.
It supports only 200, 301, 304 response return codes.
Also, it works on the response link headers with preconnect or preload rel types.
To demonstrate the HTTP 103 Early Hints, I deployed an EC2 instance on AWS with Ubuntu image. I installed Apache HTTP Server with HTTP/2 and SSL.
Here is my
conf file content.
H2Push on H2EarlyHints on
Here is the curl output of the demo page:
Let us configure the
H2PushResource in the
conf file and reload the server.
H2Push on H2EarlyHints on <Location /index.html> H2PushResource /main.css </Location>
Restart the apache server using
sudo systemctl restart apache2 command.
Here is the curl output after enabling the HTTP 103 Early Hint feature.
As you see above, the first response from the server is HTTP/2 103 with the preloading
main.css to the browser and then the server will respond with HTTP 200.
Here is the server response time section.
As you learned that the HTTP 103 Early Hints help in optimizing the page rendering time by hinting at the browser to preload the resources. It also solved major issues of HTTP/2 server push as outlined here. Cloudflare is also working on making early hints smarter using machine learning. Let's keep our finger crossed.