Photo by Chris Liverani / Unsplash

How to speed up loading of Unity WebGL builds in Web Browser?

When using Unity 5.3 and above, your game assets will be compressed with gzip by default, and will have a gz prefix on the filenames. Some of the WebGL game publishers will automatically set the Content-Encoding: gzip header so that the assets can be decompressed by the browser instead of JavaScript, leading to a much better loading experience.

However, if you are hosting your game externally, you will need to manually ensure that the assets are being served with the correct encoding. You will know if this is an issue because Unity will log messages like Decompressed Release/MyGame-WebGL.jsgz in 500ms in the console, the browser may appear to lock up during loading, and your progress bar will not work properly.

If you are using apache or a compatible server, you can use the .htaccess file that Unity generates for you to resolve this issue. However, if you are hosting on S3 or something similar, you can force the encoding by changing the filenames in your index.html to add the gz suffix, like so:

enable deflate in WebGL:  
sudo a2enmod userdir  
sudo a2enmod deflate  
sudo a2enmod rewrite  
sudo apache2ctl restartif "Unknown error" add crossdomain.xml.htaccess :"  
Options +FollowSymLinks  
RewriteEngine on  
   
RewriteCond %{HTTP:Accept-encoding} gzip  
RewriteCond %{REQUEST\_FILENAME}gz -f  
RewriteRule ^(.\*)\\.js$ $1\\.jsgz \[L\]  
   
RewriteCond %{HTTP:Accept-encoding} gzip  
RewriteCond %{REQUEST\_FILENAME}gz -f  
RewriteRule ^(.\*)\\.data$ $1\\.datagz \[L\]  
   
RewriteCond %{HTTP:Accept-encoding} gzip  
RewriteCond %{REQUEST\_FILENAME}gz -f  
RewriteRule ^(.\*)\\.mem$ $1\\.memgz \[L\]  
   
RewriteCond %{HTTP:Accept-encoding} gzip  
RewriteCond %{REQUEST\_FILENAME}gz -f  
RewriteRule ^(.\*)\\.unity3d$ $1\\.unity3dgz \[L\]  
   
AddEncoding gzip .jsgz  
AddEncoding gzip .datagz  
AddEncoding gzip .memgz  
AddEncoding gzip .unity3dgz  
"Add gz in index.html:  
var Module = {  
TOTAL\_MEMORY: 536870912,  
errorhandler: null,  
compatibilitycheck: null,  
dataUrl: "Release/20160222\_1.datagz",  
codeUrl: "Release/20160222\_1.jsgz",  
memUrl: "Release/20160222\_1.memgz",  
};

You will also need to ensure that S3 is set up to send the Content-Encoding: gzip header for each of the files that end in gz, or you will get decompression errors upon loading the game. You can use the browser network inspector to ensure the header is being sent properly by the server.

Other Resources

• Read the Unity Blog and documentation religiously — such a vast amount of knowledge is available there. Many of the concepts in this article are discussed in much more technical detail here, for example.
• Check out this Kongregate Developer Blog entry focused on managing in-game memory for Unity WebGL projects.
• Read the Unity Manual about WebGL performance considerations

To help us create more free stuff, consider leaving a donation through Patreon where you can vote for the next asset pack and get access to future packs & articles earlier. Sharing knowledge is our passion. Unfortunately, keeping a team of professionals costs a lot that’s why we are constantly taking on new opportunities.
​
​We’ll be publishing any news on the following outlets:

• Patreon
• Twitter
• Instagram

Thanks for reading!