Avoid Cumulative Layout Shift (CLS) especially with above-the-fold content #414
Replies: 9 comments
-
|
To avoid CLS, load Splide script in the Loading it in the
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you, let me give this a try. |
Beta Was this translation helpful? Give feedback.
-
|
Try to disable loop mode aswell |
Beta Was this translation helpful? Give feedback.
-
|
I load Splide script in the head tag instead of the body, and initialize it by DOMContentLoaded event, but still have bad Cumulative Layout Shift (~1.2). I use two sliders. |
Beta Was this translation helpful? Give feedback.
-
you can create a placeholder that holds the height of the slider using css, if the banner loaded your website will not shift too much, |
Beta Was this translation helpful? Give feedback.
-
|
One "easy" hack can be this: when Javascript is NOT loaded in the DOM, only the first slide will be visibile, but in most cases is enough to create "space" around, without causing any "layout shift". when a Splide slider is bootstrapped, the "is-initialized" class will be added automatically by Splide, so the rule will be ignored. ...not too fancy but I hope this will help You |
Beta Was this translation helpful? Give feedback.
-
|
Now can we do that with the react-splide?
|
Beta Was this translation helpful? Give feedback.
-
|
I ended up using CSS const mostVerticalMediaAspectRatio = images.reduce((acc, m) => {
const itemAspectRatio = m.width / (m.height || 1)
return acc > itemAspectRatio ? itemAspectRatio : acc
}, 1)
return (
<Splide
ref={mainRef}
options={{
type: 'loop',
rewind: true,
pagination: false,
gap: '2rem'
}}
className="align-middle [&_#splide01-list]:items-center"
style={{ aspectRatio: mostVerticalMediaAspectRatio.toString() }}
>
{images.map(m => {
return (
<SplideSlide key={m.src} className="flex justify-center">
<Image
width={m.width}
height={m.height}
className="h-full w-full object-contain object-center"
src={m.src}
alt={`image for ${title}`}
/>
</SplideSlide>
)
})}
</Splide>
) |
Beta Was this translation helpful? Give feedback.
-
|
For Splide v4 I got the CLS issue solved importing the core styles as a module in the JS instead of importing them via the SASS file. https://splidejs.com/guides/getting-started/#linking-the-style-sheet |
Beta Was this translation helpful? Give feedback.
-
Recently Google has placed much more importance on this performance index, which basically says that layout should not change if possible. This causes lots of headache with sliders in general (understandably). Perhaps we can experiment and test out practices that help splide to get the best scoring on this?
My initial thought is to take the essential CSS that may affect layout shift from splide, and load them way before anything else (inline perhaps)?
Some information about CLS: https://web.dev/optimize-cls/
Beta Was this translation helpful? Give feedback.
All reactions