Why should we avoid using Slick slide for carousel plugins?

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.