103 Early Hints is the new HTTP status code that helps browsers decide what content to preload before the page has even started to arrive.
After first being mentioned by Cloudflare at the end of last year, now Google officially announced that Early Hints is available in Chrome version 103 with support for preload and preconnect to start:
In the following lines, you will learn what exactly Early Hints is and how you can implement it on your website to improve performance.
But before that, we are going through a quick review of how browsers work and why there was a need for Early Hints in the first place.
In a Nutshell: Browsers, Servers, and Server Think-Time
To load this page (or any other page) and read the content, your browser needed instructions for what to render and what resources (like images, fonts, JavaScript files) need to be fetched to complete its painting.
Basically, your browser sends a request to a server, and the instructions for what to load come from the server’s response.
Unfortunately, there could be a latency of a couple of hundred milliseconds until the server gathers all the resources needed to compile the whole webpage and send it back to the browser.
This period is known as “server think-time.”
During this server think-time, the browser just sits there and waits without displaying any content. And I believe we could agree that no one wants to stare at a blank screen.
That’s where the Early Hints come into play.
What is Early Hints?
One way to improve page performance is to use resource hints. As their name suggests, they give the browser "hints" about what resources it might need later — for instance, preloading specific files or connecting to a different server.
If you’re interested in the topic and want to learn more, check out our article on resource hints and their implementation.
As great as it might sound to use resource hints, there’s a catch. For the browser to act on them, the server must send at least part of the page.
Enter Early Hints.
Early Hints takes advantage of “server think-time” to asynchronously send instructions to the browser to begin loading critical sub-resources (like stylesheets, critical JavaScript files, etc.) or establish a connection with origins that are likely to be used on the page while the server is compiling the full response.
Without Early Hints
In simpler terms:
With Early Hints enabled, the server sends two responses: the first (HTTP 103 Early Hints status code) to instruct the browser on what it can begin loading right away, and the second (HTTP 200 status code) is the complete response with the remaining information.
With Early Hints enabled
By sending these hints to the browser before the complete response is compiled, the browser can figure out what it needs to do to load the webpage faster for the user.
The end result:
Faster page load times and reduced user-perceived latency.
If you’re looking for a more formal explanation, Cloudflare did a great job providing it:
“Formally, Early Hints is a web standard that defines a new HTTP status code (103 Early Hints) that defines new interactions between a client and server. 103s are served to clients while a 200 OK (or error) response is prepared, which is the “server think time.”
Implementing Early Hints on Your Website
You must take several steps to implement Early Hints on your website successfully.
Step 0: Consider using link rel=preload or link rel=preconnect instead of Early Hints
This is step 0 because if your server can send a 200 response immediately, adding Early Hints is useless. Instead, if you want to speed up the 200 response, even more, you can utilize the link rel=preload or link rel=preconnect resource hints.
The easiest way to determine how fast your server sends the 200 response is to use KeyCDN’s performance testing tool. All you have to do is insert your site’s URL and get the data:
Step 1: Identify your top pages
In case step 0 isn’t valid for you and your server needs time to generate the response, you have all the prerequisites to proceed with integrating the Early Hints.
The first step is to identify your top landing pages, or in other words, the page where your users start their journey on your site. These entry points are more important than any other pages because Early Hints’ effectiveness decreases as your visitors navigate through your websites.
That’s because modern browsers are pretty good at guessing which page the user will visit next, and they likely have all the sub-resources they need on the second or third subsequent navigation.
Step 2: Identify the critical origins and sub-resources that contribute the most to the key performance metrics
Having identified your top landing pages, you should move on to identifying which origins and sub-resources are good candidates for preconnect or preload hints. These would be origins and resources that massively contribute to the key metrics like Largest Contentful Paint and First Contentful Paint.
More specifically, you’d want to look for render-blocking sub-resources such as synchronous JavaScript, stylesheets, or even web fonts.
You can identify them by running your website through a testing tool such as WebPageTest and checking the waterfall chart. All render-blocking resources would have an “X” in front of them:
The easiest way to identify sub-resources suitable for Early Hints is if your main resources are already using link rel=preconnect or link rel=preload. These are the perfect candidates.
Important: You don’t want to use Early Hints or any other resource hints on resources that might be obsolete or no longer used by the main resource. In general, aim for resources and origins that are fairly stable and largely independent of the outcome for the main resource. Learn more here.
And that’s how you can manually add Early Hints to your website.
But what if you don’t have the technical skills to do it yourself?
Well, there is an easier way.
Enabling Early Hints Using Your Cloudflare Account
If you’re a Cloudflare user, you can enable Early Hints through your dashboard, taking the following steps:
- Log in to your Cloudflare dashboard and select your domain.
- From the dashboard, click Speed > Optimization.
- Under Optimized Delivery, enable Early Hints.
As you may know, NitroPack’s built-in CDN is also provided by Cloudflare. This transition opened the door for us to start working on a new HTML edge caching feature, which, when released, will allow us to provide all our clients with the possibility to enable Early Hints without having a Cloudflare account.
We’re deep into the development process and working hard on releasing the HTML edge caching as soon as possible. So make sure to subscribe to our newsletter and follow our blog to be the first to know when we announce it.
