Awful loading times with Splide sliders

Hi! I made a webshop for a client, which has 3 splide product sliders on the front page. All of them has the js code box, to make custom navigation for them. When the sliders are on the page I get bad loading times (the CLS is handled already), 60 to 80 points in Lighthouse. Without them it is 98… Tried removing the custom navigation part from all of them, but no noticable results, so it’s the sliders fault. Even if I leave one slider there the loading gets noticably longer… Anyone has experience with this? I use WP Rocket with JS delaying, but splide is left out.

I can’t confirm this issue so far. I’ve used three Splide sliders on one page of a testing site, and I just checked the PageSpeed scores: 95 on Desktop and 47 on Mobile (though the lower mobile score is due to zero optimization for mobile so far).

On that site, I’m only using Bricks and JetEngine from Crocoblock—no WP Rocket or other optimization plugins. Generally, when working with Bricks, even with Splide sliders, I consistently achieve 90+ PageSpeed scores.

1 Like

I’ve given up on on Splide sliders and have just turned to making queried blocks that have overflow. Seems to work fine.

So you handle all the navigation and interactions with custom JS? Dragable, responsive, etc.?

It might be the query items fault, but I couldn’t manage to find what slows it down in them so much…

I use this:

%root%
{
overflow: auto;
display: flex;
scroll-snap-type: x mandatory;
scroll-snap-align: start;

/* Add scrollbar hiding rules here */
scrollbar-width: none;
-ms-overflow-style: none;
::-webkit-scrollbar {
display: none;
}
}

One note, there is no nav buttons on there yet : ) Hopefully will get to that part soon : )

Here is the site i’m building : snap – The Jungle List

1 Like

biggest problem your server;

second biggest problem lcp;


use chrome performans tool to understand whats happening
image

if you fix this issues you will get easy 95+ score