cumulative layout shift

eCom-SEO
Tourist
9 0 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

I optimise Shopify sites so they rank highly in Google.

Interested in working with me? Let's talk https://digitalcornerstone.co.uk/
Replies 10 (10)
styleseal
Excursionist
12 0 4

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

Speedimize
Shopify Partner
319 48 151

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.

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
Moonizip
Tourist
9 0 10

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.

Moonizip
Tourist
9 0 10

Has anyone an update about this?

 

Thanks

eCom-SEO
Tourist
9 0 1

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. 

I optimise Shopify sites so they rank highly in Google.

Interested in working with me? Let's talk https://digitalcornerstone.co.uk/
Moonizip
Tourist
9 0 10

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. 

Nixus
New Member
1 0 0

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-...

diego_ezfy
Shopify Partner
2755 517 697

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

demib
Shopify Partner
123 12 57

@diego_ezfy wrote:


I haven't tested it yet, but I find it unlikely that a Shopify theme out of the box will present any CLS issues. 


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 🙂

SEO Geek since 1996, consultant author and public speaker. Admin of the Shopify SEO Facebook Group

Was your question answered? Kindly mark it as an Accepted Solution 🙂
Fry
Excursionist
32 1 17

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 😉 Maybe someone can help a little bit 🙂

 

Thanks

Felix