Cumulative Layout Shift with carousel on Level's ready theme

[technicalScott]

Before I go to lengths of implementing my own carousel, I wonder if anyone has successfully defeated the horrendous layout shift issues presented by the carousel (Ken Wheeler's Slick.js) used by the Levels Ready Theme.

CLS (cumulative layout shift) scores for pages with this carousel are blocking our products from appearing in Googles free listings, negatively impacting sales.

If you want to see the issue, go to our home page, https://www.techniquetuesday.com/, scroll down to the carousel, and refresh the page a few times. The jank is quite apparent, and it's worse on pages with more products in the carousel.

You see the same issues on the demo page for the jQuery plugin: slick - the last carousel you'll ever need (kenwheeler.github.io)

Has anyone worked around these issues? How did you do it?

Thanks.

[Matt Zimmermann]

Unfortunately, by their nature, most carousels will fail CLS. There are some posts on the Slick GitHub page in regards to helping with it, but nothing too conclusive. You should be able to help the layout by defining width and height in addition to implementing lazy load.

[technicalScott]

Thanks Matt, I found that after I posted here. I implemented a fix based on the thread I found there.

For those who are looking for a solution, here's a link to the solution I went with: https://github.com/kenwheeler/slick/...ment-292218446

--Scott