Best Practice about Cumulative Layout Shift

[ma00]

I see that pages are performing poorly at pagespeed score because images are missing width and height. Here the diagnostics: Image elements do not have explicit width and height Set an explicit width and height on image elements to reduce layout shifts and improve CLS

here what google suggests as a best practice: https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions

[vsalvino]

Specifying width and height on an image will destroy the ability to have responsive design/responsive images. This means that instead of scaling to the device size or the container width, the image will be a fixed size and overflow outside the size of the device or the container. The techniques described in your linked article provide a work-around this, but only if the web developer and the content editors are very careful with using images with exact aspect ratios, which unfortunately is almost never the case from what I have seen.

If you want to set the width and height of images on your project, you can override the image_block.html template in your project and forcibly set the width and height of the rendition: https://github.com/coderedcorp/coderedcms/blob/dev/coderedcms/templates/coderedcms/blocks/image_block.html

[ma00]

apologies I missed an info: I was referring to the cover_image in article_page.html template