Blog / Content images with width and height - CLS (cumulative layout shift)

Store Design
1

Good Morning all,

I’m trying to adapt our blog articles in relation to Google Web Vitals and I’m struggling with CLS (cumulative layout shift) because all images don’t show dimensions with width and height in the HTML and this seems to be a Shopify problem.

My idea would now be to parse the article.content part like this: {% if article.content contains “<img” %} , does anyone have a better idea or an idea how to set my width=“” and height=“” here and write the dimensions into the HTML?

This would my idea

{% for article in blog.articles %}
{% if article.content contains "<img" %}
{% endif%}
{% endfor %}

Thanks a lot for your ideas and I’m looking forward for your input
Felix

2

Hi @Fry ,

You want to add width and height to the images in the content of the article:

Screenshot.png
Screenshot.png1651×835 356 KB

There are 2 ways for you to add it:

-1: You need to add directly at Content articles:

Screenshot.png
Screenshot.png770×547 13.9 KB

  • 2: You can add it with javascript.

Hope it helps!

3

Hi LitCommerce,

Thanks for your reply. I actually wanted to avoid a manual adjustment, because we migrate the content and I would be take a lot of time to edit alle the blog articles :wink:

With JS, would be an option, good idea.

Do you think it would be also possible with liquid.

Thanks

Felix

4

Hi @Fry ,

Please add the following JS code:

document.querySelectorAll('img').forEach((img) => {
      img.width = img.width;
    });

Hope it helps!

5

Hi Lit Commerce,

thanks for the JS, I added also the height. However the Google Pagespeed doesn’t see the width and height for their analysis. But this work in general.

document.querySelectorAll('img').forEach((img) => {
    img.width = img.width;
    img.height = img.height;
});

Thanks

Felix

6

Hi @Fry ,

Yes, because it will work with Javascript, meaning everything will be rendered before it starts adding, so Google Pagespeed probably won’t find it. Therefore, way 1 is the best solution for Google Pagespeed.

Hope it helps!

7

I have Dawn theme , where should I add this code. I am having a lot of trouble due to this.