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 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.

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:

Hi @Sven

I’ve done a bit of work with the loading, using your recommandations :slight_smile:
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/

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 :smiley:

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

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. :slight_smile: 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:

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! :champagne:

2 Likes