cumulative layout shift

generally-tired
New Member
5 0 0

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

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
274 45 120

Hi @generally-tired 

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 7

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 7

Has anyone an update about this?

 

Thanks

0 Likes
generally-tired
New Member
5 0 0

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. 

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

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes