brotliやgzipとHTML最小化の効果比較

html-minifierはコマンドラインでもHTML最小化ができる非常に便利なツールです。 しかしHTTPアクセス時はbrotliやgizpなどのデータ圧縮のほうが遥かに効果があるはずなので、どこまで効果があるのかを改めて確認してみようと思いました。

以下は今回の検証に利用したhtml-minifierのオプションで、HTMLにエラーが出ない状態で高圧縮をかけられます。どれくらい効果があるでしょうか。

html-minifier #{from} \
  --collapse-boolean-attributes \
  --collapse-whitespace \
  --remove-attribute-quotes \
  --remove-comments \
  --remove-empty-attributes \
  --remove-redundant-attributes \
  --remove-script-type-attributes \
  --remove-style-link-type-attributes \
  --html5 \
  --use-short-doctype \
  --minify-js \
  --minify-css > #{to}

やはりデータ圧縮のほうが遥かに効果があります。brotliとgzipではかなり差がありますが、データ圧縮をかければHTMLの記述効率は通信量に影響してくるデータサイズにさほど影響しません。

original:                 17172
html-minifier:            15652 ( -8.8%)
original + gzip 9:         4948 (-71.2%)
html-minifier + gzip 9:    4729 (-72.5%)
original + brotli 10:      3977 (-76.8%)
html-minifier + brotli 10: 3881 (-77.3%)

html-minifierは結構実行時間が掛かるので、大量ページに適用するのは辛いです。少しでも通信量を削減したいファイルや、静的ファイルにのみ適用するのが良いでしょう。