Why should we avoid using Slick slide for carousel plugins?

[oreoorbitz]

Hey guys.

Occasionally I'll do experiments to test how different things preform.

I have an on going test of different carousel plugins and how they preform compared to each other, so far I've tested 4.

Glide js, Swiper js, Slick slide, and Owl Carousel.

They all pretty much preform the same, except for Slick slide.

Slick slide is horrible for performance, never use it. Ever.

For comparison, here is the PageSpeed Insight's scan of a page with just Owl carousel.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdetermined-euler-682d84.ne...

And here is Slick slide:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdetermined-euler-682d84.ne...

You can see the largest contentful paint on the page with slick  slide is much slower then on Owl carousel. Slick slide also adds some more CLS than Owl carousel.

[pioneer100]

both above links shows the same speed of 80 for mobile.

[tim]

Very interesting, but that's unfair comparison.

Owl element is initially loaded with display:none; in your inlined style.

Because of this browser is able to load and process Javascript files faster since it does not have to render images initially. 

For slick, it loads and renders images with higher priority, delaying javascript loading and execution.

It would be interesting to repeat, but add this CSS to Slick site:

.your-class {
  display: none;
}
.your-class.slick-initialized{
 display: block;
}

On the other hand, this kind of CSS will introduce significant layout shift if there are other elements after slider.

[tim]

Related article:

https://itnext.io/javascript-sliders-will-kill-your-website-performance-5e4925570e2b 

[oreoorbitz]

I should of called this thread: "Sliders that recreate DOM content are bad for your PSI score".

The main reason slick carousel is bad for your PSI score is becuase it takes a DOM tree arranged in a certain way, then uses that to create the slider, replacing content, so what ends up happening is that image you start with, is not the one you end up with, as far as LIghthouse is concerned, so thus, you don't get the final Largest Contentful Paint untill slick finishes loading the slider, as opposed to other sliders that take a DOM tree arrangement and then just add functionality but don't change DOM elements.

Also since slick edits the layout so the slider works, you get a flash of all the slides in a row before slick builds, which results in CLS, though that can be fixed with css.

Fotoroma also has this issue too (which shella theme uses). I had a job where I edited a Fotorama slider so that it wouldn't cause cls, so I changed the css so that the container would stay the same size, but becuase it changes DOM elements, there was a flash as starting elements loaded and were then replace by Fotorama's slider structure.

[MPI_themes]

@oreoorbitz since 4.6 Shella doesn't use the Fotorama.

So, what is the best solution?

CSS trick with flash effect

or

Big CLS without flash

[oreoorbitz]

It's better not to have CLS, to avoid the flash effect, you can just hide the image untill slick initializes, I've seen many people use loading spinners. This is good for user expierence, but you'll still get a bad LCP score becuase of the time it takes Slick  initialize.

Sometimes when a client doesn't want to pay for me to replace slick, I inline slick.js and the part of the code that initializes the slider,so that lodas faster 

[eStoreSpeed]

It seems like Owl carousel is deprecated https://github.com/OwlCarousel2/OwlCarousel2, they recommend using tiny-slider instead.

[EllaBrown2021]

Why does this happen?