Fine-Tuning Web Server Compression for Verge3D Apps

Modern web servers can compress files (e.g. HTML pages) before sending them to users. On the other hand, users' browsers can decompress these files really quickly, thus reducing website loading times. This feature also reduces web traffic and, ultimately, maintenance and bandwidth costs for both servers and clients.

Unfortunately, web servers are configured to compress typical web assets, overlooking the unique file types used by Verge3D apps. This reduces efficiency and increases loading times. In this article, you will find solutions to fix this issue.

There is one thing that you also should take into consideration. Verge3D provides its own mechanism of asset compression that serves a similar purpose — reducing traffic and loading times. Verge3D method works for .gltf/.bin assets only and should be used when you can't access your server configs (e.g. when using some third-party web hosting solution or the existing server infrastructure should not be touched).

Missing file types

The following Verge3D-specific assets are most frequently overlooked by web servers:

File extension	MIME type	Usage
.gltf	model/gltf+json	Exported scene (JSON)
.bin	application/octet-stream	Exported scene (binary)
.hdr	image/vnd.radiance	Radiance HDR maps used for environment lighting
.wasm	application/wasm	WebAssembly modules: physics, texture compression

NGINX

To enable gzip asset compression and assign proper file types in NGINX, add the following lines to nginx.conf:

gzip on;

gzip_types
    # common assets
    text/html
    text/css
    application/javascript
    image/svg+xml
    application/json

    # Verge3D-specific assets: gltf, bin, hdr, wasm
    model/gltf+json
    application/octet-stream
    image/vnd.radiance
    application/wasm;

Also make sure the line:

application/x-xz       xz;

is present in the /etc/nginx/mime.types file. Without it, pre-compressed .xz assets may be designated by the application/octet-stream MIME type and compressed twice.

Apache

Add the following lines to the .htaccess file (or create a new file) inside the directory served by Apache:

<IfModule mod_deflate.c>
    # common assets
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/json

    # Verge3D-specific assets: gltf, bin, hdr, wasm
    AddOutputFilterByType DEFLATE model/gltf+json
    AddOutputFilterByType DEFLATE application/octet-stream
    AddOutputFilterByType DEFLATE image/vnd.radiance
    AddOutputFilterByType DEFLATE application/wasm
</IfModule>

Internet Information Services (IIS)

Edit the file

C:\Windows\System32\inetsrv\config\applicationHost.config

using your favorite text editor (with Administrator rights, don't forget to make a backup!).

Find the following snippet and add appropriate Verge3D MIME types there:

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
    <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/atom+xml" enabled="true" />
        <add mimeType="application/xaml+xml" enabled="true" />
        <add mimeType="image/svg+xml" enabled="true" />

        <add mimeType="model/gltf+json" enabled="true" />
        <add mimeType="application/octet-stream" enabled="true" />
        <add mimeType="image/vnd.radiance" enabled="true" />
        <add mimeType="application/wasm" enabled="true" />

        <add mimeType="*/*" enabled="false" />
    </staticTypes>
</httpCompression>

Save this file and reload your IIS server.

Checking Compression

To check whether asset compression is working, open Chrome/Edge console (F12), then go to the Network tab. Right-click the table header and enable Response headers → Content-Encoding.

Reload your page. Assets with compression will have gzip in the Content-Encoding column:

Note that some files should not be compressed by the server as they store data in compressed form already. These include: .png, .jpeg, .webp, .mp3, .xz, .woff among others.

Further Steps

To improve efficiency even more, use the modern compression algorithm called Brotli instead of Gzip. Configuring this algorithm is a bit trickier. It also does not work for the HTTP protocol (e.g. http://localhost) requiring secure HTTPS connections. Use Google/AI Chatbots for further instructions.