Addressing CLS Issues in Frictionless page due to images without explicit width and height

[joaquinrivero]

Frictionless pages are experiencing increased Cumulative Layout Shift (CLS) on Desktop, identified by Lighthouse audits as stemming from images without set width and height.

One solution is adding for each image dimensions in each block. This change, however, would require content authors to manually set dimensions for every image in our US and ROW documents.

I've been hardcoding image dimensions, which improves the CLS issue (verified on this test page and PageSpeed results), but isn't ideal for long-term use.

There's any existing solutions within Milo that could address this efficiently? The goal is to reduce manual input, maintain content management ease, and adhere to web performance best practices.

Any advice or suggestions on this matter would be greatly appreciated. Looking forward to hear your thoughts!

[overmyheadandbody]

Is there an opportunity to standardize the image sizes? As in: instruct content producers to use just one format/size. Or a few of them if needed. Then, maybe you could use some modifiers to instruct the block on which image format will be used. Manual input would be easier and human-readable, content would be consistent across experiences and performance would be maintained.

We want to stay away from asking authors to use "programmer" syntax, including sizes, they should be able to simply use human language, so the current approach should not be considered for a long-term solution.

[rgclayton]

Doing a quick look, this look like it's related to SVG's only. Does that sound correct @joaquinrivero?

Jpg, png, images are delivered from Franklin with size properties on the <img>.

[joaquinrivero]

Yes, SVG's are the ones that has missing size properties and alt tag

[rgclayton]

Authors can already add alt text to SVGs.

Adding the image size should probably be handled in Milo when the SVG link is being decorated.

[joaquinrivero]

I’ve checked the SVG images and noticed they already have their width and height details included in the files. To access to it, we might consider fetching the images or embedding them directly, but this potentially could slow down our pages and affect performance. 🥲