Preloading Hero Banners

I am having a “problem” with Foundry and slow-loading banners. I based a new site off the Elixir Artisan template, but I am finding that the title text renders in before the banner image. I had even tried using the new Reveal stack wrapping around the text with a onLoad delay. I then tried to manually preload the banner image via a prefetch, but nothing I have tried works.

Why does the Foundry banner load so slowly? Is there a way to force it to load first underneath any overlaid text?


In the order of possible reasons why a banner is slow to load the use of Foundry per se is going to be rather low down.

Would it be possible to provide a link to your site so that we might be able to take a look and possibly make some suggestions?


As Kryten mentioned, if we have a URL to look at it will be much easier to give you solid information.

Your image file size is rather large, so it is taking a long time to load:

I’ve re-saved your image using the Save for Web feature in Photoshop, and then compressed it down further using the TinyJPG site ( Doing so I’ve brought it down from 3.34mb to 112kb, which is a huge decrease. You can download the optimized version here:

Replace your banner image with this new one and you should see a faster load. Optimizing images is one of the biggest things you can do to speed up your image load times.

Your site is looking rather nice by the way! Keep up the good work.

1 Like