How can I fix the cumulative layout shift issue on my product pages?

Technical Q&A
1

Hi all,

With Google paying more attention to core web vitals within the next few months, I’m wondering if anyone can help out.

According to Page Speed Insights, my product pages have a cumulative layout shift issue. Has anyone else got this problem and if so, what did you do to fix it?

I think it’s to do with the images not being set to:

width="640" height="360"

But I’m not 100% sure. And when I alter the sizes of the images they look awful.

Has anyone else got this problem? My store is built with Turbo, too.

Cheers

Alex

2

I’ve got the exact same problem with the Debut Theme. From the Page Speed insights, it clearly looks like it the image slider on the product page that causes the issue. It’s contributing almost 0.8 of the CLS score.

cls.png
cls.png990×243 19.1 KB

3

Hi @eCom-SEO

Aibek is here from Speedimize.io

Check our special document where we explain everything regarding all metrics in Google Page Speed: https://speedimize.io/uploads/pagespeed_speeddimize.pdf

In simple words on how to improve CLS: “Simply reserve a place”

If you need help with Speed Optimization, we will be glad to help you.

1 Like
4

Hi,

I’m having exactly the same issue as you guys. I tried to reserve a space for the product slider, but the images don’t look nice + the pagespeedinsights tool still claims there is a layout shift.

5

Has anyone an update about this?

Thanks

6

Personally, no not yet, but that’s only because I’ve just not gotten round to it yet.

I do think it needs addressing but I wouldn’t sweat it too much. Google have a habit of announcing things like this (secure sites, fast loading etc) with the benefits being a minimal ranking factor then nothing at all because the majority have addressed the issue.

7

Thank you for your answer. I agree with you, this update might not have a major impact on the rankings. But we never know … so just in case. And this issue seems to be something easy to fix, even if I haven’t found a solution yet.

8

Can we talk buddy, I have a site you can help me with? I want it score high close to 0 CLS and others

https://primodentalproducts.com/products/disney-disposable-face-mask-for-children-by-halyard-health-75-box

9

Just to bring some light upon what actually is the CLS issue:

The CLS issue is essentially when you aim to click on object A, but then it moves away and you either click on object B or on nothing at all.

Here is a very short video made by Google showing how the CLS looks like on a website.

CLS can be caused by multitudinous reasons but, more often than not, it is caused by apps injecting code into your website and pushing things around after the website has been loaded.

I haven’t tested it yet, but I find it unlikely that a Shopify theme out of the box will present any CLS issues. Therefore, I would take a look into the apps that you may be using and contact the respective developers.

Kind regards,
Diego

10

Actually, it looks like the new Dawn actually do have some CLS issues out of the box in the MainContent area.

Adding Shopifys own (newest) Reviews App (on product pages) makes it much worse :slightly_smiling_face:

11

Hi all,

I habe the same issue for the blog and content sites, my idea would be to parse the article.content like this

{% if article.content contains "<img" %}

and then I think it could be possible to add the dimensions width and height. But I’m not the liquid pro :wink: Maybe someone can help a little bit :slightly_smiling_face:

Thanks

Felix