HTTP Headers
Critical CH
HTTP Header
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The HTTP Critical-CH response header is used along with Accept-CH to identify the accepted client hints that are critical.
User agents receiving a response with Critical-CH must check if the indicated critical headers were sent in the original request. If not, the user agent will retry the request along with the critical headers rather than render the page. This approach ensures that client preferences set using critical client hints are always used, even if not included in the first request, or following server configuration changes.
Each header listed in the Critical-CH header should also be present in the Accept-CH and Vary headers.
Syntax
Critical-CH: <ch-list>Directives
- <ch-list>
A list of one or more comma-separated client hint headers that the server regards as essential for understanding client capabilities. These headers allow servers to make more informed decisions based on client device features, improving content delivery and performance.
Example
The client initiates an initial request to the server:
GET / HTTP/1.1
Host: example.com
The server responds, indicating via Accept-CH that it accepts Sec-CH-Prefers-Reduced-Motion. In this example, Critical-CH is also used to specify that Sec-CH-Prefers-Reduced-Motion is considered a critical client hint.
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
The client automatically retries the request (due to Critical-CH being specified earlier), informing the server via Sec-CH-Prefers-Reduced-Motion that it prefers reduced-motion animations:
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Reduced-Motion: "reduce"
The client will include this header in further requests in the current session unless the Accept-CH header changes in server responses to indicate that it no longer supports this feature.
How to Modify Header using Requestly
Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Critical CH header. This is especially useful for controlling client hints sent by the browser to the server, helping you test how your application adapts to different device or network conditions. Steps to Modify the Critical CH Header:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Critical-CH (or the exact header name your server expects).
- In the “Header Value” field, enter the desired client hints you want to include (e.g., Viewport-Width, DPR).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
- Save the rule.
Once set up, Requestly will inject the modified Critical CH header into all matching requests, allowing you to simulate specific client environment hints and ensure your server delivers the best possible experience based on those hints. You might need to modify the Critical CH header to test how your website or API reacts to different device capabilities like screen size or pixel density without needing the actual device. This helps in debugging and optimizing your application for various user environments.
Table of Contents
- No headings found.
