What is HTTP 103?
Tags: http, chrome, webdev, performance
Published: 2022-06-22 14:00:03

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/headline {"uniqueId":"60a130ed"} -->
<h2 class="gb-headline gb-headline-60a130ed gb-headline-text">HTTP 103</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>From the Mozilla Developer Network Web Docs, HTTP 103 Early Hints is <em>the <strong>information response status code</strong> is primarily intended to be used with the&nbsp;<strong><code>Link</code>&nbsp;header</strong> to allow the user agent to start <strong>preloading resources</strong> while the <strong>server is still preparing a response</strong>.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the <a href="https://datatracker.ietf.org/doc/html/rfc8297" target="_blank" rel="noreferrer noopener">RFC link</a> for more details.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>HTTP 103 can be used to optimize the page speed by configuring HTTP header fields using link <code>rel=preload</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/headline {"uniqueId":"78f0c484"} -->
<h2 class="gb-headline gb-headline-78f0c484 gb-headline-text">How does it work?</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":9505,"sizeSlug":"full","linkDestination":"media"} -->
<figure class="wp-block-image size-full"><a href="https://qainsights.com/wp-content/uploads/2022/06/image-12.png"><img src="https://qainsights.com/wp-content/uploads/2022/06/image-12.png" alt="" class="wp-image-9505"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Using the HTTP 103 Early Hints, there is room to improve the page rendering speed. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <code>style.css</code> or <code>script.js</code> etc., then it will hint (respond) with the HTTP 103 Early Hints response to the browser to preload the content as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":9506,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2022/06/image-13.png"><img src="https://qainsights.com/wp-content/uploads/2022/06/image-13-1024x619.png" alt="" class="wp-image-9506"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Then, once the server processed the complete response, it will send normal HTTP 200 OK to the browser.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This process will help in the page rendering speed as the browser preloads the content ahead. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This feature requires updates to the server as I mentioned above. For Apache HTTP Server, please check <a href="https://httpd.apache.org/docs/2.4/howto/http2.html#earlyhints" target="_blank" rel="noreferrer noopener">here</a> to configure.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Early Hints work only with HTTP/2 and HTTP/3.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It supports only 200, 301, 304 response return codes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, it works on the response link headers with preconnect or preload rel types.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/headline {"uniqueId":"b359c4c7"} -->
<h2 class="gb-headline gb-headline-b359c4c7 gb-headline-text">Demo</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is my <code>conf</code> file content.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>H2Push on
H2EarlyHints on</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Here is the curl output of the demo page:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":9507,"sizeSlug":"full","linkDestination":"media"} -->
<figure class="wp-block-image aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2022/06/image-14.png"><img src="https://qainsights.com/wp-content/uploads/2022/06/image-14.png" alt="Normal HTTP 200 OK" class="wp-image-9507"/></a><figcaption>Normal HTTP 200 OK</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let us configure the <code>H2PushResource</code> in the <code>conf</code> file and reload the server.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>H2Push on
H2EarlyHints on
&lt;Location /index.html&gt;
    H2PushResource /main.css
&lt;/Location&gt;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Restart the apache server using <code>sudo systemctl restart apache2</code> command.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the curl output after enabling the <strong>HTTP 103 Early Hint</strong> feature.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":9508,"sizeSlug":"full","linkDestination":"media"} -->
<figure class="wp-block-image aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2022/06/image-15.png"><img src="https://qainsights.com/wp-content/uploads/2022/06/image-15.png" alt="HTTP 103 Early Hints" class="wp-image-9508"/></a><figcaption>HTTP 103 Early Hints</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you see above, the first response from the server is HTTP/2 103 with the preloading <code>main.css</code> to the browser and then the server will respond with HTTP 200.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the server response time section.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":9511,"sizeSlug":"full","linkDestination":"media"} -->
<figure class="wp-block-image aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2022/06/image-16.png"><img src="https://qainsights.com/wp-content/uploads/2022/06/image-16.png" alt="Server Response Time" class="wp-image-9511"/></a><figcaption>Server Response Time</figcaption></figure>
<!-- /wp:image -->

<!-- wp:generateblocks/headline {"uniqueId":"b445f462"} -->
<h2 class="gb-headline gb-headline-b445f462 gb-headline-text">Final Thoughts</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>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 <a href="https://blog.cloudflare.com/early-hints/#:~:text=Didn%E2%80%99t%20server%20push%20try%20to%20solve%20this%20problem%3F" target="_blank" rel="noreferrer noopener">here</a>. Cloudflare is also working on making early hints smarter using machine learning. Let's keep our finger crossed.  </p>
<!-- /wp:paragraph -->