HTML圧縮ツール

そもそもなぜ HTML を圧縮するのか

人間のために書く HTML は、ブラウザには不要なもので満ちています。インデント、タグ間の改行、開発者のコメント、ときおりの空の属性などです。どれもページの描画には影響しませんが、すべてがバイトを増やします。そのバイトを訪問者ごと、ページ読み込みごとに掛け合わせると、無駄は実際の帯域と実際の待ち時間になります。圧縮（minify）は装飾的な文字を取り除くので、回線を流れるマークアップは、ブラウザが必要とするだけの最小サイズになり、それ以上は小さくなりません。

より小さな HTML は、意味のあるコンテンツの最初のバイトがより速く届くこと、ホスティングや CDN の帯域コストが下がること、遅い回線や従量制のモバイル接続でのより良い体験を意味します。高トラフィックのサイトでは節約が積み重なり、HTML はブラウザが最初にダウンロードするまさに最初のリソースなので、それを縮小するとページの描画開始が早まります。

圧縮ツールが取り除くもの

各オプションは、肥大化の特定の原因を狙います。「HTML コメントを削除」は、訪問者が決して目にしない開発者のメモやコメントアウトされたコードを削除します。「不要な空白を削除」は、可読性のためだけに存在するタグ間のスペース、タブ、改行の連続をまとめます。「空の属性を削除」は値のない属性を取り除き、「オプションの HTML タグを削除」は、HTML 仕様が省略を許している終了タグ、たとえば一部の文脈でのリスト項目の終了タグを省きます。

「真偽属性をまとめる」は小さいながらきれいな勝ちです。disabled や checked のような属性は HTML では値を必要としないので、disabled を文字列 disabled に設定して書き出した形は、属性名だけに短縮されます。これらの処理を合わせると、描画にまったく影響しない文字が取り除かれます。だからこそ、標準的な圧縮は整形式のページにとって安全なのです。

実際の例

4スペースのインデント、div の上の HTML コメント、checked を文字列 checked に設定して書いたチェックボックスの input を含むスニペットを思い浮かべてください。圧縮後、インデントと改行がまとまってタグが隣り合わせになり、コメントは完全に消え、チェックボックスは単に checked 属性だけを持つ input になります。ブラウザでの見た目も挙動もまったく同じですが、バイト数は減り、統計パネルが元のサイズ、圧縮後のサイズ、節約された割合を報告するので、自分のファイルでの効果を確認できます。

取り除いて安全なものと危険なもの

尊重すべき境界は、ページが実際に依存している空白です。pre 要素や textarea 要素の内部では、すべてのスペースと改行が意味を持ちます。そのまま描画されるので、まとめてしまうと出力が目に見えて変わってしまいます。CSS で white-space を書式保持に設定している要素にも同じ注意が当てはまります。コメントは通常は安全に削除できますが、レガシーな Internet Explorer の条件付きコメントや、テンプレートシステムやフレームワークがマーカーとして読むコメントのように、機能を担うものもあります。それらを削除すると挙動が壊れることがあります。

CSS と JavaScript の圧縮オプションが実験的と表示されているのには十分な理由があります。style タグや属性内のインライン CSS、あるいは script タグ内の JavaScript を圧縮することは、レイアウト用の空白を削るだけでなくコードを書き換えることを伴い、特殊なケースが存在します。これらを有効にした後は、特にスクリプトが特定の書式、コメントベースの指示、壊れやすい文字列処理に依存している場合は、必ずページをテストしてください。

圧縮と gzip の関係

サーバーはほとんどの場合 HTML を gzip や Brotli で圧縮して送るので、それなら minify は無意味だと考える人がときどきいます。そうではありません。gzip は繰り返しの多いテキストの圧縮に優れているため、minify した HTML の上で節約できる相対的な割合は生の HTML より小さくなりますが、2つの技術は積み重なります。minify してから gzip したものは、整形表示してから gzip したものよりも依然として小さくなります。minify は、ブラウザが展開後に解析しなければならないバイトも縮小し、キャッシュに保存されるサイズも減らします。

両者は補完し合う層だと考えてください。minify はブラウザに不要なコンテンツを取り除き、gzip や Brotli はその後、残ったものを転送のために圧縮します。両方を使うことで、端から端まで最小のペイロードが得られます。

ビルドパイプラインのどこに minify が収まるか

本番サイトでは、編集するソースは読みやすいまま、出荷する出力は小さいままになるよう、minify はビルドやデプロイの工程の一部として自動的に行われるのが理想です。最近のバンドラーや静的サイトジェネレーターのほとんどは HTML の minify 段階を備えており、このツールは、単発のファイル、手作りのランディングページ、メールテンプレート、これから埋め込むスニペットに対して同じことを手早く行う方法です。

検査や学習にも便利です。ページを貼り付けて実行し、削減率を読めば、マークアップがどれだけ贅肉を抱えているかを測れます。これは、過剰なコメントや深くインデントされたテンプレートのような、ソースで対処する価値のある癖を明らかにしてくれます。

避けるべきよくある間違い

最も損害の大きい間違いは、空白に依存するコンテンツを minify して、その後 pre ブロックやコードサンプル内のテキストが書式を失ったことに気づくことです。それらは手を付けないままにするか、慎重に確認してください。もう1つは、下流の何かが依存している条件付きコメントや指示コメントを取り除いてしまうことです。より見落としやすい罠は、minify したファイルを直接編集することです。いったん空白が消えるとコードは保守しにくくなるので、読みやすいソースを常に真実の源として保ち、minify 版は生成された成果物として扱いましょう。そして実験的な CSS や JS の処理を有効にするときはいつでも、出荷前に実際のページをテストしてください。