Optimized WebGL Load Times

Empty WebGL scene loading times, there is absolutely nothing running in the scene, just wanted to describe how I got fast loading times.

Try It For Yourself

Desktop
Safari: ~3s
Firefox: ~1.5s
Chrome 69: ~2s (faster due to new JS Engine)
Chrome 68: ~6s

Mobile
Had some issues with reloading the webpage though, could be missing a package
Chrome: ~5-6
Safari: ~5-6

Project Setup:

Build Size: 3mb

2018.2.7f1
Data Cache Enabled
Enable Exceptions: None
.Net 2.0 Subset
.Net 3.5 Equivilent
Gzip
WebAssembly

Unity Packages:

• Asset Bundle
• Audio
• Physics
• UI
• UI Elements
• Unity Web Request
• Unity Web Request Audio
  
• Unity Web Request Asset Bundle
  
• Unity Web Request Texture
  
• Unity Web Request WWW
  
• Video (possibly required to run on mobile)

The rest of the Unity Packages have been disabled for optimization using Package Manager
Further optimizations could be done but that involves work on the build pipeline.

 

I'm really excited to see that blog post! Here is a list of phones we quickly tested on:

• iPhone 6s
• iPhone 7
• iPhone X
• Pixel 2

It seems like it would work on any modern phone.

 

Amazing. Thanks for the post.

 

Just Wow! I was able to take my current project with load times of 25+ seconds and knock it down to a very quick 6 second load time. Thanks for the share!!

 

@Dan_NextRevC great post!

Question: why Gzip? It is my understanding that Brotli brings down size even more...

 

I just tested Brotli vs Gzip for one of my projects.

Brotli: 6.36Mb
Gzip: 8.12Mb

 

@Marco-Trivellato I saw that you posted last week about a blog post coming this week. Is that published yet?

 

@mattbrandmm Gzip is supported on all browsers whereas Brotli doesn't support Safari, so I wanted to have consistency for all of the tests.

 

Safari supports Brotli if you use macOS 10.13 or later (also iOS supports it).

 

Isn't there also gzip and brotli JS decompressors embedded in the UnityLoader.js in case of missing browser support? It's obviously going to be slower but it'd resolve compatibility issues (in theory).

 

Wow you guys are really for the brotli compression huh. I didn't know Safari supported it, and that's really cool thanks for sharing! My company will probably be using gzip until MacOS 10.13 is at-least at 75% market share (currently 53% for High Sierra). Or do some speed testing with brotli on MacOS < 10.13, might recommend them to just bypass that all together if @JJJohan you're correct. Super helpful insight guys, I'm glad I could start a forum like this!

Brotli = ~2.5 mb
GZip = ~3.2 mb

 

Nice test.
How do you count the time?
From when the page loads, or when the download bar stops?

Also, how did you test it on iOS if it uses WebAssembly? Didn't apple remove the support for WebAssembly on iOS for some security issues?

 

Results made today using the provided link:

Chrome v70: 8~9s
Canary v72: 2~4s
Firefox: 2s

MacBook Air
1.8 GHz Intel Core i5
8 GB 1600 MHz DDR3
macOS: 10.13.4

Something can be tuned on the browser side on Chromium 69?
I have an application made with Unity 2018.2.12f1 running on Electron 4 with that version but i cant reach less than
8 seconds of load with an empty project.

Maybe building Electron against Canary but... is a very heavy process.

 

The exact chrome browser version I was using was 69.0.3497.100 (Official Build) (64-bit) 69.0.3497.100 (Official Build) (64-bit). I just updated and saw similar loading times in a fresh incognito window, meaning around 2-3s, not the 8-9 that you saw. It could be that I have a better machine, I have a MacBook Pro 2018. I can't speak much to Electron, as I have only touched on that technology a little bit, but do make sure that you are stripping out as many packages you can through the package manager.

 

Wow! On incognito windows load fast. I have only one window in the main account and is slow, mmm what could be the difference...

 

Probably you had a large cache or something with your browser, I haven't seen loading times that slow for this project ever, I don't know why it was loading that slowly. Maybe something to look into.

 

Hi, We have a presentation with a few pages before WebGL page starts that user is going through, so we would like to initiate download and caching of the large App.data.unityweb file while on the very 1st page of that presentation. Unity WebGL doc: "Data caching Enable this option to automatically cache your contents Asset data on the user’s machine so it doesn’t have to be re-downloaded on subsequent runs." And it is working after the 1st run. Is it possible for WebGL to cache Data App.data.unityweb before the first run?

Thanks a lot!

 

I have 30Mb/s internet:
Xiaomi Redmi Note 5 - Android 9 - Chrome: first time 10s next 7s, 8s. Firefox: first time 9s next 4s, 3s
Ipad Air 2 - Ios 13.3 - Safari: first time 8s next stopped loading, 5s, stopped loading, Chrome similarl

Armory3D (beta) - free addon for Blender - Simple Puzzle3D Demo
http://dzynek.pl/games/test_demo_puzzle3d/

Load faster, automatic server-side compression.

It can be used for simple games, has Visual Script.
Armory Mode: Render Mobile - Legacy Shader only simple Difuse Material and one Light but works everywhere, in the future it may be interesting.

 

Thank you so much! This solved my problem with lag during runtime as well.

 

Wait, coming to this thread late and looking for solutions to cut down on build size/initial loading times, does having a lot of Unity Packages in your project, even though you're not using them exacerbate load times?

 

anyone care to make an updated May 2023 edition of this thread