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.
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.
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.
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.