http 103 Early Hints: what it is and how to implement it

103 Early Hints are new HTTP status codes that help browsers decide what to preload before the page starts arriving.

After being first mentioned by Cloudflare late last year, now Google is officially announcing the availability of Early Hints in Chrome 103, with support for preloading and preconnected launches:

Twitter Early Tips

In the following lines, you’ll learn what Early Hints are and how to implement them on your website to improve performance.

But before that, we’ll quickly review how browsers work and why you need early hints in the first place.

In a nutshell: browsers, servers, and server think time

To load this page (or any other page) and read the content, your browser needs to indicate what to render and what resources (such as images, fonts, JavaScript files) to fetch to complete its rendering.

Basically, your browser sends a request to the server, the instructions to load the content come from the server’s response.

Unfortunately, there can be a delay of several hundred milliseconds before the server gathers all the resources needed to compile the entire web page and sends it back to the browser.

This period is called “server think time”.

During this server think time, the browser just sits and waits without displaying anything. And I believe we can agree that no one wants to stare at a blank screen.

This is where early hints come into play.

What are early tips?

One way to improve page performance is to use resource hints. As the name suggests, they “hint” the browser what resources it might need later – for example, to preload a specific file or connect 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 .

Although using resource hints sounds great, there is one problem. In order for the browser to act on them, the server must send at least part of the page.

Enter early hints.

Early Hints use “server think time” to asynchronously send instructions to the browser to start loading key sub-resources (e.g. stylesheets, key

The post http 103 Early Hints: What it is and how to implement it first appeared on Lenix Blog .

This article is reprinted from
This site is for inclusion only, and the copyright belongs to the original author.