WordPress/wordpress-playground

Make the bundle smaller than 20M

adamziel opened this issue · 6 comments

adamziel commented

The largest files to load for the initial paint are:

  • wp.data – 13M – the WordPress installation and all its php files
  • php-web.wasm – 6.2M – the WebAssembly PHP build
  • wp.js – 182k – the emscripten-generated JS loader for wp.data
  • php-web.js – 153k – the emscripten-generated JS loader for php-web.wasm
  • php-webworker.js – 153k – same as above, but for the webworker backend

Let's shrink them as much as possible.

Here's a few ideas:

  • Minify the variable names in the PHP files
  • Minify the JSON files
  • Remove non-english translations
  • Identify PHP dependencies to remove, e.g. libxml2 doesn't seem necessary
    • libxml2 was removed from the default build in db0a477
  • Compress the .data and .wasm files using brotli compression – props to @eliot-akira. Edit: Web servers take care of it and most browsers support the brotli compression!
  • #39 – done in #43 – reduced wp.data from 43M to 13M!
  • Minify the PHP files
  • Remove themes other than twentytwentytwo
  • Remove unminified JS and CSS files
  • Remove the .eot, .gif, .htaccess, .md, .mp4, .png, .scss, .stylelintignore, .svg, .ttf, .txt, .woff, and .woff2 files
adamziel commented

The file extensions seen inside of the bundle are:

; find ./ -type f  | awk -F '.' '{print $NF}' | sort | uniq
//wp-includes/sodium_compat/LICENSE
crt
css
eot
gif
htaccess
html
jpg
js
json
md
mp4
php
png
scss
stylelintignore
svg
ttf
txt
woff
woff2
xml
eliot-akira commented

Here's an idea I saw today in Golang's documentation about reducing the size of WASM files.

https://github.com/golang/go/wiki/WebAssembly#reducing-the-size-of-wasm-files

They recommend brotli compression, which produces the smallest file size compared to others (gzip or zopfli).

EDIT: Oops, never mind - this issue is about the file wp.data, which is not a WASM binary. Leaving the comment here anyway, the information could be useful elsewhere.

  • 👍1
adamziel commented

@eliot-akira I just played with brotli compression and the results are impressive:

  • php-web.wasm went from 6.2M to 1.5M (gzip gives 2.2M)
  • wp.data went from 13M to 3.3M (gzip gives 5.2M)

https://caniuse.com/brotli says it's supported on most major browsers – it shouldn't be that hard to serve brotli-compressed version of this files by default and offer a gzip fallback for unsupported browsers.

eliot-akira commented

Cool! Glad the information about brotli turned out to be useful. Just saw PR #43, amazing.

krishenriksen commented

Brotli compress/decompress of php.wasm + wp.data

php.wasm - 1.58 MB
wp.data - 1.44 MB

#66

It loads fast enough now for you to even remove the Progress Bar.

adamziel commented

We're down to 3MB - 4MB for both php.wasm and wp.data! The actual bundles are about 15MB at the moment, but the webservers apply Brotli compression which dramatically reduces the amount of data transferred over the wire. Furthermore, #66 explores Brotli at JavaScript level to support non-webserver environments and more aggressive compression levels.

I'm going to close this issue for now, feel free to reopen at any point if needed.