Brooklyn: how can I have the slide-show load first?

20 0 9

Currently, the slideshow loads after/while the rest of the homepage loads. This is super slow, despite having optimized the slide images. It opens gray, and stays that way for ages.

I want to have all the loading of the storefront focused on loading the slideshow, so that the user sees the first image, and has that positive impression right away.

Please let me know how that can be possible! Thank you 🙂

Replies 4 (4)

New Member
5 0 0

That's a tough one because images are generally way bigger than the rest of the webpage. So you'd just be looking at a blank page instead of a grey slideshow. One technique you may have seen on other sites is that the slideshow appears blurred until it finishes loading. This is done by downloading a very, small low-resolution image and kindly asking the browser to display it as blurred while the real images are downloaded in the background. 

22 0 4

Hi Robin!

You can try to compress your slide shows sizes. Ideal size: 1200×800 PX.

Or use apps for speed loads like Page Speed Optimizer.

Hope it helps! Thanks!

Need an expert?

Contact us:


Shopify Partner
253 29 130

1. Is your slide using slick slide? Slick is super slow compared to every other slide Javascript plugin you can find. Consider replacing with a different slider

2.Preload the first image in your slide

3. Make sure you don't have lazyloading enabled for the first image in your slide

4. Try take the code that initializes the slide, and taking it outside the main theme js code, and putting inline, also place that inline js above other js, unless of course its dependent on Jquery.

Available for freelance. I specialize in speed improvement and theme development.

You can also contact me directly if you prefer.
7 0 1

Consider resizing your slide image and also using a CDN content delivery network to help load those bulk images and CSS on another server. I hope that will help