What are HTTP Client Hints?

HTTP Client Hints (client hints) are a web browser mechanism that transmits information about the capabilities and limitations of the client making a request to a web resource. These hints can include data such as browser parameters (size), screen size, number of dots per inch (DPI), and other device characteristics. They help web servers optimize content for a specific client, improving loading speed and interaction with the web page. Client hints are transmitted through relevant HTTP headers, such as Accept-CH, which allow the server to tailor the response to the needs and capabilities of the specific client.

Suppose a website has different versions of images for different screens (with varying resolutions). Using the Accept-CH header can help the server send optimized versions of images depending on the client's capabilities. The client sends a request to the server:

GET /image/example.jpg HTTP/1.1
Host: www.example.com
Accept-CH: DPR, Width, Viewport-Width

Next, the server receives the request and checks the Accept-CH header. The Accept-CH header indicates that the client supports the headers DPR (Device Pixel Ratio), Width (screen width), and Viewport-Width (width of the visible screen area). Then, the server sends an optimized response. Based on the information from the Accept-CH header, the server selects the optimal version of the image to display on the client's device. For example, if the client has a high DPR (e.g., Retina display), the server may send a high-quality image with high resolution. If the client has an older display, the server may send an image with lower resolution to save bandwidth and loading speed.

The lifetime of hints determines the period during which they (Client Hints) should remain active and available to the server. This is an important aspect of managing and optimizing data transmission between the client and server.

The lifetime of hints is defined by the Accept-CH-Lifetime header, which is transmitted along with the client hints. This header informs the server how long the hints can be considered valid and used for optimizing responses.

Properly setting the lifetime of hints allows for effective management of server and network resources, ensuring the relevance and accuracy of the transmitted data.

For example, the Accept-CH-Lifetime header may specify a value of "604800" (in seconds), which corresponds to one week. This means that client hints should remain active for this duration.

Low entropy indicates a situation where the client characteristics have limited diversity or low complexity. This can arise from various reasons, such as limited device functionality, network constraints, or poor connection quality. Low entropy hints may include values that do not change significantly or have a small range of possible options. For example, low screen resolution, limited network speed, or restricted supported content formats. When the server receives low entropy hints, it can take this information into account when optimizing the response for the client. For instance, reducing image quality for devices with low screen resolution or using less bulky content formats for devices with limited network access. Understanding low entropy hints helps servers effectively manage resources and provide optimal interaction with clients. This reduces the load on the server and ensures better performance of web applications for all users, regardless of their device characteristics and network conditions.

Low entropy hints are important for understanding the capabilities and limitations of clients and allow for effective optimization of server responses for each specific user.

An example could be the limitation of content formats supported by the client. For instance, if the client can only process basic HTML with images in JPEG format, this limits the variety of possible content formats (having low entropy in this context).

Critical client hints are a subset of Client Hints that have particular importance for optimizing the display of content on the page to improve loading speed and user experience.

These hints are defined as critical based on their impact on the page rendering process and their potential effect on loading speed. They can also include parameters such as screen width, resolution, DPI (dots per inch), scaling, and others.

Using critical client hints allows the server to deliver only the necessary content for the initial page display, reducing loading time. This is especially beneficial for devices with limited resources or network conditions with low bandwidth.

The Sec-CH-UA-* header indicates critical client hints and provides the server with information about them, allowing the server to optimize responses for each specific client. Sec-CH-UA-* (Security Critical User-Agent Header). A header that allows the client to provide the server with critical hints about device and browser characteristics. An example of using this header:

GET /example-resource HTTP/1.1
Host: tseivo.com
Sec-CH-UA: "Chromium";v="88", "Google Chrome";v="88"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Full-Version: "88.0.4324.182"

Sec-CH-UA transmits information about the browser, in this case, "Chromium" and "Google Chrome" with version "88".

Sec-CH-UA-Mobile indicates whether the browser is mobile (?0 means "no").

Sec-CH-UA-Full-Version transmits the full version of the browser.

This information allows the server to adapt content for the specific client. Another example of Critical client hints:

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Critical-CH: Sec-CH-Prefers-Reduced-Motion

Accept-CH provides the server with information about which client hints the client's browser supports. In this case, the browser indicates that it prefers reduced motion (Sec-CH-Prefers-Reduced-Motion). Vary indicates that the server's response may change depending on the value of Sec-CH-Prefers-Reduced-Motion. This allows for caching different versions of the response.

Critical-CH header indicates that Sec-CH-Prefers-Reduced-Motion is a critical hint for optimizing page display. This means that the server must take this information into account when providing a response.