Improving Web Vitals CLS score

[rizkysyazuli]

I'm still getting less than ideal CLS (layout shift) from slick carousel.

Funny thing is, the Performance panel did not report any layout/position change as seen in the screenshot above.

I've implemented css aspect ratio boxes as suggested in web.dev to allocate the initial size and prevent child elements (slick-dots, etc) from shifting around. But there's still the issue of this div.slick-track thing.

Any ideas would be really helpful.

[autresrhumbs]

I have the same issue and no clue how to solve this either. Would be very helpful if you could provide us some hints here! Thanks

[rizkysyazuli]

@autresrhumbs in the end, i gave up and use something else. here's an article about alternative sliders.

[krish4u]

I have the same CLS issue and tried all possible fixes but no luck.

[ggeorgiev-webolie]

The problem with Slick is that first images are loaded and then the carousel is initialized. Initially you have all the images as block elements and after initializations they shrink to one element and the content on the bottom moves to fill the gap.

It can be overtaken with adding class with display:none for all but first element, and remove this class after "init" event. yet... not the best solution.

[krish4u]

Making infinite: false brought down the CLS to 0.

[mackonen]

Adding this scss worked perfectly:

.js-slider { & > .slide:not(:first-child) { display: none; } }

Source: https://trungk18.com/experience/slick-layout-shift/

[mohsen]

Adding this scss worked perfectly:

.js-slider { & > .slide:not(:first-child) { display: none; } }

Source: https://trungk18.com/experience/slick-layout-shift/

Only works when slidesToShow is not greater than 1.