How can I fix poor CLS metrics on my client's blog pages?

Store Design
,
1

On the website of one of my clients I got report about poor CLS (Cumulative Layout Shift) metrics on some blog pages. First recomendation to fix this kind of issues is to add width and height attributes for all images

I quickly checked code of the theme and it seems we have 0 controle over the article content:

<div class="article-template__content page-width page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
    {{ article.content }}
</div>

With this approach on the output we have

<p><img src="https://cdn.shopify.com/s/files/<some path>/files/<some_image_name>_480x480.jpg?v=123" alt="some alt text" style="display: block; margin-left: auto; margin-right: auto;"></p>

Here we clearly see no width and height attributes present. This is very surprising especially because we have all this data in the article UI where we can select image size.

Is there a way to fix this problem and print width and height attributes from image resource?

1 Like