Fast load times are crucial for Web-based applications, especially on mobile devices. Slow load times and poor performance can result in a poor user experience and high bounce rate. Therefore, it is important to optimize your WebGL build for mobile.
Web-based mobile applications work best when you have a small build and performant code because there is less data to download, less data to store on a user’s device, and less data to load during initialization, which speeds up load times.
For WebGL optimizations not specific to mobile, refer to Optimize your WebGL build.
Use these recommended settings to make optimizations specific to Unity WebGL platform for mobile:
| Recommendation | Description |
|---|---|
| Optimize for size | Optimize your build for disk size (Disk Size with LTO). |
| Use Brotli compression | Use the Brotli compressionA method of storing data that reduces the amount of storage space it requires. See Texture Compression, Animation Compression, Audio Compression, Build Compression. See in Glossary method to compress your textures. |
| Use the Unity Addressables system | Use the Unity Addressables system for assets. |
| Optimize your audio files | Reduce the amount of disk space your audio takes up. |
| Optimize the graphics in your project | Reduce the amount of disk space your graphics take up. |
| Change the graphical quality level | Lower the quality level to make a faster build. |
A smaller build size is better for mobile because there is less data to download, which usually makes load times shorter and uses less storage on the user’s device. To make sure your build is as small as possible, make sure to optimize your build for disk size:
Go to File > Build Settings.
Select WebGL.
Set Code Optimization to Disk Size with LTO.
Note: Optimized builds with LTO can take a long time. Only use this optimization for final release or if you need to test performance. Use a faster build option during development.
If you have a script that edits settings and you want to enable the Disk Size with LTO setting with C#, add the following code to your script:
// Set Platform Settings to optimize for disk size (LTO)
EditorUserBuildSettings.SetPlatformSettings(namedBuildTarget.TargetName,
"CodeOptimization",
"disksizelto");
Brotli compression is a setting where Unity pre-compresses for you while it builds. Brotli-compressed files are smaller than gzip-compressed files, which can reduce your build size.
However, Brotli takes a longer time to compress. Also, Chrome and Firefox only natively support Brotli compression over HTTPS. So, if that isn’t suitable for your application, consider Gzip compression instead.
To use the Brotli compression setting:
Make sure your web server is configured to serve Brotli files with the correct encoding. For more details, refer to Deploy WebGL application.
Access the Player settings (Menu: Edit > Project Settings > Player).
Click on the WebGL settings tab.
Expand the Publishing Settings section.
Set Compression Format to Brotli.
If you have a project settingsA broad collection of settings which allow you to configure how Physics, Audio, Networking, Graphics, Input and many other areas of your project behave. More info
See in Glossary script and want to change the compression format with C#, add the following code to your script:
// Set the compression format to Brotli
PlayerSettings.WebGL.compressionFormat = WebGLCompressionFormat.Brotli;
Mobile browser applications need short load times to decrease user bounce rates. To keep initialization times short, instead of loading all assets at startup, use addressables to load assets only when your application needs them. Defer the loading of certain assets until after your game loads.
For these changes, make sure to update StreamingAssets/aa/catalog.json with any new addressable files you make.
For more information about addressables and how to set them up, refer to Addressables.
To optimize your addressables further, try the following:
Sort your addressables into groups so that you reduce the number of asset bundles. The smaller the amount of asset bundles, the smaller the build size. For more information about addressable groups and how to create them, refer to Manage and create groups.
Use Brotli or Gzip to compress .bundle Addressable files. It is best to compress addressable files because files are made smaller which makes builds smaller.
If you have a lot of audio files in your project, it’s best to compress your files to lower the size of the audio files. However compressed audio can result in lower quality audio. For information about compression formats, refer to Audio ClipA container for audio data in Unity. Unity supports mono, stereo and multichannel audio assets (up to eight channels). Unity can import .aif, .wav, .mp3, and .ogg audio file format, and .xm, .mod, .it, and .s3m tracker module formats. More info
See in Glossary.
Complex graphics can use up resources and make your build larger and less performant. But there are ways to optimize your graphics to reduce your build size and improve performance. To optimize the graphics in your build, try the following:
ETC crunch-compressed texture types give the smallest texture sizes and saves some download time. It is also widely supported on mobile devices. For more information, refer to texture formatsA file format for handling textures during real-time rendering by 3D graphics hardware, such as a graphics card or mobile device. More info
See in Glossary.
To use ETC crunch compressed textures:
Select your texture asset in your project to open the Texture Import Settings window.
Select WebGL settings.
Enable Override For WebGL.
Set Format to RGB Crunched ETC.
If you use ASTC compressed textures, try to use a larger block size for the compression. ASTC supports block sizes between 4x4 and 12x12 texels. Larger block sizes result in lower quality textures but smaller builds.
To set the block size of an ASTC compressed texture:
Select your texture asset in your project. The Texture Import Settings show.
Select WebGL settings.
Enable Override For WebGL.
Set Format to one of the larger ASTC block options, for example, RGB(A) Compressed ASTC 12x12 block.
Unity uses shaderA program that runs on the GPU. More info
See in Glossary stripping which removes shader variants that are not used in a sceneA Scene contains the environments and menus of your game. Think of each unique Scene file as a unique level. In each Scene, you place your environments, obstacles, and decorations, essentially designing and building your game in pieces. More info
See in Glossary. Shader stripping can reduce your build file size, which can reduce application load times and improve the performance of your application.
However, be sure to test your application to make sure that your unused shaders aren’t referenced by other shaders.
To enable shader stripping, refer to Graphics.
It is recommended that you set the graphical quality level to the fastest option. The faster option results in a smaller build.
To change the graphical quality level:
Access the Quality settings (Menu: Edit > Project Settings > Quality).
Select the Fastest or Fast quality level.
However, the fastest setting can impact the visuals of your application, so make sure that your application looks how you need it to look.
If you have a project settings script and want to change the quality level of your project in the script, add the following code:
// Set the quality level to Fastest (index 0)
QualitySettings.SetQualityLevel(0, true);
The SetQualityLevel() function takes the index of the Quality Level matrix as a value. So SetQualityLevel(0, true) in this case is the Fastest setting, or the first option in the Quality Level matrix. To change it to Fast or the second option, use SetQualityLevel(1, true) instead.