HTMLをminifyしてサイトの読み込み速度を上げる

こんにちは。Webサイトの表示速度を上げることは、ユーザーの離脱率低下のために重要だと考えられています。

特にLPのような直接的にユーザーの行動を促すページにおいては特に重要で、普通のサイトではやらないような細かいテクニックも使われることがあります。

今回はその中でもHTMLファイルのminify、圧縮を紹介しようと思います。

結論
解説
1. html-minifier-terserでminifyする
2. 設定ファイルを用意して管理する
まとめ：ご利用は計画的に

結論

最も簡単にやるには、以下のコマンドを実行すればminifyしたHTMLが出力されます。

mkdir -p dist && npx html-minifier-terser src/index.html \
  --collapse-boolean-attributes \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --use-short-doctype \
  --remove-attribute-quotes \
  --minify-css true \
  --minify-js true \
  -o dist/index.html

src/index.htmlがminifyしたいファイル、-o dist/index.htmlがminifyしたものをどこに出力するかを指定しています。distフォルダが存在しないとファイルが作れないのでmkdir -p distで先に作成しています。それ以外はオプションです。minifyしたいファイルや出力先を変更したい場合はここを変えてください。

コードの内容にもよりますがこれで3割程度の容量削減になります。手元のコードでころ74KBが52KBに減りました。

ただし、実際の読み込み速度への影響はかなり小さいと思われます。実際に確認してみてもせいぜい数ミリ秒〜十数ミリ秒の変化しかなく、ネットワーク状況でのブレの方がよっぽど大きいです。

また、オプションをよく理解して使わないとコードが壊れる可能性もあります。他に優先度の高い改善点を済ませてから慎重に行うのが良さそうです。

解説

HTMLのminifyにはいくつか方法があります。主に以下の3つ。

ライブラリを使って行う：html-minifier-terser ←今回はこれ
ブラウザで使えるツールを使う：https://kangax.github.io/html-minifier/
フレームワークもしくはバンドラーに任せる：Next.js, Astro, Viteなど

フレームワークなどを使っている場合は基本勝手にやってくれている、もしくは設定で行えることが多いのでそれに任せましょう。

頻度が少なければブラウザツールでもいいんですが、前述の通り近年はHTMLのminifyは下火のようでツールがあまりメンテナンスされていないようです。

ライブラリの方は色々調整が効きやすいのでおすすめかなと思い、この記事で解説していきます。

html-minifier-terserでminifyする

いくつかライブラリはあるんですが、人気やメンテナンス状況を鑑みてhtml-minifier-terserを紹介します。基本の使い方は以下のコマンド。

npx html-minifier-terser ./index.html  -o output.html

こうするとminifyが実行されてoutput.htmlが出力されます。

ただしオプションを指定しないとほぼ何も起こりません。いくつかおすすめのオプションがあるのでそちらをつけましょう。

–collapse-boolean-attributes

真偽値属性の値を省いて属性名だけにします。

<!-- Before -->
<input type="checkbox" checked="checked" />

<!-- After -->
<input type="checkbox" checked/>

–collapse-whitespace

文章ツリーに影響しない余分な空白・改行をまとめます。要するにHTMLの改行を除去し1行にするということで、一般的なminifyのイメージを実現しているのはこれです。

<!-- Before -->
<ul>
  <li>Sample</li>
</ul>

<!-- After -->
<ul><li>Sample</li></ul>

–remove-comments

コメントを削除します。

<a href="example.com"> <!-- hrefは変更の可能性 -->
  リンク 
</a>

↓

<a href="example.com">
  リンク 
</a>

–remove-redundant-attributes

デフォルトの値と一致する属性の記述を削除します。

<!-- Before -->
<form action="" method="get">
  <input type="text" />
</form>

<!-- After -->
<form action="">
  <input>
</form>

–use-short-doctype

今時はあまり見かけませんが、古いHTMLなどでのDOCTYPE宣言をHTML5に準拠させます。

<!-- Before -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- After -->
<!doctype html>

–remove-attribute-quotes

可能な場合に属性値を囲う引用符を削除します。

<!-- Before -->
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <body></body>
</html>

<!-- After -->
<html lang=ja>
  <head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <body></body>
</html>

–minify-css true

HTML上のstyleタグ、もしくは各要素のstyle属性内のCSSをminifyします。内部的にはclean-cssというライブラリを使っているようです。

<!-- Before -->
<style>
  body * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
</style>

<!-- After -->
<style>body *{box-sizing:border-box;margin:0;padding:0}</style>

今回の例では単にtrueを指定していますが、clean-cssの設定項目を渡すことで細かく制御可能です。

–minify-js true

HTML内のscriptタグ、もしくは各要素のイベント属性内のJavaScriptをminifyします。内部的にはterserというライブラリを使っているようです。

<!-- Before -->
<script>
  const a = 1
  const b = 2
  const c = a + b
  console.log(c)
</script>

<!-- After -->
<script>const a=1,b=2,c=3;console.log(3)</script>

コードを見るとわかるように、内容を解釈して処理内容を変える挙動をする場合があるようです。

今回の例では単にtrueを指定していますが、terserの設定項目を渡すことで細かく制御可能です。

これらを丸っと設定したコマンドがこちら。こちらをコピペしてファイル指定の部分だけ自分の環境に合わせてもらえればOKです。

mkdir -p dist && npx html-minifier-terser src/index.html \
  --collapse-boolean-attributes \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --use-short-doctype \
  --remove-attribute-quotes \
  --minify-css true \
  --minify-js true \
  -o dist/index.html

設定ファイルを用意して管理する

毎回上記コマンドを使うのでもいいんですが、設定ファイルを用意すると管理面やより複雑な設定がしたい時に便利です。次のようなjsonファイルを作ってください。

{
  "collapseBooleanAttributes": true,
  "collapseWhitespace": true,
  "removeComments": true,
  "removeRedundantAttributes": true,
  "useShortDoctype": true,
  "removeAttributeQuotes": true,
  "minifyCSS": true,
  "minifyJS": true
}

コマンドの場合はオプション名をハイフン繋ぎ（ケバブケース）で書きますが、設定ファイルの場合は大文字繋ぎ（キャメルケース）で書くので注意してください。

この時は以下のコマンドを使います。-cオプションで設定ファイルを指定してください。

npx html-minifier-terser src/index.html \
  -o dist/index.html \
  -c config.json

まとめ：ご利用は計画的に

ということでHTMLのminify方法でした。まあ正直リスクリターンが釣り合ってるか怪しい部分もありますので、よく考えて行うのが良いでしょう。

もっと効果が高く安全なパフォーマンス改善ポイントもたくさんあります。そちらを優先して対応し、余力があったら行うくらいがいいのではないでしょうか。