Early Hints are a browser feature that allows you to start loading critical page resources as early as possible. In contrast to normal resource hints this can happen even before the server starts responding with the contents of the HTML document.
Learn how this works and how you can use it to optimize your page load time.
What are Early Hints?
When a browser requests a file from a server the responds with a status code, headers, and response body. If the request went well a 200 OK status code is returned. If the server can't find the file it will return a 404 Not Found status.
But servers can actually send informational response codes prior to responding to the request directly. These status codes start with the number one: 1xx.
When a server provides Early Hints to the browser this works by returning an informational response with a 103 status code along with a Link header.
The Link header can then tell the browser about resources it should start loading, or origins that it should create a server connection to. This works the same as normal preload or preconnect browser resource hints.
103 Early Hints
Link: </Open_Sans.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
With Early Hints these resource can then start loading while the HTML is still being generated and then downloaded. By the time the browser discovers that it needs the stylesheet, image, or font the resource may already have finished loading.
Browser support for Early Hints
Early Hints have good browser support:
- Chrome supports Early Hints since version 103 (June 2022)
- Firefox supports Early Hints since version 120 (November 2023), but only supports preconnect hints
- Safari supports Early Hints since version 17 (September 2023), but only supports preconnect hints
However, since the 103 status code only provides a hint you can still use it without breaking anything, as long as your server software supports it. When preload hints aren't supported you can just include them as resource hints in the HTTP response headers.
Using a CDN to send Early Hints at the edge
Content Delivery Networks (CDNs) provide servers in many different locations to quickly server your website to visitors from across the world. These server locations close to the user are called edge nodes.
When a visitor opens your website they first connect to an edge node. If the response isn't cached then the edge node forwards the request to the server you control. This takes some time if your own infrastructure only exists in one location.
With Early Hints, content delivery networks can use this time to tell the browser to start loading other important resources, usually static content like CSS stylesheets or JavaScript code that can easily be cached at the CDN edge node.
You can use Cloudflare Workers to do this, or Cloudflare can detect resource hints in your code automatically and convert them to Early Hints.
How to check if 103 Early Hints are working
Many page speed tools don't provide data on Early Hints, and the data you get from Chrome DevTools won't be accurate.
If you run a free website speed test with DebugBear you'll be able to see the impact of your Early Hints and the relevant requests will be marked with an "Early Hint" badge.
Run A Free Page Speed Test
Test Your Website:
- No Login Required
- Automated Recommendations
- Google SEO Assessment