Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi,
Whatever i do to give the width and height attribute for an image, google speed insight still showing that the height and width are still missing.
Any solutions to this guys ?
Thank you in advance
Hi,
Your code shows that the width for that particular image is set to “100%” while the height is set to “auto”.
The height of “auto” is the issue, it does not give the browser an explicit height. It tells the browser to decide what to make the height based on the width of the image.
What the browser does is initially render the image with a height of zero until it gets to the actual image in the HTML and then figures out the height after doing some calculations.
This can cause content in your page to shift down after the height of the image goes from 0 to the calculated value. That shilf is what is know as Cumulative Layout Shift (CLS), and if that shift is above a certain threshhold, Google doesn’t like it.
So make sure that your images have an explicit value for width and height.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024