cumulative layout shift

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/
0 Likes
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

0 Likes
Speedimize
Shopify Partner
292 47 143

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 8

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.

0 Likes
Moonizip
Tourist
9 0 8

Has anyone an update about this?

 

Thanks

0 Likes

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/
0 Likes
Moonizip
Tourist
9 0 8

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. 

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

0 Likes

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

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes