I have two nestable splide sliders on my product singles page. Only two low resolution webp images are used in both sliders total, dynamically fetched through the query loop. On multiple pagespeed tests the splide images result in a Largest Contentful Paint of around 2,800 ms on mobile. When the same page is used, but with a conditionally hidden container containing the splides, and a singular image being shown instead, also dynamically fetched, but not inside a slider I get no Largest Contentful Paint issues. Are splide sliders usually this slow, with consistent 1 second render delays? I tried inline/external css and this too: WAIT: Slider (Nestable) reload - #6 by timmse , but the speed is still slow on mobile. Any pointers is much appreciated.
Something that seems to speed up something on mobile, resulting in higher PageSpeed score by around 4-8 points, is using “custom” settings instead of default on the splide slider. so something like this
{
"type":"loop",
"direction":"ltr",
"keyboard":"global",
"height":"100%",
"gap":"var(--cf-gap-m)",
"start":0,
"perPage":"1",
"perMove":1,
"speed":400,
"interval":3000,
"autoplay":false,
"pauseOnHover":false,
"pauseOnFocus":false,
"arrows":true,
"pagination":false,
"focus": "0",
"isNavigation": true,
"updateOnMove": true
}