Image elements do not have explicit width and height (Page Speed Help)

[KrisG2]

Hi there,

I'm looking for some help.

I'm trying to sharpen up my page speed and Cumulative Layout Shift seems to be having an impact.

Google Page Insights is saying I need to set an explicit width and height on image elements to reduce layout shifts and improve CLS. How do I do this? Is there a universal way for me to add code and specify the sizes for images, i.e product images, header image, header logo, etc?

If there are any other tips to increase my page speed I'd be greatly appreciative!

Link to store: https://thebespokesignhouse.com/

Link to my Page Speed Analytics: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fthebespokesignhouse.com%2F...

Many thanks!

Kris

[oreoorbitz · Accepted solution]

So there are some themes that have a image snippet that is used everywhere, there are themes where there aren't and you have to go through each image in the code and add fixed dimensions.

So if an image is like

<img src={{ img | img_url: '500x' }}" alt="{{img.alt}}" >

You'd change it to

<img src={{ img | img_url: '500x' }}" alt="{{img.alt}}"  height="{{img.height}}" width="{{img.width}}">

You might also have to make sure those images have a style attribute of 

height: auto;

since adding fixed dimensions can make  stretch out on safari., becuase safari is silly.

[KrisG2]

Thank you for the reply @oreoorbitz I really appreciate it!

[Bernhardt]

Hi @KrisG2 ,  do you mind sharing how you implanted this code on one of your pages?  Im trying to do the same thing but with little luck.

[Brett21]

where do we add this code for venture theme. I have the same problem and not sure if it is causing an issue with my site but it's still showing up on speed test among other things and would like it  A 

Also would like to know how to lower My DOM size, I'm sure there is some code that is not needed. My concern is I added another product section earlier on for a product so I could change the code for those products and not the default products using the default product page simple by copying the product page renaming it and giving it a new section for the new products and then changing the code for those products only. I no longer have those products listed anymore and have since deleted everything I added but I still see the DOM size is still large, what is the default DOM size for the venture theme. Thanks  

[venu]

Where i need to update this code in my site . Kindly guide me on this 

[JohnCodes]

Hi @KrisG2 

It looks like you were given a nice solution to implement explicit width/height attributes to your images. That's great!

I wanted to see if anything else could be done to improve your site's performance, so I ran your homepage through the Shopify Analyzer (free tool our team built for the community). It looks like you could improve your lazy loading, which can really help improve page performance. You can check out your full report here: https://analyze.speedboostr.com/result/g0eweqm04b. 

Right now it looks like your theme is using placeholder lazy loading. Instead, you'll want to implement true lazy loading. We have a more in-depth article you can check out regarding these topics: How to Lazy Load Images on Shopify to Make Your Site Faster.

I hope this was helpful. If you have any questions, please feel free to reach out to our optimization team at speedboostr.com/contact.