CLS problem

Hi Simon,

Thank you very much for reaching out to us.

We have carefully reviewed the page you shared above and investigated our plugin to determine the issue.

But it is unclear whether the issue is happening due to swatches in particular.

Would it be possible for you to share a screencast that demonstrates the issue? This will help us to understand the situation better and provide you with the most effective solution.

Best regards,
Tarek Aziz

Hi,

Thank you for your message. 

The problem is occuring on every product pages of our website (example here : https://flockyou.fr/produit/sweats-personnalises-04/lille/ ). 

The more variations are in the product, the most important the CLS is. 

Here you can see a video with pagespeed test with & without the swatches (with a display none applied on variations class on second lighthouse test in order to see CLS is good without swatchly label displayed) : https://www.awesomescreenshot.com/video/19616234

Could you tell me what’s the solution please? I’m using swatchly pro extension but this very bad score in each product page is really a big problem for us.

Thank you very much.

Best regards.

Hi @simonlb,

It was my pleasure.

Thanks a lot for your kind response.

Unfortunately, the video link you shared is not working. Could you please check it again?

If we watch the video, it might give us some insights into the problem you are experiencing.

Best regards,
Tarek Aziz

Hi Tarek,

Sorry for the broken link, here it is : https://www.awesomescreenshot.com/video/19733982 .

You can see on this video that without swatchly variations activated, the CLS is near 0, whereas with it it’s very important.

Best regards.

Hi there,

Thanks for sharing a new link.

It’s a bit strange, but the new link seems to be broken as well ??

Would you please consider recording the video using loom?

Hopefully, it won’t cause the same issue.

I will eagerly await your response.

Have a great day!

Hi,
Thank you for your reply and sorry fot he link. Here it is with the key so you can visualize it, same in private nav : https://www.awesomescreenshot.com/video/19733982?key=33934b191cf09b7b2c1da67b024aa523

Best regards.

Simon

Hi Simon,

It was my pleasure, no problem.

Now the video link seems to work. Thanks for sharing it with the key.

After investigating the matter, here’s what we have found:

It appears that your product has a lot of variation swatches. You probably know that each swatch is generated dynamically. That’s the reason why you are facing a CLS issue.

With due respect, I would like to inform you that it’s a bit difficult for us to optimize the plugin based on the number of swatches as the number varies from user to user.

Despite that, we would recommend you try setting a minimum height property mentioned in the link below:

https://web.dev/optimize-cls/

It can help you improve the CLS. Also, if you have a good understanding of technical staff, you can read the whole article.

All the best,
Tarek
On behalf of the Swatchly team

Hi,

Thank you for your reply.

I understand we have lots of variations which is increasing the problem, but the problem is here for all numbers of variations (in a less important way when there are less variations, but it’s here in all the cases, and so affect all of your customers, same if they have only 2 variations).

I understand it’s a bit difficult to resolve, but when we buy paid plugin, it’s also in the aim to have a plugin which do the job and where the code is good and answers to the actual requirements for SEO.

Having a plugin giving 0.4 CLS on product pages (which are main pages of a woocommerce websites) is difficult to accept today, we will try to find the solution by our own way but I don’t find this very professionnal to have to find a solution to a problem on a paid plugin, which is affecting all of the customers of this same plugin.

Best regards.

Hi Simon,

I sincerely apologize for the delayed response.

I completely understand your concern. Don’t worry; we’ll try our best to resolve the issue even though it’s a bit complex.

Could you please open a ticket in our support center?

https://hasthemes.com/contact-us/

This way, we can investigate the issue further and will be able to provide you with a solution to optimize the CLS.

Note: Don’t forget to share the URL of this thread while creating the ticket.

I will eagerly await to hear from you.

Wishing you a wonderful day ahead!

Kindest regards,
Tarek Aziz