Hi @Ten, well I took a glance at your site, and “I think” that lazy loading of your slider images may be a possible solution in this situation. If you lazy load your images, then the site will only need to load the current + next image for any given slider, thus reducing a ton of image data the page has to load at once…
You can do this code to lazy load yourself, you need to start using the data-src custom attribute of images, that will be used as the src property of images to load, … This works so that the slider will trigger the code to load next image source, once the “slid” event is triggered and NEXT() method is used on the items in the carousel:
$('#myCarousel').on('slid', function() {
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
This code is placed in the custom code section of your site in the before body section…
Now this is one method I found, and may not be the best one still for you, you have to play around with this… Another option is to use another slider completely, that has lazy loading built in, like Owl Carousel:
http://www.owlgraphic.com/owlcarousel/demos/lazyLoad.html
There is complete code example on the Owl Carousel site how to integrate that to your site… and the carousel is free to implement on your website.
In any case, I think some combination of lazy load behaviour on images is a good solution to your large data load needs… not saying there is not some work involved to change things, but it depends how much of speedy page performance is important to you for your mobile visitors or desktop visitors…
Just some suggestions… I have to try the above myself to get it integrated to webflow page to see how it works out