HTMLミニファイア

HTMLミニファイについて

HTML はブラウザがページロードのたびに最初にダウンロード、解析、レンダリングするものです。HTML ドキュメントはレンダリングクリティカルパス上にあります、ブラウザは CSS、JS、または画像のフェッチを開始する前にそれらが何かを発見するのに十分な HTML を解析しなければなりません。転送および解析される HTML の各キロバイトは、Time to First Byte(TTFB)と Largest Contentful Paint(LCP)を遅らせます、Google がランキングシグナルとして使用する3つの Core Web Vitals のうち2つ。HTML ミニフィケーションは、ブラウザが見るものを変えずに、人間が読みやすさのために置いたバイト(タグ間のスペース、コメント、冗長な属性構文)を取り除きます。CDN エッジでの Gzip と Brotli 圧縮は重量の大部分を処理します、繰り返されるタグ名は美しく圧縮されます、しかしその上のミニフィケーションは依然として通常追加で 5 〜 15% のバイトを節約します、コンプレッサーが見ない(類似だが同一でない出力に圧縮される意味的に死んだバイト)を取り除くことによって。トラフィックの多いサイトの各ページリクエストで掛けるまで、これは小さく聞こえます、帯域幅の請求書と LCP 改善は両方とも規模で重要です。

節約がより大きい補完的なケースが2つあります:サーバーサイドレンダリングページ(Next.js、Remix、Hugo、Eleventy)では、HTML は各リクエストで新しく生成され、フレームワークテンプレートにはしばしば寛大なインデントと有用なコメントが含まれます、そして静的サイトビルドでは、ミニフィケーションがビルド時に1回実行され永遠に支払われます。現代の静的サイトジェネレーターはミニフィケーションをビルドオプションとして提供します:Hugo の --minify フラグは v0.47(2018年8月17日)に到来、Eleventy はプラグインを介して html-minifier-terser を使用、Next.js は SWC 経由で適用、Astro 3.0 はビルトインの HTML ミニフィケーションを搭載しオプションの astro-compress 統合をその上に重ねられます。手書き HTML やビルドパイプラインのないテンプレートには、このブラウザ内ミニファイアが最低抵抗のパスです。

ミニファイアが実際に行うこと

• 要素間スペースの折りたたみ。 タグ間のスペースと改行が削除されます、<p> Hello </p> は安全な場合 <p>Hello</p> になります。「安全な場合」修飾子が重要です:インライン要素(<span>、<a>、<em>)間のスペースはレンダリングされます(したがって「foo bar」はスパン間のスペースを保持しなければなりません)。ブロック要素(<div>、<p>)間のスペースは通常そうではありません。
• コメントの削除。 <!-- ... --> ブロックは削除されます。条件付きコメント(<!--[if IE]>...<![endif]-->)は存在する場合保持されます、Microsoft が Internet Explorer 10 以降条件付きコメント処理を取り除いたとはいえ、IE9 以前をサポートしないサイトでは安全に削除できます。
• 属性の簡素化。 属性引用符は値にスペース、>、=、または引用符のいずれも含まれない場合に削除されます:class="btn" は class=btn になります。ブール属性は簡素化されます:disabled="disabled"、checked="checked"、selected="selected"、readonly="readonly" は属性名のみになります。デフォルト属性値は削除されます:input の type="text"、script タグの type="text/javascript"、form の method="get"。
• void 要素は void のまま。 <br>、<hr>、<img>、<input>、<meta>、<link> は HTML5 で閉じタグを持ちません。XHTML 自己閉じスラッシュ(<br />)は削除されます:<br /> は <br> になります。
• 保護されたコンテンツ。 <pre>、<textarea>、<script>、<style> のコンテンツは、その空白が意味を持つので、そのまま保持されます。インライン JavaScript と CSS には独自のミニフィケーションパス(別ツール)が必要です。

空白が意味を持ち、噛み付くケース

HTML ミニフィケーションの最大のリスクは、空白が重要な場所で空白を折りたたむことです。周囲にスペースを持つインライン要素はそれらのスペースを目に見えるスペースとしてレンダリングします、foo <em>bar</em> baz は bar の周りにスペースを持っています、ミニファイアがそれらをゼロに折りたたむと、レンダリングされたテキストは間に分離なしで「foobarbaz」になります。保守的なミニファイアは常にテキストとインライン要素の間に単一スペースを保持します、攻撃的なミニファイア(conservativeCollapse: true 無効)はそれを取り除きます。CSS white-space: pre を持つ要素内のスペースもレンダリングされます、ミニファイアは CSS ルールを見ず誤って折りたたむかもしれません。条件付きコメント内で削除されたコメントは歴史的サイトで IE 固有の動作を壊す可能性があります。ビルドマーカーとして使用されるコメント(Vue の <!---> プレースホルダー、Angular の <!--bindings={...}-->)はミニフィケーションパスを生き延びなければなりません。現代のミニファイアはこれらのケースを処理します、純粋な regex アプローチ(このツール)は保守的です、保護されたブロック内の空白を保持しますが、完全なインライン対ブロック認識は持ちません。インライン要素が豊富な散文を持つ本番サイトには、デプロイ前にミニファイされた出力をテストしてください。

HTML5 の寛容な構文と XHTML が負けた理由

HTML5 の寛容性こそがミニフィケーションを可能にしているのです。XHTML(廃止された XML 構文バリアント)は厳密な構文を要求しました:すべてのタグが閉じる、すべての属性が引用される、すべての属性が小文字。XHTML 2.0 はその W3C 憲章が2009年7月2日に失効したときに放棄されました、HTML5 は2014年10月28日に W3C 勧告となりました。HTML5 は意図的に複数の同等の構文を許可します:<br> と <br/> は両方とも合法、input の type="text" はデフォルトで省略可能、値が単純な場合 class=btn の周りの引用符はオプションです。この寛容性こそミニファイアが利用するものです:すべての「オプション」構文要素はミニファイアが削除できるバイトです。トレードオフはミニファイされた HTML が人間にとって読みにくいことです(本番 HTML を View Source 以外で読む人はいないので問題ありません)。

HTML ミニフィケーションツールの簡単な歴史

Will Peavy の HTMLMinifier(willpeavy.com のツール、2000年代中盤から約2010年)は最も引用された初期のブラウザベース HTML ミニファイアでした、貼り付けられた HTML を取って削減バージョンを出力する単一ページツール。kangax の html-minifier(Juriy「kangax」Zaytsev、2010年3月9日彼の Perfection Kills ブログで発表)は最初の本格的な AST 認識 Node.js HTML ミニファイアでした、約10年間それは標準的な Node ツールで、webpack-html-plugin、Gulp パイプライン、ほとんどの静的サイトジェネレーターで使用されました。kangax の最後のリリースは2019年4月1日の v4.0.0 で、リポジトリは2021 年から事実上メンテナンスされていませんが正式にはアーカイブされていません。html-minifier-terser(Daniel Ruf がメンテナンスし、kangax、Alex Lam らが貢献)は kangax が止まったところを引き継いで活発にメンテナンスされているフォークです、これが webpack-html-plugin が今日デフォルトで使用するもので、ほとんどのビルドパイプラインが実行するものです。Wilson Lin の minify-html は大きな HTML で実質的に良いパフォーマンスを持つ Rust ミニファイアです。tdewolff/minify は Hugo と様々な Go 静的サイトジェネレーターで使用される Go の代替です。swc と Lightning CSS はそれぞれの Rust チェーンに HTML サポートを持ち、Next.js(Next.js 12 から Babel から SWC に移行)と Parcel でそれぞれ使用されます。html-minifier-next(2025年7月10日 GitHub issue #1165 経由で発表)は一部のプロジェクトが移行している kangax からの新しいフォークです。

HTML メール、別の世界

HTML メールは独自のミニフィケーション地雷原です。メールクライアントは悪名高く多様なパーサーを持ちます:Outlook 2007-2019 は Microsoft Word の HTML レンダリング(Web ではなくワードプロセッシング文書のために設計)を使用、Gmail は特定のサイズしきい値を超える <style> タグを削除、Apple Mail と Yahoo Mail は Web 標準により厳密に従います。Web HTML ミニフィケーションルールはすべてメールに適用されません:タグ間スペースを削除すると Outlook レイアウトが壊れる可能性、オプション引用符を削除すると一部のウェブメールパーサーが壊れる可能性、インライン <style> タグから type="text/css" 属性を削除すると Gmail が静かに無視するかもしれません。メールに「正しい」ミニフィケーションレベルは Web HTML より遥かに保守的です、通常コメントとスペース削除のみで他はそのまま。MJML や Foundation for Emails のようなメール固有ツールはコンパイル時に HTML メールの奇癖を処理します、Mailchimp テンプレートで一般的な Web HTML ミニファイアを実行すると Outlook で壊れる可能性が高いです。

AMP HTML とバリデータアプローチ

Google の Accelerated Mobile Pages プロジェクト(2015年10月7日にローンチ)は逆のアプローチを取ります:後でミニファイする代わりに、AMP は厳密な HTML サブセットを定義します、すでに設計上小さい。AMP は単一のインライン <style amp-custom> ブロック(2020年3月13日以降最大 75 KB、50 KB から増加)を要求し、amp-script 以外のほとんどの JavaScript を禁止し、すべてのルールを強制する厳密なバリデータを使用します。プロジェクトは AMP カルーセルからのランキング利益が削減された2021-2022年に優先順位が下げられ、多くのパブリッシャーが従来のミニファイ+最適化された HTML を支持して AMP を離れました、Google Discover トラフィックに依存するニュースパブリッシャーには依然として使用されています。一般的な HTML ミニファイアとの関連性:AMP は積極的にバイトに敏感で、意見の強く、検証され、小さな HTML 標準がどのように見えるかを示します。

正直な範囲、このツールが行うことと行わないこと

このツールは regex ベースの HTML ミニファイア、約30行の JavaScript です。それは <pre>、<textarea>、<script>、<style> のコンテンツをプレースホルダーにトークン化して以降の変換が破損できないようにし、<!-- ... --> コメントを削除(条件付きコメント <!--[if を保持するための先読みあり)、タグ間スペースを折りたたみ、値が安全な文字([a-zA-Z0-9_-]+)のみを含む場合に保守的に属性引用符を削除し、ハードコードされた15のブール属性のリストを簡素化します。このツールが行わないこと、本番ミニファイアが処理すること:オプション閉じタグ(</li>、</td> 多くのコンテキストで)を削除しない、それは HTML5 コンテンツモデルの理解を要求します、明示的にリストされたもの以外のデフォルト値で冗長な属性(input の type="text"、script の type="text/javascript")を削除しない、インライン <style> または <script> コンテンツをミニファイしない(専用の CSS Minifier と JS Minifier ツールをそのために使用してから貼り戻してください)、属性をアルファベット順にソートしない(gzip 圧縮をわずかに改善する可能性がある)、SVG 固有のミニフィケーションルールを処理しない。ビルドパイプラインを持つプロジェクトには、html-minifier-terser、minify-html、または swc を使用してください、ワンオフ HTML には、このツールが摩擦を取り除きます。

プライバシー、なぜブラウザのみがここで重要か

サーバーサイド HTML ミニファイアはソースを送信する必要があります。公開された Web ページには問題ありません(HTML はすでに公開)。内部管理ツールテンプレート、未公開の製品ページ、A/B バリアント HTML、またはパーソナライズされたコンテンツメールテンプレートには、サーバーサイドミニフィケーションは漏洩です。このツールは JavaScript を介してブラウザですべての変換を実行します、何もネットワークを横断しません。Minify をクリックする間に DevTools の Network タブを確認するか、ロード後にページをオフライン(機内モード)にしてもツールはまだ動作します。

よくある質問