Unity6 Webgl Initial loading is very slow

Unity Engine
, , ,
1

Hi. I created a webgl build with 3 scenes. I uploaded to s3. When i try to open the build it is very slow. But from 2nd time it is fine may be because of cache. Can anyone help me what to do to resolve the issue.

2

Hi!

the initial load time is probably slow due to your build files being very large. How big is your .data and .wasm file in the output folder of your build?
The easiest things you can do to improve load time is to set the right build and compression settings to reduce the size of the files.
Refer to this page for more detailed information: Unity - Manual: Optimize your Web build

A short breakdown of the most important settings:

  • Disable “Build Profiles > Development Build”
  • Set “Build Profiles > Code Optimization” to either “Disk Size” or “Disk Size With LTO”(this will increase build time significantly)
  • Set “Player Settings > Other Settings > API Compatibility Level” to “.NET Standard 2.1”
  • Set “Player Settings > Other Settings > IL2CPP Code Generation” to “Faster (smaller) builds”
  • Set “Player Settings > Other Settings > Managed Stripping Level” to “High”
  • Enable “Player Settings > Other Settings > Strip Engine Code”
  • Set “Player Settings > Publishing Settings > Compression Format” to “Brotli”.
  • Set “Player Settings > Publishing Settings > Debug Symbols” to “Off”.
  • Enable “Player Settings > Publishing Settings > Target WebAssembly 2023”.

Additionally, you can use texture compression to decrease the size of your textures. The format is dependent on what platform you are mainly targeting. Use “DXT” for desktop browsers and “ASTC” for mobile browsers. The build will work on all devices but the textures will be converted on the fly if the device does not support the selected texture compression format.

If you want to further decrease your page load time you want to use the Addressables Package. Convert the assets and scenes that are not part of the first scene into Addressables and load them dynamically when you are switching between scenes.

4 Likes
3

Hi,
Thanks for your reply.
.data is 130mb and .wasm file is 8.54mb.
I am using ASTC, Brotli compression

4

Also recommended: load a (nearly) empty scene first, and then load either the next scene or additively load scenes with content. This speeds up the initial boot process and you can already render things, not forcing players to watch the (default) progress bar.

Specifically for mobile, and most importantly for iOS a fast initial load (less than 10-15 seconds) is absolutely mandatory otherwise the iOS watchdog may reload the tab.

5

130 MB brotli compressed data is quite a lot.
Just the download would take over 30 seconds on a 25 MBit/s connection. On top of that there the file needs to be decompressed by the browser and unpacked into the virtual file system.

I would look into reducing the size of your assets by classical means, e.g., reducing texture resolution if possible, reducing complexity of meshes by using a lower LOD, trying to reuse assets and apply different texture to them to make them look different, etc.

Then you can look into using Addressables. If you have a splash screen, start screen or a main menu in your game I would recommend to make that the first scene and only put assets in the .data file that are necessary for this first scene. All other assets should be converted to Addressables and loaded as needed.
You should also group your Addressables to allow to load them as needed, e.g., one Addressables Group that contains assets needed throughout the game, one Addressables Group per scene and assets that are only required for that scene. If you have switchable player character models you can also put each model into it’s own Addressables Group so only the currently selected model is loaded.
In order to hide the load time you can also start loading the Addressables before they are actually needed, e.g., trigger loading the addressable for the first level as soon as you are in the main menu and so it already started loading before a user can click on a “Start Game” button.

For profiling the load time of your build I can recommend the Diagnostics Overlay which also measures page load time, load time of the .data file and time until the first frame is rendered.
Additionally, I can recommend using Dev Tools of Chrome which allow to profile the duration and order of network requests and also allows to simulate certain network connection speeds. This is really useful for finding out roughly how long it would take for your game to load on different Internet connections.

Another fun trick I saw people use to reduce the perceived loading time(without actually reducing it) is to use a custom Web template. You can add prerendered jpeg image(ensure small size!) of your game behind the loading bar and show different texts under the loading bar as the game loads. That could be tips for the gameplay mechanics, some story points of the game or just funny text if that make sense for your game. This makes the loading of the game seam shorter to the user.

2 Likes