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
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.
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.
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
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:
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!
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.
You could go for the low hanging fruit, like 
