HTTP Early Hints

[00:00:00]
>> And this one is also really cool. It's more, I don't wanna experimental because it's not experimental, but it needs some work on your side. Let's say that. It's called HTTP Early Hints. This is not so simple as adding a 'link' tag. So that's what I mean. It's actually pretty cool.

[00:00:19]
Let's say it's common if you're doing server-side rendering. Let's say that case, you're doing server-side rendering. If you're doing server-side rendering, the server receives the request. And then it takes some time to execute that on the server, on the cloud, right? And then it respond with the HTML.

[00:00:37]
That's how it works. With Early hints, instead of responding with HTTP 200, the server can respond with 103. It's called early hints. And after the code, it can respond with preload declarations. So let me explain what that means. And you are the browser, you're asking me for HTML, so you contact me and you say, you want the HTML, I need to go and do a lot of stuff before, but before doing that, I will respond to you with 103.

[00:01:17]
And it says, okay, in the meantime, why don't you go and grab this CSS, this font, and that image, okay? Wait for me. Then I go, I do my stuff, and when I have my HTML over the same connection that is still waiting, now I add an HTTP 200 and the file.

[00:01:36]
So early hints can let the browser download or know about other resources around 200, 250 milliseconds earlier. Does this make sense? So what happens if the browser, so this is the diagram. So normally, at the left, you will see how that works. We have the client and we have the server.

[00:02:04]
The client ask for index.html. Then it took some time to think and then it answers with 200, okay? And then, the browser realized, you need a CSS, I need a CSS, so it requests the CSS. With early hints, I'm asked for index.html, and the server immediately, without waiting, responds with 103 and the hints.

[00:02:28]
You will need a CSS, so go and request that in the meantime. So while the server is working on the final response. In the meantime, we can take advantage of the bandwidth to download the CSS. And over the same connection, then we get the file. One of the good thing about this is that it's backward compatible.

[00:02:51]
If a browser does not support Early hints 103, it will ignore it. So when the browser Safari or a browser that is not supporting this reads 103, it says, what? I don't know, okay, let's wait. And it continues to wait. It will wait for the 200. Yeah, you won't have the early hints, but the website will work anyway.

[00:03:10]
You have a nice article on web.dev about the early hints, how to implement that, how to do that with Apache or with Nginx. And today if you're using Cloudflare or other proxy-based providers, you can enable early hints and they will do that for you. So you set up that the cloud to enable early hints.

[00:03:33]
You specify which early hints you want to send to the browser and it will do that for you So it's difficult to test this with our example, we have to make a lot of work in NodeJS. But actually what will happen is that we will move here. For example, if we set early hints the styles.css, the background.css, we can start, these two downloads can actually start here, around here.

[00:04:04]
So we can pull the diagram, right? We can pull a little bit. And remember, that also is pulling the vertical bars, our milestones, our web vitals.