# Pre Loading bottleneck

**URL:** <https://discourse.processing.org/t/pre-loading-bottleneck/21083>\
**Category:** Coding Questions\
**Created:** [May 20, 2020, 11:18am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083 "2020-05-20T11:18:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 20, 2020, 11:18am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/1 "2020-05-20T11:18:01Z")

</div>

Hi there

In my p5.js website, [rich.gg](https://rich.gg) ,I use a loading animation that I made using Daniel Shiffman’s technique  
seen [here](https://www.youtube.com/watch?v=UWgDKtvnjIU)

```auto
function richImg(imgName, filename) {
 window[imgName] = loadImage(filename, imgLoaded);

  function imgLoaded() { 
    preLoadCounter++;
  }

}

```

I use it to load png, csv, obj…

The thing is the loading is taking ages, even with a good connexion.

Of course I compressed my images as much as I could, but I need my textures to be loaded when  
the site opens and I think that around 10 Mo of data should take that long to load

What would you guys suggest ?

am I doing the preloading wrong ?

cheers

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 27, 2020, 5:20pm UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/2 "2020-05-27T17:20:58Z")

</div>

Hello @phoebus,

Cool idea, building a whole website using p5.js like that. I think multiple things add up the slow loading. But image weight is definitely a big culprit: about 90 % of total site weight. Maybe there’s more to save using other formats and more aggressive compression? Take the following image as an example.

 ![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f79f343075eb0cf6b7171aa16fd1cb492d49e7fe.jpeg)

Two versions of the same image: a 291 kB JPEG and the original 465 kB PNG. Is there a visible difference? Absolutely! Is the PNG version so much better than it warrants a 60 % increase in file size? I’m not so sure about that.

I think you can split the total image file size in half without sacrificing too much image quality.

Also, you could adjust the preloading strategy. Instead of preloading every single asset before showing anything, maybe just preloading the first page/slide and then show it to the visitor?

The rest of the images/assets could silently continue loading in the background. If the visitor is browsing around too fast, you could either present them with a new loading screen or show the page with just the text and a placeholder image at first.

Maybe there are other areas of your project that causes the slowdown as well. To figure out if that is the case, you could build a special version of the website where every image reference points to the same (highly compressed) image.

If the preload only has to download a single (tiny) image, the website should load quickly. If not, you’ll have to figure out what else causing the slowness. Performance tools like [PageSpeed Insights can point you in the right direction](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Frich.gg%2F&tab=desktop).

---

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 28, 2020, 10:07am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/3 "2020-05-28T10:07:54Z")

</div>

And that is a cooool answer Sven  
THANK YOU !

So now I get in “work cutout for me” mode :]

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 28, 2020, 10:22am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/4 "2020-05-28T10:22:40Z")

</div>

Good luck! 😊 I’m a web developer by trade, performance being one of my main focuses, so this thread and your progress is fascinating for me to follow. Let me know how it goes.

---

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 28, 2020, 11:13am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/5 "2020-05-28T11:13:46Z")

</div>

do you have a tool, or a trick, to make loadings tests without resorting to the browser clean cache manoeuvre each time ?

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 28, 2020, 11:22am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/6 "2020-05-28T11:22:44Z")

</div>

In the browser developer tools, there’s usually a way to temporarily disable the cache. Here’s Firefox on macOS:

 ![Disable Cache checkbox under the Network tab in Firefox's Developer Tools.](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7ed81fbbcb5aae58d4e74d240e16eb7f5ab59de0.png)

As long as you tick that checkbox and keep the tools open, the cache is disabled.

---

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 29, 2020, 11:37am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/7 "2020-05-29T11:37:07Z")

</div>

cool tip, thanks !

🙂

---

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [June 17, 2020, 11:35am UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/8 "2020-06-17T11:35:20Z")

</div>

Hi @Sven

I’ve done a bit of work with the loading, using your recommandations 🙂  
I didn’t touch the images yet but now I’m loading the images one slide at a time…

You can give it a try here:  
[https://rich.gg/beta/](https://rich.gg/beta/)

Thing is, going to jpg I would loose transparency…  
So I could have some jpg and some png, but, is it worth the trick ?

In any case I want to thank you again. Those tips you gave me certainly pushed me  
to do some work I knew I had to do but felt to lazy to even begin

Also, building this whole project has been quite a lot of work. So at the end you tend to  
feel like cutting some corners.  
It is good to come back at it 1 year later 😃

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 17, 2020, 7:06pm UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083/9 "2020-06-17T19:06:13Z")

</div>

Wow, @phoebus, that really made a difference. The site feels a lot snappier for me now. Great work! 🥳

> So I could have some jpg and some png, but, is it worth the trick ?

I would say yes, definitely, but as I mentioned before, I’m a sucker for performance. ☺ You could go for the low hanging fruit, like `vege1-min.png`, a photograph with no transparency. PNG is ill-suited for that kind of image – JPEG (or newer formats like WebP) will perform much better:

 ![Comparison between JPEG and PNG image.](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7ab0836aac052bdd9e872d657a0c7114ede23b08.jpeg)

Above is a JPEG at 120 kB compared to the original PNG at 364 kB (3 × the size). With less aggressive compression, you could still get away with half the size.

But every project is about making compromises and knowing when to stop, right? (There’s always more to be done. Making every last detail a little bit better.)

You’ve already improved your site’s performance, a lot, with happier visitors as a result. Remember that and don’t forget to celebrate! 🍾