Cumulative Layout Shift

[lucasoz]

How we could avoid Cumulative Layout Shift? I have a carousel in my web page. I am getting bad CLS score because elements on the carousel is changing size over page load.

I am using this settings

{
  dots: false,
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  nextArrow: <NextArrow />,
  prevArrow: <PrevArrow />,
  responsive: [
    {
      breakpoint: 1280,
      settings: {
        slidesToShow: 4,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
      },
    },
  ],
}

[masoudmoghaddari]

You should calculate the height of the carousel wrapper element and reserve it before the carousel is loaded to avoid any layout shift. One way is to know your images aspect ratio and calculate the height from width.