What is Early Hints ?
Early Hints is an Informational Response(1xx) Status Code. This Status Code is used to send an initial/preliminary response to the requesting browser before the server can send the final response. This technique is used to primarily send instructions to browsers to preload or preconnect resources.
Do I need Early Hints ?
Most web experiences today are quite complex and personalized. The dynamic nature of most modern websites leads to a web/application server performing multiple tasks(look up database, run security checks etc.) to produce the final HTML to serve to the requesting client. These tasks lead to what is known as "server think time" . This "server think time" is what led to the creation of Early Hints. Servers send hints/instructions to the browser while simultaneously generating/requesting(if a reverse proxy) the HTML.
What am I losing on if I do not leverage these hints ?
Well most modern experiences do not yet employ Early Hints. Since it is a recent phenomenon you would not find support for this status code in older browser versions. Chrome has been supporting Early Hints from Version 103. Follow this link for browser support details on Early - https://caniuse.com/?search=103
However if configured correctly which I will talk about in a bit, you will be taking advantage of not wasting the time it takes for the server to generate its response, known as "server think time" . Browsers rely on directives from servers to render/display resources so the more time it takes for the server to generate these responses the more time it is that these browsers would sit idle and wait. Early Hints is a technique which makes the browsers do some heavy lifting while the server is generating a response. This is in a way server telling the browser "Hey, while I am generating the final response why dont you go ahead and load a stylesheet and a javascript which are critical sub-resources to the final response you will receive in a bit".
Are these hints useful everywhere ?
Not really. If your server takes minimal time serving responses then Early Hints would not bring any additional benefits. Also they are primarily helpful on the landing/navigation pages. These entry point pages is where it adds the most value in comparison with subsequent pages as the browser may already have these critical sub-resources in its cache by the time you get to these pages.
Which metrics benefit from Early Hints ?
Typically you will see improvements with FCP, LCP, TTFB etc. These are some core metrics that can be improved upon with Early Hints. Infact Shopify with its Early Hints implementation was able to boost its LCP by over 500 ms at p50. This is Huge!
Reference - https://twitter.com/colinbendell/status/1539322190541295616
Should I be careful in not abusing this feature ?
Yes! Just because you now have a way of preconnecting or preloading resources during the browser idle time it does not mean you start overloading Early Hints with a bunch of resources because if you do you will start impacting the delivery of the final response. So we need to smartly use the "server think time" yet not overdo the Early Hints so we do not delay the actual final response/page.
Where do I employ these Hints then ?
Many modern HTTP servers are starting to support this new HTTP response code however many legacy HTTP servers may not yet have support for Early Hints. These legacy systems may still be limited to a 1:1 request response mapping. Even if your HTTP server supports Early Hints I would strongly recommend you employ this feature at a reverse-proxy/CDN. As CDNs are the first layer before requests hit our servers for most our applications and these CDN servers are generally spread across the globe, sitting at the Edge of the Internet, it is better to employ them to emit these hints while waiting for the origin/application server to generate the HTML. Thanks to their distribution and scale these CDN servers help deliver these hints in a more performant manner.
How do I ensure i deliver these hints to only those browser versions that support them ?
You can write this logic at the CDN layer which I have done myself for this site. I have set a match criteria to supported browser versions(by User-Agent) and also look for the "sec-fetch-mode: navigate" header in the request.
Ensure you will only send these hints to clients that send a "sec-fetch-mode: navigate" request header. The browsers that can send this header know they need to wait for a final response post the 103 response.
Note : Testing Early Hints is not easy currently. I use curl to test if these hints are being sent correctly. Refer the snapshot below for my site where I have implemented Early Hints.
0 Comments