The hunger for serving site users with faster and quicker load times is still on, and while we have made significant positive leaps towards that goal, there is so much room for improvement left, that we constantly push newer Internet standards & best practices, as well as develop more efficient methods of communicating page resources to the browsers.
Part of this all-embracing goal is an introduction to a pilot HTTP status code that goes by the number 103, and is called Early Hints.
In fact, it feels so fresh that even MDN web docs has this in a draft mode — warning us that the page is not complete.
What Issue Is 103 Early Hints Trying To Solve For
Believe it or not, web browsers can end up spending excessive amounts of time just standing by doing nothing, because they’re awaiting instructions that tell them what to do next. And since every second or millisecond literally counts for page load performance, this idle time can immensely contribute to the negative site speed scores — and in the real world, can have a real gloomy impact on site users.
In the client-server architecture, a server response is responsible for packaging all the instructions for the browser, so when that information finally reaches the browser, all the good things like rendering, and fetching of resources such as CSS, etc., can begin.
However, even the servers need time to put together this so-called “package” for the browsers. In technical jargon, this phenomenon is often referred to as server think time. In other words, server think time can be defined as the time it takes for the server(s) to assemble all the necessary info for the browsers (in this case).
In reality, a very likely scenario is that while orders & commands for the browser are prepared in the form of a response, the actual browser on the other end is absolutely doing nothing — which, as we learned earlier, is not great for load times.
The experimental launch of 103 Early Hints precisely tries to solve the issue of the browser wait/idle times — while the servers prepare the applicable response.
How 103 Early Hints Works/Supposed To Work
What it does is that it hints at the browser; hey, I know you’re waiting for your instructions from the server to know what to do next, but don’t, because here are a few resources (such as scripts, CSS files, etc.) you can start to understand, while you wait to have a complete set of instructions.
Note that the 103 Early Hints status code is served concurrently with server think time, and therefore, it reduces the idle time of the browsers, and in return, can improve load times for the end-user.
How Can I Implement 103 Early Hints for My Site
Since this is still in its early stages, and perhaps doesn’t have widespread awareness & adoption, there might only be a few handfuls of programmatic ways to implement 103 for our site.
However, if you’re on Cloudflare, you might have access to their beta that essentially is an invitation to join 103 early hints. Cloudflare will leverage its edge networks and help serve 103 response codes. They’ve even partnered with Google Chrome and other browsers to get a broader endorsement of this initiative.
Right now, as things stand today, it seems to be a rather complicated process to serve 103 directly from origin servers, so Cloudflare, as an edge network, is well-positioned to solve this convoluted undertaking.
To get started with 103 with Cloudflare, login > go to the speed tab on top > then select the optimizations tab. On that page, you’ll see something about Early Hints under the heading of “Optimized Delivery” — if you have access to the beta.
You can read more about Cloudflare’s details on their blog — as they confidently mention that they can reduce load times by 30% with early hints.
You May Also Want to Check Out:
- A Prefatory Guide to dns-prefetch
- A Visual Guide to WordPress Menus
- How to Add Google Analytics to WordPress (Without a Plugin)
- What Is the strict-origin-when-cross-origin Referrer Policy?
- Preconnect to Required Origins: What Is rel=”preconnect”
- What Is DOM and How To “Avoid an Excessive DOM Size”
- Static and Dynamic Content: Delineating the Differences
- AA Basic Introduction to HTML5 Semantic Elements
- Basic Differences Between a CSS ID and a CSS Class
- All Other Topics and Posts
A welcomed initiative, 103 Early hints response code aims to make the web even faster. And with Cloudflare, you can quite easily test that functionality for your site if you’re allowed to get on their beta.
Expert Resources & Citations