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?
Hi @Theodore_1
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.
Is your theme code for the product template modified at all?
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:
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.
Ashish can you help us to fix our web site speed issue. www.mukhidairy.com
I really enjoyed reading this post! It’s great to see how people are embracing thoughtful gifting ideas lately. I’ve been exploring more about flower gifting myself, and UAE Flowers has been my go-to for beautiful arrangements and reliable flowers delivery in Dubai. Their service always adds that extra personal touch to every occasion.
Great discussion! At Arabian Flora, a leading online flower and gift delivery shop in the Middle East, we faced similar image optimization issues with the Debut theme. Adding proper width and height attributes not only improved our page loading speed but also boosted our SEO performance and user experience. For any eCommerce site showcasing floral products or gifts, this tweak can make a noticeable difference.
This is a really helpful discussion. We faced the same issue while managing the website for Gosha Flowers, an online luxury flower studio in Dubai and Abu Dhabi.
Since floral eCommerce r elies heavily on high-quality product images, the “missing width and height attributes” warning in the Debut theme was affecting our CLS score in PageSpeed Insights. After explicitly defining image dimensions in the theme code and ensuring properly scaled images were uploaded, we noticed a clear improvement in layout stability and overall performance metrics.
For anyone running a visually driven store (especially in niches like flowers or gifting where presentation matters), addressing this small technical detail can significantly improve user experience and loading performance.
Appreciate everyone sharing solutions here — it definitely helped us refine our approach.
