Study: Don't use slick slide

oreoorbitz
Shopify Partner
205 24 114

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
Replies 8 (8)
pioneer100
Shopify Partner
1118 145 481

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

If helpful, Please Like and accept The Solution.
tim
Shopify Expert
3040 170 1094

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.

My post solved your problem? Like it!
tim
Shopify Expert
3040 170 1094

Related article:

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

My post solved your problem? Like it!
oreoorbitz
Shopify Partner
205 24 114

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
MPI_themes
Shopify Expert
112 2 30

@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

Shopify App / Theme developer
https://mpthemes.net/
oreoorbitz
Shopify Partner
205 24 114

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 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
eStoreSpeed
Explorer
43 6 12

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

 

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
EllaBrown2021
Excursionist
92 0 9

Why does this happen?