Unity WebGL optimisation test

posted in: Unity | 0

I’ll start with the conclusion. To get the fastest loading speed, the following settings seem to have the largest impact (beyond the usual disable logging and errors, enable stripping etc.):

  • Remove WebGL 2.0 api
  • Disable “Precomputed Realtime GI” if not using it
  • Reduce Baked Resolution in the Lighting Window

Since there is very little info on this, and often contradictory, I decided to run some tests to check the loading speed with various settings enabled or disabled. The test project is a complex 3D interior. The version of Unity used is 5.2.1. See below for the scripts used in the test. Everything was run on a local server, so build times will likely influence load times more if deployed remotely. I refreshed several times and wrote down the average, since times tend to vary by up to half a second, even if nothing changed (with cache disabled).

Option Load time (s) Build size (MB)
Enabled Disabled Enabled Disabled
 script only logging 8,35 8,39  21,2 21,2
Debug.Log calls in script  8,39 8,26  21,2  21,1
Prebake Collision Meshes 10,4 10,69 23 21,1
Optimize Mesh Data 10,59 10,69 21,1 21,1
Vertex Optimization 10,61 10,59 21,1 21,1
Dynamic Batching  10,7 10,6 21,1 21,1
Removing webgl 2.0 api 10,7 10,7 20,6 21,1
Removing webgl 1.0 api* 10,7 10,7 20,7 21,1
Precomputed realtime GI 10,8 10,6 21,1 20,4
 Baked resolution to 5 instead of 20 10,1  10,6 17,3  20,4
Ray count 128 instead of 256 10,1 10,1 17,3 17,3
Brotli compression instead of gzip 10,5 10,1 14,3 17,3
Disable “crunch compression” 11 10,1 22,9 17,3
Set texture quality to low 10,2 10,1 17,5 17,3

 

*this only works in the absolute latest browsers


To test things, I used the following WebGL template:

<!doctype html>
<html>
  <head>
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
	<script>
function startTimer() {
    window.t0 = performance.now();
	console.log("START "+window.t0);
}
function stopTimer() {
    window.t1 = performance.now();
	console.log("Load time: "+(window.t1-window.t0)/1000);
	SendMessage ('PresentationKit', 'SetText', "Load: "+(window.t1-window.t0)/1000);
}
window.onload = startTimer;
</script>
  </head>
  <body>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"></canvas>
    %UNITY_WEBGL_LOADER_GLUE%
  </body>
</html>

 

And added the following C# script on any object in the scene:


using UnityEngine;

public class DisplayLoadTime : MonoBehaviour
{
    private void Start()
    {
        Application.ExternalCall("stopTimer");
    }
}