HTML5 export initial loading optimisation

Question

Recently I've been working on a project, where I learned about the importance of optimisation the hard way. The final version on itch.io takes about a minute to load on my relatively good computer and some people reported not being able to open it at all. (And it wasn't even any sort of heavy game, it was basically an interactive slideshow with a few minigames.)

Another project is on the way and now that I know optimisation is critical, I have another problem: I have no idea how to substantially reduce the initial loading time.
One problem, having almost comically oversized textures, is being taken into censideration, but there's not much else I can think of. How does one reduce the size of the project, so that it takes less time to load?

The only other solution I thought of would be splitting the loading into sections, only loading the scene when the game needs it, so that it doesn't all pile up in the beginning. How would one do that? Would using load() instead of preload() help?

As you can see, I'm still relatively new, so sorry about that.

Another thing I think may be important to mention is that I am exporting into html5, with the OpenGL ES2.0 renderer.

Answer 1

See this GitHub issue.

The main thing you should do is use another host than itch.io, since itch.io doesn't support transparent compression for the .wasm and PCK files. For instance, GitHub Pages supports transparent gzip compression.

Transparent gzip compression can decrease the download size by a 3× factor, so it's well worth looking into. (The ideal thing would be to use precompressed Brotli files, but no public free host I know of supports this as of writing.)

The only other solution I thought of would be splitting the loading into sections, only loading the scene when the game needs it, so that it doesn't all pile up in the beginning. How would one do that? Would using load() instead of preload() help?

This will only help if the other scenes are located in separate PCK files that you load at run-time, but doing so will add a lot of complexity.

Comments

Sorry, I might've been unclear. This is a browser game, the user is supposed to click a link and be redirected to a page where they can immediately start playing, without needing to know much about how to operate with the web, as that's a sizeable part of the demographic. Does GitHub support that?

---

They're referencing GitHub Pages, which is a static file hosting, not a Git backend.

You can host static text files and serve them on a URL as a website.