Boost Website Performance with 103 Early Hints - Expert Guide
One way to boost performance is by implementing HTTP 103 Early Hints, a lesser-known response status code that allows user agents to start preloading resources while the server is still preparing a response. In this post, we will explore the benefits of using 103 Early Hints and how to implement them in your website.
What are 103 early hints? #
103 Early Hints is a relatively new status code, first proposed in 2015 and formalised in the HTTP/2 specification. It is primarily intended to be used with the Link header to send preload hints to the user agent. By using these hints, the user agent can start fetching resources before the server has even finished sending the final response. This allows for faster page load times, as the resources are already available when they are needed.
Without early hints: The browser is waiting until the final response before fetching important assets.
The key advantage of 103 Early Hints is that it prioritises the loading of critical resources, such as stylesheets, fonts, and scripts. Additionally, you can establish a connection to your content delivery network early. This can significantly improve the perceived performance of your website, as users are able to interact with the page sooner. 103 Early Hints can also help to reduce the number of round trips needed to fetch subresources, which can further improve page load times.
With early hints: During the process of generating the final response, the server sends hints to the browser about critical subresources.
What is the difference between 103 early hints and server push? #
Comparing Early Hints and Server Push #
Early hints and the already deprecated server push are both technologies used to improve the performance of web pages by reducing the time it takes for a browser to receive the resources it needs to render a page. However, they work in slightly different ways.
Server Push is a mechanism that allows a server to proactively send resources to the browser without first receiving a request for those resources. This allows the browser to start loading resources before it even knows it needs them, reducing the number of round trips required to render a page. Server push is implemented by sending a "Push Promise" in the HTTP/2 response, which includes URLs of the resources the server is pushing to the browser. The downside of HTTP2/Push was that it was impossible to avoid pushing sub-resources that already existed in the browser.
Early Hints, on the other hand, is a HTTP/2 feature that allows a server to send resource hints to the browser before the HTML document is fully parsed. This allows the browser to start loading resources, such as stylesheets and scripts, as soon as possible, reducing the time it takes for the page to become interactive. Early Hints is implemented by sending a "Link" header with URLs of the resources or domains the browser should load or connect to. As the name already implies, it is a hint so the browser can decide what to do with it.HTTP/2 103 Early Hints
Link: </style.css>; rel="preload"; as="style"
Link: <https://yourcdn.com>; rel="preconnect"
example of 103 response header
Boost your website's performance using 103 Early Hints #
How to implement 103 Early Hints #
To implement 103 Early Hints, you will need to use the Link header in your HTTP responses. The Link header should include the URLs of the resources you want to preload, along with the "rel=preload" or "rel=preconnect" attribute. For example:
Link: </styles/main.css>; rel=preload; as=style
Link: <https://images.cdnserver.net>; rel=preconnect;
It's also important to note that this is still an experimental feature and browser support for 103 Early Hints is still limited, it's currently supported by Chrome and Edge.
What are the benefits of using 103 Early Hints? #
- Faster page load times: By sending resource hints to the browser before the HTML document is fully parsed, Early Hints allows the browser to start loading resources, such as stylesheets and scripts, as soon as possible. This can significantly reduce the time it takes for a page to become interactive, resulting in a better user experience.
- Reduced round trips: By hinting the browser of the resources it needs, Early Hints can reduce the number of round trips required to load a page, which can further improve load times.
- Improved resource prioritisation: Early Hints allows developers to indicate which resources are most important for the page, which can help the browser prioritise which resources to load first.
- Better network utilisation: By sending resource hints early, Early Hints can help the browser make more efficient use of the network, reducing the risk of congestion and improving overall performance.
- Easy to implement: Adding Early Hints is relatively simple and can be done by adding a "Link" header to your HTTP response, which includes URLs of the resources the browser should start loading.
Important note: Googlebot does NOT support Early Hints. #
Gary Illyes from Google shared information on LinkedIn about how Google Search processes the 103 early hints HTTP server status response. He said, "Googlebot ignores the 103 response and waits for the subsequent response."
Another person responded by asking about the potential repercussions. Gary responded, "The impact is that when we receive an unsatisfactory response (the early hint), we either recrawl the URL, which reduces the efficiency of crawling, or we remove the URL from the index."
Once the experimental label is dropped, Googlebot wil likely also support it.
Conclusion: #
HTTP 103 Early Hints is a powerful tool for boosting website performance and providing a better user experience. By allowing user agents to start preloading resources while the server is still preparing the final response, 103 Early Hints can significantly improve loading times and enable developers to optimise Core Web Vitals, such as the Largest Contentful Paint. While browser support is currently limited, it's supported by modern browsers and implementing them can greatly improve the performance of your website.
Resources and references:
