Pre Loading bottleneck

Hi there

In my p5.js website, rich.gg ,I use a loading animation that I made using Daniel Shiffman’s technique
seen here

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

1 Like

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.

Two versions of the same image: a 291 kB JPG 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.

3 Likes

And that is a cooool answer Sven
THANK YOU !

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

Good luck! :blush: 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.

1 Like

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

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

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

2 Likes

cool tip, thanks !

:slight_smile: