How can I resolve a CLS error on Taste theme slideshow?

[Vapes4You]

Hi Community,

we are using the Taste Shopify Standard Theme. On the index page we use a slideshow to present our products.

Unfortunately this causes a CLS of 0.29 and the core web vitals test is failed.

Page is: https://vapes4you.de

How can we fix this?

 

 

Kind regards

V4Y

[BSS-Commerce]

Hi @Vapes4You ,

In your case, I think it's because the size of the images in your slide show is not specifically defined in terms of size (length and width). This causes the browser to not know the size of the image in advance, so it needs to resize the page when loading the image.

To fix this, you should specify the size (width and height) of the image in your slide show using html or css.
Additionally, you can learn more here for more ways to optimize cls: https://web.dev/articles/optimize-cls

[Vapes4You]

Hi @BSS-Commerce ,

thank you very much for your answer, I think you are correct.

Unfortunately the css behind this slideshow is so complicated, that it is impossible for me to edit. I think this should be done by Shopify Dev.

Kind regards

[Vapes4You · Accepted solution]

I have found the solution, if someones interested here it is:

I have checked the ideal size for the slideshow. As it turns out it differs depending on the theme settings as you can see in this article I found online: https://webpop.io/shopify/image-sizes/

So I resized all of the images to 1200x475px (As my slideshow settings are set to small) and the CLS has disappeared. As a little bonus the image are now smaller in size.

Kind regards