Streaming live at 10am (PST)

Webflow slider - will many image slides cause performance issues?


#1

Hi,

Before I create 80 image slides (full width hero images… about 1440x500px), will having 80 slides in a Webflow slider create performance issues?

I’m just curious how the slider is loading–will it wait to load subsequent slides until they’re needed? Is there a recommended limit to slide #s, or has anyone seen issues with many image slides?

Thanks!


#2

I’d be grateful for anyone’s experience with the native Webflow slider beyond a handful of images. Has anyone run into speed/processing issues? Even on mobile? Is there any reason not to use the Webflow slider for 80 images, using a collection, and limiting to 1, starting at 1, then 2, etc.?

Thanks!


#3

Since they are all referenced in the code right off the bat, the page will need to load them all. You do not want to do a set of 80 full-width hero images on one page. You would be able to measure the load time in units currently reserved for astronomy.

edit: I should hedge that with the reservation that I am certain there is a way to lazy-load them via custom code. But visitors on data plans that are not unlimited will plot your demise.


#4

Thanks, @Cricitem. Any thoughts on best options outside of the native slider? I looked at Wowslider… but that would mean loading images from elsewhere. There’s nowhere in Webflow to get the img src for Webflow hosted images, is there?

Any other ideas on how I might handle something like this? Thanks!


#5

I should add what my client is trying to achieve: there are 80 hotels in his network, and he’d like a slider on the homepage that features all of them at some point… though not on a single visit.

It could be, say, 5 slides per visit, pulled at random from the 80. No one’s going to sit through 80 slides, obviously. Maybe a way to do this could be outside of the slider… using randomized collection items and animate their visibility? That seems like a separate post/question.

Thanks for your help!


#6

That certainly is a challenge. A bigger portion of the challenge is the fact that randomization is (I believe) by date, and not by visit. Meaning, even if you set the loaded images to randomly pull in from a collection, the set of 5 will be the same for everyone who visits on a given day, no matter how many times they visit.

That could have been changed since I last tried it (a year or more ago), but I doubt it.

The client has to realize that visitors are very unlikely to hit the site the 16 times it would take to see all 80 superheug images given a perfect randomization coincidence, and even if they did it would likely be because they are coming to the site for a specific reason and would be increasingly unlikely to sit and stare long enough to even see the second image in the sequence…

If it were me (and it has been me), I’d suggest a masonry layout where the images are displayed as part of a large block of images. Each one being something like 20vw wide x 15vw high in 4 rows of 5. That gets you 20 at a time and it could be used as a mid-page accent throughout the site. You could pretty easily set those to random and as a person visits different pages of the site, they’ll be exposed to all of the different images, even if not in the detail the client is envisioning. Then just use the top images as a hero on each page, with the availability for a person to see each of them in their full-resolution glory if they CHOOSE.


#7

Excellent–thanks so much for the detailed and thoughtful response, @Cricitem. I really appreciate it!