Audit: Mitigate reflow / content layout shifts

[Malvoz]

(This feature request may be considered part of #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.

[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:

[Malvoz]

@paullewis worked on pretty much the same thing in #511 (which is inactive and closed) but there's #802 by @samccone, closing this.

[paulirish]

I prefer the modern context here vs the old issue so let's dupe 511 against this. ;)

[pawelurbanski]

It would be useful to provide information how to properly apply width and height attributes. The case is important for the picture element and the img element required by picture.
There can be possible association of width and height specified at the img tag as the dimensions the browser should display the image. Making more clear what is the relation to media queries and sizes attribute would be useful.
For example:
The page has an image that is: 1500x1500 pixels. It is ment to be displayed on mobile devices of max-width: 400px for most mobiles use screens at 4 DPI.
What would be a proper markup using width and height to hint the ratio using the picture element with a source element pointing at this image with a media query.

[Malvoz]

@pawelurbanski there's a proposal to introduce width and height for <source> in whatwg/html#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.

[pawelurbanski]

Such explanation would be very useful, for example: “Specify width and height attribute on a source element.” I understand that it is enough to provide the width and height values that correspond to the image listed in the srcset attribute, which is the smallest for example, as long as it represents the aspect ratio of all the other images of different sizes. From: Robert Linder <[email protected]> Sent: czwartek, 6 lutego 2020 22:15 To: GoogleChrome/lighthouse <[email protected]> Cc: Pawel Urbanski <[email protected]>; Mention <[email protected]> Subject: Re: [GoogleChrome/lighthouse] Audit: Mitigate reflow / content layout shifts (#10085) @pawelurbanski<https://github.com/pawelurbanski> there's a proposal to introduce width and height for <source> in whatwg/html#4968<whatwg/html#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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#10085?email_source=notifications&email_token=AAWAEQE5VI3PPK3JNZRVRELRBR4VJA5CNFSM4JYVZRJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELAZZAA#issuecomment-583113856>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAWAEQDOANFRU3QWDQBDHR3RBR4VJANCNFSM4JYVZRJQ>.

[paulirish]

There are now a few audits implemented that target understanding/mitigating Layout Shifts.

---

There's also now a new webplatform feature, Font Metrics Override Descriptors, that has potential to help more. It's shipping in Chrome 87.
https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1#use-case-reduce-layout-shifting-caused-by-web-fonts