Announcement

Collapse
No announcement yet.

Cumulative Layout Shift with carousel on Level's ready theme

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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.

    #2
    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.
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      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

      Comment

      Working...
      X