DEV Community

Cover image for What is HTTP 103?
NaveenKumar Namachivayam ⚡
NaveenKumar Namachivayam ⚡

Posted on • Originally published at qainsights.com

What is HTTP 103?

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:

Normal HTTP 200 OK
Normal HTTP 200 OK

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.

HTTP 103 Early Hints
HTTP 103 Early Hints

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.

Server Response Time
Server Response Time

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)

Collapse
 
volker_schukai profile image
Volker Schukai

I'm interested to see whether this will find widespread use.

Collapse
 
dodov profile image
Hristiyan Dodov

Once most popular frameworks adopt it, I bet it will.

Collapse
 
ben profile image
Ben Halpern

Really informative post, thank you!

Collapse
 
jmfayard profile image
Jean-Michel 🕵🏻‍♂️ Fayard

So it's one HTTP request and two HTTP responses?
Is that a HTTP/2 feature?

Collapse
 
qainsights profile image
NaveenKumar Namachivayam ⚡ • Edited

Yes, technically the server will push two responses. 103 works only w/ HTTP/2 or HTTP/3.

Collapse
 
n3m3s7s profile image
Fabio Politi

Thanks. What about Nginx support?

Collapse
 
qainsights profile image
NaveenKumar Namachivayam ⚡

Yes, there is a gem available for nginx :)

Collapse
 
lukewestby profile image
Luke Westby

Neat!

Collapse
 
geforcesong profile image
George Guo

Great Article