Loading takes a lot longer on a HTML5 Web build than a Desktop Build

[jesperkondrup]

Godot version

3.5 Stable

System information

Windows 10 Pro, Geforce GTX 1060, GLES3

Issue description

We are experiencing very long load times for our HTML5 web builds both on mobile and in a browser on a PC. For some of our larger games it can take upwards of 12 seconds to load a game on web that only takes 3 seconds for a Desktop build.

We are basically interested in finding the fastest way for the user to download and play the game.

Lossy compression
We can get a fairly low size on disk using the Lossy compression for all the textures, which is great for downloading.
The issue with Lossy is that the HTML5 web build takes a lot longer to load than a Desktop build.
In our Minimal Reproduction Project a Desktop PC build takes 0.45 seconds to load and a HTML5 web build takes 2,5 seconds to load on the same computer running windows.

Lossless compression
We have also tried setting all the textures in the Minimal Reproduction Project to lossless, this resulted in very fast load times and only slightly larger file size.
The issue with Lossless compression is that it does not work well for larger projects because the filesize for detailed png images becomes too large. There is a reduction in load time but it comes at the expense of a much larger file size.

So the question is How can we reduce the loading time for our project. Could there be an issue in the fact that the game loads very fast on Desktop but takes a lot longer on Web?

Below are shown load times for the Minimal Reproduction Project on different devices. In the right corner

Here you can see PCK file size vs. Loading time using the different compression settings.

Issue #41118 is similar in some regards but is only concerned about the download speed, where this issue is about load time.

Steps to reproduce

Create a project with 20 2048x2048 png images and set them to Lossy compression. Test how long it takes to load for a desktop build and how long it takes to load for a HTML5 web build in a browser.

Minimal reproduction project

GodotLoadingMRP.zip

[Calinou]

Duplicate of #41118.

Issue #41118 is similar in some regards but is only concerned about the download speed, where this issue is about load time.

It is actually about load time as well 🙂

For official builds, there is nothing we can do about making the WebAssembly payload instance faster. We've already explored pretty much all possible avenues here.

The only thing you can do is make a custom export template build with unused features disabled, which will make the payload slightly smaller.

Create a project with 20 2048x2048 png images and set them to Lossy compression.

2048×2048 textures that are loaded uncompressed on the GPU¹ take a long time to decode. Don't use large non-VRAM-compressed textures in mobile projects. Even on desktop, I would limit their use as much as possible. However, VRAM compression looks bad in 2D in most situations, as it's meant to be used in 3D.

Image decoding is expected to be slower on HTML5 due to the WebAssembly overhead, but also because HTML5 export templates are compiled with optimize=size by default instead of optimize=speed. (optimize=speed makes export templates at least 5 MB larger, so it's not what you want here.)

For most 2D projects, I'd recommend using lossless compression, but stick to lower resolutions or quantize your images to a 256-color palette using pngquant before importing them in your project.

Regarding VRAM compressed texture size, it would be possible to reduce their size by also applying lossless compression, but this would slow down loading quite a lot: #24528

Footnotes

1. Lossy compression in Godot refers to lossy WebP compression, which GPUs don't support. Therefore, the texture is uploaded uncompressed to the GPU. It also takes a lot of VRAM as a result. ↩

[jesperkondrup]

@Calinou Thanks a lot for that detailed answer, that was very useful. We will try the pngquant and possible also downscale some of our textures and use the lossless format.

But we are still not sure why our minimal reproduction game with Lossy compression loads so much faster on desktop compared to the HTML5 web build because both are run on the same machine. Is it due to what you write here?

"Image decoding is expected to be slower on HTML5 due to the WebAssembly overhead"

Do you know if there is some documentation somewhere that further describes this?

[Calinou]

Do you know if there is some documentation somewhere that further describes this?

Not specifically, but it's known that WebAssembly will never be as fast as native C++ code. It has to jump through many layers of abstraction and sandboxing that native C++ code doesn't have.