Audit: Mitigate reflow / content layout shifts

(This feature request may be considered part of https://github.com/GoogleChrome/lighthouse/issues/5287, but doesn’t entail as much, as a single audit.)

The intrinsicsize attribute was proposed to allow developers to have images maintain aspect ratio, proportional to the width of the screen, without causing a user visible reflow. The attribute proposal was superseded by the new UA-defined styles (Chrome status):

img, video {
    aspect-ratio: attr(width) / attr(height);
} 

The WHATWG HTML spec is also to recommend developers to set width and height attributes (specifically for images, when lazy-loading), however most developers usually don’t seek information in the spec and so an audit would increase the likelyhood that developers gets exposed to this recommendation.

As a side note, I think it’s important that developers don’t disable scroll anchoring by setting (or inheriting) overflow-anchor: none.

Thanks for taking your time.

[Malvoz]

@pawelurbanski there’s a proposal to introduce width and height for <source> in https://github.com/whatwg/html/issues/4968. Until we (hopefully) have that; for <img> I’d personally specify the intrinsic size of the image file that is to be displayed on mobile/small devices since they generally perform slower than larger devices.

[addyosmani]

I think specifying dimensions would be useful for us to factor into either a new or existing audit. Native image lazy-loading also recommends developers specify a width and height to avoid relayout: