Study: Don't use slick slide

oreoorbitz
Shopify Partner
132 14 78

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
CANDISOFT
Shopify Partner
1103 146 480

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

If helpful, Please Like and accept The Solution.
0 Likes
tim
Shopify Expert
2926 143 1021

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
tim
Shopify Expert
2926 143 1021

Related article:

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
oreoorbitz
Shopify Partner
132 14 78

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
0 Likes

@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/
0 Likes
oreoorbitz
Shopify Partner
132 14 78

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
0 Likes

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
0 Likes
EllaBrown2021
Excursionist
91 0 7

Why does this happen?

0 Likes