Fast load times are crucial for Web-based applications, especially on mobile devices which may need to download application resources on a slow mobile network. Slow load times can result in a poor user experience and high bounce rate. Therefore, it’s 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’s 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 Player build. |
| 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’s 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.
For other settings that impact build size, refer to Recommended Player settings to optimize your Web build.
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:
ASTC compressed texture types give small texture sizes and save some download time. Where ASTC isn’t supported, consider ETC2. 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 ASTC 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 one of the ASTC block options.
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. For a good balance between quality and size that optimizes for download time over a mobile network, consider using 8x8. If download times are still too slow, try increasing the block size.
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 8x8 block.
Unity uses shader stripping which removes shaderA program that runs on the GPU. More info
See in Glossary variants that aren’t 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 reduces 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.