Introduction

Client Hints are HTTP request header fields that a server can request from a client in order to get information about the client's device, network, etc. The server can then determine the type of data to be displayed according to the client information received.

Overview

A server must tell the client that it supports client hints, this can be done using the Accept-CH header. When a client that supports client hints receives the Accept-CH header it can append client hint headers that match the advertised field-values to subsequent requests. For example: on receiving Accept-CH as a header from the server, the client would append Width headers to all subsequent requests, which sends some information about the client to the server in this format:

Accept-CH: Width

Client hints can also be specified in HTML using the <meta> tag with http-equiv attribute.

The data from the client is not sent in the initial request to the server, in the initial request the server returns Accept-CH in the headers which informs the client that it takes data, in the future request the client would append the header with the corresponding data.

Vary Header

The client hints which determine which resources are sent in responses should be included in the Vary header. This ensures that a different resource is cached for every different value of the hint header. Usually, client hints like Width and DPR are specified in the Vary header.


You may omit using Vary header if the values of the client hints change frequently, causing a lot of cache enteries, thus costing more money for maintaining the caches.


Example: You would specify Width in Vary header generally as you want the response to be cached because the width of the device does not frequently change. You would not specify the network speed in the Vary header as it changes frequently and you would not like to store multiple resources for different network speeds unless you want to burn your money spinning up multiple caches.

Analogy

Suppose you want to dine at a restaurant, so you look up the restaurant on google maps and it says that it has table reservations and you can specify the food beforehand to save you time. You like specifying the food beforehand, so you call up the restaurant and tell the staff the time you wanna dine and the food you will eat(suppose chicken soup and kebab). So when you go to the restaurant, they give you the already specified food saving you time.


In this analogy, the restaurant specifying on google maps that it accepts orders beforehand is Accept-CH in client hints as the server specifies that it would take client data. You calling up the restaurant and specifying the food beforehand is the data you send, like your operating system, device width or even browser dark or light mode. The restaurant staff keeping the food ready beforehand is related to the server returning specific data corresponding to the data it received, like it would show different colors if the client has dark mode and it would make the website responsive if the width of the client's device is shorter.


While departing from the restaurant, you say that you really like the food and would come to the restaurant again to eat the same food, the restaurant staff remembers that, when you call them up next time and book a table and specify that you need the same food, they would not need to ask you the specific food items as they remember that you ate chicken soup and kebab last time and they would serve the same, thus saving you time.


Here, you telling the staff at your first visit that you would eat the same food is the client hint in the Vary header, the staff remembering it is related to caching the response for the request.

Example

• A client hint would require to know your operating system information and then show linux download files if it is a linux operating system or windows download files if it is a windows operating system.
• A client sends the width and height of his device to the server via client hints. This helps make the website responsive, the width received by client hints is then used in media queries.
• It is used for image delivery optimization, if you want to send an image to the client, you would usually send the same image for various device widths and sizes, and then optimize them to suit the width of the client's device in the client side code, this is really inefficient as suppose you are sending a 4k image to all the devices, the image is about 10mb in size, the image would be rendered nicely on a 4k monitor, but for other devices, suppose tablets and mobiles, you would need to decrease the height and width of the image to suit it to tablets and mobiles. Using client hints, you would just send the required resolution image(suppose a 300x300 image for a mobile phone), and you would not have to send the huge 4k image to every device and then suit it to the device with client-side code. Here, client-side code is not the problem but bandwidth is, you are sending huge images to devices which do not even need them, hence lowering the performance of your website

More Info

• KeyCDN
• Google Developers blog
• Web.dev blog