Loading Times

Hi all,
I would like to gather some feedback on loading times. It would be great if you could share some numbers, especially regarding asm.js vs wasm (regular build versus WebAssembly) on different browsers.
Regarding WebAssembly, keep in mind that browser vendors are still working on improvements, in fact you might notice differences if you run their latest versions: for example Chrome Canary build instead of latest stable Chrome (at this time, version 63 and 61 respectively).

Here is some code you can use to measure loading times:

Code (csharp):

1.    [...]
2.     <script src="Build/UnityLoader.js"></script>
3.     <script>
4.       var instantiateTime = Date.now();
5.       var gameInstance = UnityLoader.instantiate("gameContainer", "Build/<build name>.json", {onProgress: UnityProgress, Module: {
6.           onRuntimeInitialized: function () {
7.           var runtimeInitializedTime = Date.now();
8.           console.log("Download+Instantiation time: " + (runtimeInitializedTime - instantiateTime) + " ms");
9.           this.postRun.unshift(function () {
10.             var engineInitializedTime = Date.now();
11.             console.log("Engine initialization time: " + (engineInitializedTime - runtimeInitializedTime) + " ms");
12.             console.log("Loading time: " + (engineInitializedTime - instantiateTime) + " ms");
13.           });
14.         },
15.       }});
16.     </script>
17.    [...]

where "Loading time" is the aggregate download+instantiation and Unity engine initialization.

One note about Chrome, keep the DevTools closed while loading the page as I noticed that might affect loading times. In addition, remember to test using 64-bit versions of the browsers.

I'll take this opportunity to summarize some best practices to reduce load times:

• reduce code size
• reduce data size
• use gzip/brotli compression
• enable compression support for .unityweb files on your server
  
• make first scene small

I think these items have been discussed before so I am not going to add more detail but feel free to ask questions.
Thanks,
Marco

 

Here are some numbers from our benchmark project:

• built with 2017.2
• tested on Window 10 w/ 6 cores i7

FF55-asm:
Download+Instantiation time: 3481 ms
Engine initialization time: 937 ms
Loading time: 4418 ms

FF55-wasm
Download+Instantiation time: 1775 ms
Engine initialization time: 1468 ms
Loading time: 3243 ms

FF57-asm
Download+Instantiation time: 3339 ms
Engine initialization time: 1110 ms
Loading time: 4449 ms

FF57-wasm
Download+Instantiation time: 1581 ms
Engine initialization time: 1829 ms
Loading time: 3410 ms

Chrome 61-asm:
Download+Instantiation time: 6026 ms
Engine initialization time: 2268 ms
Loading time: 8294 ms

Chrome 61-wasm:
Download+Instantiation time: 2772 ms
Engine initialization time: 550 ms
Loading time: 3322 ms

Chrome 63-asm:
Download+Instantiation time: 5787 ms
Engine initialization time: 2364 ms
Loading time: 8151 ms

Chrome 63-wasm:
Download+Instantiation time: 2753 ms
Engine initialization time: 689 ms
Loading time: 3442 ms

We can gather the following:

1. both Chrome and Firefox wasm are faster than asm.js.
2. both Chrome and Firefox are faster at instantiating wasm than asm.js
3. Firefox wasm is slower at initializing Unity compared to asm.js
   
4. no much difference between current stable builds and nightly/canary builds
5. Chrome and Firefox are comparable when using wasm
6. Chrome is faster than Firefox at initializing Unity when using wasm
7. Firefox is faster than Chrome at initializing Unity when using wasm

of course depending on the project/device you will get different numbers so take them with a grain of salt and do you own profiling

 

Edge 16 loads in just under 4 seconds, Safari 11 in ~4.5s, however take into consideration that they have been tested on different hardware/os.

More recent tests show further improvements in Firefox on both Windows and Mac, and a possible regression on Chrome on Mac.

 

You could try Firefox Nightly and Chrome Canary. Likely, the versions you tried don't have all the latest optimizations.

 

It sounds like on Chrome you will benefit a lot from the compiled WebAssembly caching we are working on. At least, that will speed up hot-reload by several seconds.

 

This is what happens now:

1. download wasm code
2. compile wasm code
   
3. instantiate wasm module

however, it's possible to store the compiled wasm into IndexedDB, so that the second time you open the same web page containing a wasm-enabled Unity build, you can skip #1 and #2.
This is something we are implementing right now and you won't need to make any change to your project, apart from re-building.

 

I should also mention a couple more optimizations that will speed up load times when the compiled wasm has not been cached yet. The first one is wasm tier-ed compilation (fast baseline + additional compilation passes for hot-paths). The other one is wasm streaming compilation which will allow wasm to be compiled while it is downloaded, especially useful for large code-bases. The former will be available to you as soon as it's implemented by the browsers and will speed up existing wasm-enabled content. The latter requires both support in Unity and in the browsers, therefore it will take a bit longer before you can use it and it will need the Unity project to the re-deployed.