How to reduce html5 output size

Hi friends
I’m new to Defold. I like to use it for html5 game. I made simple single scene with just two 32X32 sprites. after exporting it as html5 application it’s 7.1 MB. It’s big size for this simple html5. how can i reduce output size for html5 game in defold?
Thanks

Agreed, that doesn’t sound quite right.

What is the size of the images you used for the sprites? Also 32x32?

You can generate a build report to understand what’s in your application: https://defold.com/manuals/bundling/#build-reports

Also this doc about size optimisation: https://defold.com/manuals/optimization/#optimize-application-size

2 Likes

Please, make sure you build your game in release mode.
Also, in folder with html5 game you have 2 versions of the engine: wasm and asmjs. The end-user downloads only one, usually it’s wasm, if wasm doesn’t support on user’s platform, then asmjs.
That’s why it’s better to check how much you download in your browser inspector or remove the biggest js file from your folder with asmjs version of the engine and check folder size after (but don’t forget to restore it when you upload your build).

1 Like

Thanks britzl, I’ll read them, all my sprites are 400 bytes at all.
I see “default.gamepadsc” is 53393 and “assets.texturec” is 43788. These are biggest parts in report file.
Should i exclude them using Defold App Manifest generator? !

Those numbers seem pretty reasonable to me.
What if you open the folder and look at the file sizes “manually”, what do they say?

Thanks AGulev, Yes it’s in release mode. I see both those files you said.
I’m not sure i understand what you mean well, I have three file there:
file.wasm : 2.18 MB
file_asmjs.js : 4.61 MB
file_wasm.js: 344 KB
as you say maybe i don’t need file_asmjs.js to upload but without this file some platforms may not work and some other works?

These are not reasonable for me, I have used Phaser before and a simple project like that with phaser is less than 1MB at all and works on all browsers too. I know thats html5 framework and it’s not right comparision between them but anyway we look at final result, I can use unity to make html5 games too and it’s more easier for me to make games using unity but i don’t like unity html5 outputs, one main reasone is the size. that’s why i’m looking for defold

1 Like

Well, “expected” is perhaps more what I meant.
We use Emscripten to compile from C++, so we will never get the engine sizes as low as any handwritten java script.

Mind you that this is the vanilla engine (and as mentioned, you have two of them).

And, if you wish to remove things you don’t need, you can do so using an app manifest. E.g. if you don’t use physics, you can remove those parts.

1 Like

I’ll take more time to read manuals and test Your suggestions.
Thanks for your good support ( console.log(“Like”) )

2 Likes

Another thing to look at is how small the engine files are when gzipped, since they’re most likely transferred that way from your hosting later on. A rough guesstimate, is ~60% of their current sizes.

You upload all of the files from the application bundle to your server. The index.html that launches the game will proceed to download only one of file_asmjs.js and file_wasm.js. In the case of wasm the file.wasm will also be downloaded. Remember that the files most likely will be served gzipped.

Take this Pong game as an example:

https://britzl.github.io/Pong/

Open the developer console and see for yourself which files are downloaded. In my case it was around 830kb transferred:

2 Likes

Another thing we have discussed is to distribute the engine through a CDN to increase the chance that the engine is already cached in the browser when a player loads a Defold based HTML5 game.

2 Likes

As @britzl said, index.html make a decision what to download and it depends on the user’s browser:

file_wasm.js: 344 KB + file.wasm : 2.18 MB = 2.52Mb

or

file_asmjs.js : 4.61 MB

Those values are before gzip (it applies on the server-side).

2 Likes

Thanks friends.
I have uploaded my simple test project to this temporary link just for test, you can see if you like .
http://deftest.surge.sh/
I have not removed anything using manifest yet.
no problem about loading I think.

1 Like

Yep, the dev console shows that it downloads ~900kb (gzipped) and only the wasm version. There are many things you can proceed to do to optimize for size. Removing parts of the engine that you don’t use, compressing textures etc

1 Like

Also worth pointing out is that we will upgrade Emscripten soon which will yield even smaller builds: Emscripten 1.39 support (#4803)

7 Likes