103 Early Hints: What It Is and How to Implement It
Last updated on Jul 7th, 2023 | 9 min
Special Black Friday Offer 
Get NitroPack with up to 37% OFF
Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
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.
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.
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:
You must take several steps to implement Early Hints on your website successfully.
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:
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.
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.
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.
If you’re a Cloudflare user, you can enable Early Hints through your dashboard, taking the following steps:
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.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.