Compressing HTML5 files (pako)?

Binsk

Hello! Okay, so I may just be dumb as I'm still relatively new to the HTML5 scene.

I want to compress my HTML files into .gz files to speed up loading times then unpack them client-side before loading them. I have been using this guide here: https://www.reddit.com/r/godot/comments/8b67lb/guide_how_to_compress_wasmpck_file_to_make_html5/

For some reason this works perfectly fine on Firefox and I have no issues whatsoever. If I use Chrome, though, I get "incorrect header check" errors for both the wasm and the pck file and it will never load the game.

You can see if it loads for you here (right-click 'inspect element'): https://upsetbabygames.com/play?q=1

Now, if I upload it to somewhere like itch.io it works on both browsers with exactly the same pako code.

Has anyone done this before? Are there some peculiarities I am unaware of that would be causing this? Any help on the matter would be great as I have been trying to solve this with little luck for the past week. All I'm doing is loading the game directly to an iframe. The index.html and index.js are modified as explained in the tutorial (I am loading pako from a different part of the server, but other than that it is identical).

Alternative methods would even be appreciated, anything that lowers the load times as 20mb+ per game is really going to turn a lot of people off.

Thank you in advance.

Calinou

I would recommend using GitHub Pages or another host that supports gzip compression for WebAssembly files, so you don't have to bother about it yourself. Unfortunately, it seems itch.io has no plans to let users enable transparent gzip compression when delivering .wasm files. See GDScript Online for a working example (repository).

By letting the web server handle the compression, you can even use more efficient Brotli compression if it's enabled on the server.

Binsk

Thanks for the help Calinou, I'll have to look into Brotli compression as I want to keep this all on my own server as much as possible.

If that can get the same results as something like PAKO then that seems like the better option anyway.

EDITED:

EDITED x2: So I'm stupid, you can do this by just changing .htaccess, no need to mess w/ the javascript. Updated below.

EDITIED x3: Please see THIS POST before using htaccess!

Alright, so I'm using brotli compression and it seems to be working. Thank you again, Calinou. For my current game it gets the WASM from ~14mb down to ~3mb and the PCK from ~11mb down to ~2mb (which is also about 1-2mb better on each than .gz).

To anyone who is as clueless as I was, what I did was modify my .htaccess file to tell the browser that our .pck.br and .wasm.br files are compressed w/ brotli and to uncompress them and remove the trailing .br, thus making it work w/o modifying the game's javascript. My added .htaccess code looks like this: (note: I'm new to this so if I have some stupid error in here, please let me know!)

FileETag None
<Files *.pck.br>
	AddType "application/octet-stream" .br
	AddEncoding br .br
</Files>
<Files *.wasm.br>
	AddType "application/wasm" .br
	AddEncoding br .br
</Files>
RewriteCond %{HTTP:Accept-Encoding} br
RewriteCond %{REQUEST_FILENAME}.br -f
RewriteRule ^(.*).br$ $1 [L]

Calinou

Good to hear it works :)

Modified my game's JS file to tack .br to the end of the filename. Open up the .js file, locate the line that says function loadXHR(resolve, reject, file, tracker){

I'm curious as to why you needed to do this. This shouldn't be necessary if the server loads the compressed file in a transparent manner. Or is this a limitation of using an .htaccess file instead of editing the Web server configuration?

Binsk

I just chalk it up to me being clueless. I'm only just starting with server stuff and I am learning as I go (or rather, stumbling through it all until I find a solution). It's a lot to learn.

Since you mentioned it above I've now realized that the .htaccess could be modified so you don't need to update your javascript. I updated my previous post to reflect this. Is the modified method what you were referring to as 'transparent'? It just strips the .br from the file and tells the browser to decompress it which now allows it to load with no changes to any of the game files.

As for why .htaccess, I am just more familiar with working through it (which isn't saying much), that is the only reason.

Calinou

@Binsk Indeed, modifying the .htaccess should be enough to make the Godot HTML5 shell use Brotli compression transparently. The web server will send the compressed files regardless of how the request was performed (synchronously, XMLHttpRequest, fetch(), ...).

.htaccess is fine at smaller scales, but keep in mind they can become a performance burden if you get a lot of traffic (due to the file structure being traversed on every request). This is one of the reasons why nginx doesn't support them. While you'll probably never have to worry about this, large websites generally don't use them to improve performance :)

mamankuat

Is there way to do this on 3.2.4rc ? Because xhr is already removed I think