How to Set an explicit width and height on image elements for collapsible row's Page content picture

[Shawn512]

My site: julibees.com

My issue:

1, In product page,  I use collapsible row, the content is from Page, and I upload a picture to the page .

2, To set an explicit width and height on image elements to reduce layout shifts and improve CLS, I add CSS code to the  SIZE GUIDE page:

img {
height: auto;
width: 100%;
}

3, but it doent work, Google PageSpeed still shows the problem happening, any idea?

[Shawn512]

@JohnE10 

sorry to tag you >.<

can you help me sir thanks a lot.

[Shawn512]

I also tried to add the CSS code like this, but still not working

[JohnE10 · Accepted solution]

Hi,

The height in the code below was an issue, because the browser doesn't know what height to make the image until it downloads some HTML and does some calculations, which ends up causing some Cumulative Layout Shift (CLS).

img {
 height: auto;
 width: 100%;
}

The best way to go is with the following code that you tried where the width and height had explicit values of 450px and 450px. As much as you can, you should always do that with your images. Shopify will resize the image in order to optimize it based on the width and height (or aspect ratio) that you enter.

I ran a PageSpeed Insights test on your site, and it currently does not refer to the width and height of any image as being an issue. The report shows, toward the bottom of the page, that it was an issue in past audits, but not anymore.

There are, however, some other issues that need to be addressed. It looks like there’s a number of apps in the store (either that or apps that were uninstalled, but residual JS code is still lingering around, and should be removed), some of these apps, if not most, might be deferrable, in which case they should be. This will help your site speed tremendously.

Also, your banner image is being lazily loaded, it shouldn’t be, only images below the fold should be lazily loaded.

Hope that helps.

[Shawn512]

Thank you so much.

This is really helpful for me. I am currently working on speed optimization, and I am working hard to solve one problem after another. really appreciate it. I need to read your reply carefully.

[JohnE10]

You bet.

Cheers,

[Shawn512]

Hey,

Sorry to ask you again, but I can still see the CLS problem of my Size Chart picture from Pagespeed Insigt. Dont know why, it looks like the code desnt work for Collapsible row & Page.

https://pagespeed.web.dev/analysis/https-julibees-com-products-large-car-dog-seat/sh33qtczf9?form_fa...

[JohnE10]

Try this: remove the "img" CSS rule (the one shown in the picture above: img {height: 450px; width: 450px; }) altogether and run another PageSpeed test, that maybe what's causing the error. I didn't get that error when I ran a test for the home page, so that could have to do with it.