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
Announcement
Collapse
No announcement yet.
Cumulative Layout Shift with carousel on Level's ready theme
Collapse
X
-
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.
Leave a comment:
-
Cumulative Layout Shift with carousel on Level's ready theme
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.Tags: None
Leave a comment: