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.
HTTP 103
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 rel=preload
.
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 style.css
or 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.
Demo
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.
Final Thoughts
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.
Top comments (9)
I'm interested to see whether this will find widespread use.
Once most popular frameworks adopt it, I bet it will.
Really informative post, thank you!
So it's one HTTP request and two HTTP responses?
Is that a HTTP/2 feature?
Yes, technically the server will push two responses. 103 works only w/ HTTP/2 or HTTP/3.
Thanks. What about Nginx support?
Yes, there is a gem available for nginx :)
Neat!
Great Article