FROM CACHE - en_header

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

Solved
KrisG2
Excursionist
31 1 14

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

SEO.PNG

Accepted Solution (1)

Accepted Solutions
oreoorbitz
Shopify Partner
208 25 117

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/

View solution in original post

Replies 6 (6)
oreoorbitz
Shopify Partner
208 25 117

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
KrisG2
Excursionist
31 1 14

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

JohnCodes
Shopify Partner
134 10 74

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.

 

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
Brett21
New Member
7 0 0

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 Untitled.jpg

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  

Bernhardt
New Member
1 0 0

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.

venu
New Member
1 0 0

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