← Back to release summary

Viewport-height client hint

Category
Performance
Type
New or changed feature
Status
Enabled by default (Chrome 105)
Intent stage
Shipped

Summary

Currently, Responsive Image Client Hints provide a way for origins to obtain the viewport’s width. However, no such attribute exists for viewport height. We’ve observed that to optimize the loading of content that appears in viewport, it is essential for the origins to adapt HTML response based on viewport height.

Motivation

Currently, Responsive Image Client Hints provide a way for origins to obtain the viewport’s width. However, no such attribute exists for viewport height. We’ve observed that to optimize the loading of content that appears in viewport, it is essential for the origins to adapt HTML response based on viewport height as well. Current methods of doing that include content-negotiation through the User-Agent string, but that is suboptimal as it’s indirect, and doesn’t cover all platforms. We’d like to propose adding a new image hint Sec-CH-Viewport-Height (similar to the existing Sec-CH-Viewport-Width). Similar to other client hints, origins would be able to register the opt-in for viewport-height client-hint via Accept-CH header, and receive the attribute value as part of HTTP request headers. This would enable origins to e.g., inline all the content that’s expected to appear in the viewport, or avoid lazy-loading it, optimizing height-constrained images in the absence of the layout height of the image, support server-side automated art direction ensuring that the whole image is always visible above the fold on height-constrained devices.

Standards & signals

Explainers: https://github.com/WICG/responsive-image-client-hints/blob/master/Viewport-Height-Explainer.md

View on chromestatus.com