Unity WebGL optimisation test

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)
Option	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");
    }
}