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.