Adressing CLS (Google page speed)

Question

So im trying to address CLS on my webshop: www.jupiter.dk

It's a template with bootstrap, and responsive layout.

CLS requires me to have a set hight and width on all images. But if i do that, they are no longer responsive?

Answer 1

They don't need to be fixed values. For example, in CSS, you can say the width is 50% and provide an aspect-ratio to let the browser work out the height.

If your width matches how your responsive image does widths and the aspect ratio is correct, you will allocate the right space for the image and have no CLS.