Solved

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

Shawn512
Shopify Partner
111 2 12

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 .

Shawn512_0-1695316131462.png

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%;
}

Shawn512_1-1695316201600.png

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

Shawn512_2-1695316270490.png

 

Pet Travel Supplies Small Business
Accepted Solution (1)
JohnE10
Shopify Partner
101 11 16

This is an 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.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

View solution in original post

Replies 7 (7)

Shawn512
Shopify Partner
111 2 12

@JohnE10 

sorry to tag you >.<

can you help me sir thanks a lot.

Pet Travel Supplies Small Business

Shawn512
Shopify Partner
111 2 12

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

Shawn512_0-1696870090701.png

 

Pet Travel Supplies Small Business
JohnE10
Shopify Partner
101 11 16

This is an 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.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Shawn512
Shopify Partner
111 2 12

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.

Pet Travel Supplies Small Business
JohnE10
Shopify Partner
101 11 16

You bet.

 

Cheers,

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Shawn512
Shopify Partner
111 2 12

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.

 

Shawn512_0-1696934147554.png

 

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

Pet Travel Supplies Small Business
JohnE10
Shopify Partner
101 11 16

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.

 

 

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com