HTTP Client Hints

[00:00:00]
>> HTTP Client Hints. The idea is for external resources. We are talking about resource loading. What if the server can receive data about the client to make better decisions about the resource that it's going to send you? For example, images. What if the server knows the pixel density or the resolution of the current device?

[00:00:28]
So if you're asking me for an image, I know if you are on a laptop computer, if you're on a laptop with a retina screen, so with more resolution, if you're on an iPhone, if you're on an Android, based on that, without using the picture elements, so the server will make a decision.

[00:00:48]
And for that, we can expose data to the server with a spec known as HTTP Client Hints. It's a meta tag that you can define in the header of your HTML, actually more than a meta tag, it's an HTTP header that you can also express as a meta tag, that's better.

[00:01:07]
Accept-CH, CH, client hints. And in the content, you set a comma-separated list of properties that you want, okay? Give me a second. We can ask today for RTT, Round Trip Time. So that's the latency. We can send to the server the current estimated latency that we are having, so the server can decide what to return.

[00:01:41]
Downlink, that's an estimation of the bandwidth. So again, if the latency is 400 milliseconds, something's wrong with our connection. So the server can say, well, let's return something simpler, let's increase the experience for that user. Does it make sense? This is the effective connection type, ECT, effective connection type.

[00:02:13]
It will give you a string if you are in 2g, 3g, 4g, slow-2g, and that's all. So there is no 5g or Wi-Fi. In those cases, they will give you a 4g, the best one. Save-Data, that's a boolean value that will give you the hint that the user wants to save data.

[00:02:34]
What does it mean for you? It's your problem. So you can return images in low resolution if you wanna honor that settings. Where is the settings? I will show you what it is, but on an Android, on Chrome, for example, you have a settings Save-Data in the menu.

[00:02:51]
On iOS, you need to enable that in your current connection settings in the Wi-Fi or in your data connection plan that you have with your carrier, you can enable Save-Data. DPR, that's device pixel ratio. That's the resolution, the pixel density. Viewport width, that's the actual width in CSS pixels.

[00:03:15]
And device memory, how much memory the device has. So you can request the client, the browser, to send the data to every resource HTTP request. That's an HTTP client hint. Does that make sense? If you have a lot of work server-side to do something with the information and with a hint.

[00:03:38]
But the idea is to increase the user experience. By the way, the memory is expressed in MiB, that we know that it's not men in black, okay, it's mebibytes. So now you will see that many times. By the way, so the idea that we have kilobytes and kibibytes, it's the only thing that I know that you will remember from today's course.

[00:04:06]
That's the only thing you will remember.