Banners slow loading - THEME EXPANSE How can I incrase speed?

[Mromat]

Hello, I have problem with my first banner on home page.

There is 2 or more second till the pictures will appear. I made even smaller filers to test it. Its the same even when files are 20 kb size.  The same time is when i use one picture than two in carusel

Is there any way to make instant show banner pictures like other sites have? What is my issue?

My shop: https://policzona-szama.pl/

[JoesIdeas]

The delay you're seeing is the time to load the plugin.

Couple solutions:

1) Rather than doing a carousel / banner plugin, just show a single image, coded directly into your theme without loading a plugin.

2) If you insist on using a banner to show multiple images, you could code it custom without using a 3rd party plugin, this would be faster, for example if I were coding a banner like that I would have the first image show instantly, then lazy load the other images in the carousel.

3) It's possible that the plugin has code + is reliant on a 3rd party library, like jquery. Some theme developers load libraries or scripts further down the page to appease scores in performance analysis tools, but the negative affect is a slower peceived loading time. If this is the case in your theme you can experiment with not deferring those scripts that need to load the banner.

If you need help with any of these solutions contact my team at speedboostr.com/contact. We do stuff like this all the time.

[Mromat]

Banners come from Theme Expanse. any details about second solution to make instant show first pic?

I wrote to your page

[JoesIdeas]

Yes, have the image load right away instead of waiting for the plugin to load, or if it's wrapped in a plugin that has to generate all the banner code at first, you could put an image there and then hide it when the banner loads. If you custom code it anything is doable. 

[alexleetoo17]

Did you ever find a solution to this issue? I'm experiencing the same issue. 

Thanks!

[Mark44]

Hi, think the Expert is failing to answer the question because the original query refers to a banner image when I think he actually means the hero image. A banner would be loaded from outside the theme whereas the hero image is part of the theme. We have the same issue. I suspect the best option would be to have a single hero image without the carousel effect, but the theme doesn't allow a single image, just a carousel image without additional slides - which for some reason seems to load slower.

[JoesIdeas]

@Mromat the 1st solution I shared will likely be your best solution.

@Mark44 banner commonly refers to any promotional image / graphic on a site (a hero image is an image banner that is at the top of the home page), it's rare that a banner image would be loaded from outside, mostly these are loaded in the theme code - it's better to load content directly into your theme code when possible rather than importing from a 3rd party app.

You're correct that the best option (for performance) is to load a single banner instead of a carousel. Carousels are often heavy and packaged with a 3rd party library (like jQuery), requiring extra resources to load to show them.

Simply loading 1 image in the carousel still loads all the plugin code, so the solution for performance is to edit the theme code to remove the carousel (and any dependent libraries that aren't used elsewhere) and load a single image instead. The code changes required are different with every store / theme, but you can find the carousel by reading the code or inspecting elements in the browser (this article helps with that).