LCP

[PSzabo]

Hi, I have a problem with LCP optimization. Splide is hidden during loading page and it's width and height is loaded late.
Is there some way to have exact size of area with Splide immediately?

Thanks!

[martinbmnt]

Hello,
I use a workaround to fix a CLS issue due to width and height of my slider.
My Splide's configuration contains several breakpoints with heightRatio :

new Splide(slider, {
  breakpoints: {
    576: {
      heightRatio: 1.2,
    },
    768: {
      heightRatio: 0.8,
    },
    1000: {
      heightRatio: 0.6,
    },
  },
  cover: true,
  heightRatio: 0.3125,
  ...
});

To fix that, I've added the aspect-ratio CSS property to the elements .splide and .splide__track :

.splide,
.splide__track {
    aspect-ratio: 5 / 6;
}

@media (min-width: 576px) {
    .splide,
    .splide__track {
        aspect-ratio: 10 / 8;
    }
}

@media (min-width: 768px) {
    .splide,
    .splide__track {
        aspect-ratio: 10 / 6;
    }
}

@media (min-width: 1000px) {
    .splide,
    .splide__track {
        aspect-ratio: 16 / 5;
    }
}

This may help you, but on my own I'm still stuck with LCP because of the fade-in transition ...

[rickvian]

it would be great if we have build in solution, banners become LCP most of the time