FROM CACHE - en_header

Image elements do not have explicit width and height - Debut theme

Theodore_
New Member
2 0 0

Hello!

I get the " Image elements do not have explicit width and height -Set an explicit width and height on image elements to reduce layout shifts and improve CLS" suggestion in google pagespeed insights.  This is for all of my products so it is a systematic error.

I am using Debut theme - Is there something I can do?

Replies 4 (4)
Speedimize
Shopify Partner
319 48 151

Hi @Theodore_ 

Aibek is here from Speedimize.io agency. 

Hope this message finds you well and safe.

To fix the CLS, you have to take up space for a specific element. In your case, you should have a space reserved for images with a fixed height.The height will need to be given using css. And there should appear pictures.

CLS is an unstable indicator and the impact on the overall score is low. But it has a big impact on the UX. If there is a clear shift on the site, it can spoil the impression of your store. And this is not a system error, the product page uses the same template, so there are notes on CLS on every page. 

Here you can take at our simple guide on how to optimize your store with PageSpeed insights metrics: https://speedimize.io/uploads/pagespeed_speeddimize.pdf 

Hope this will help you. 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
oreoorbitz
Shopify Partner
208 25 117

Is your theme code for the product template modified at all? 

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/
Ashish_Soni
Excursionist
11 0 2

Hi Theodore_,

You can easily fix this. Kindly refer to this article.

https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=unknown#images-without-dimensions

Kindly check the code of your theme and start with the collection page and add width/height attribute for failing img tags. 

For example:

<img style="width:100%; height:auto" 
width="{{ featured_image.width}}"
height="{{ featured_image.height}}"
src="{{ featured_image }}"
>

Test your collection page with this tool: https://developers.google.com/speed/pagespeed/insights/

Check this documentation of the image object and you can get width and height from it. 

https://shopify.dev/docs/themes/liquid/reference/objects/image 

https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=unknown#images-without-dimensions

I have fixed this for Flower Delivery Dubai website.

MukhiDairyFarm
New Member
1 0 0

Ashish can you help us to fix our web site speed issue. www.mukhidairy.com