HTML圧縮ツール

HTMLミニファイとは、ブラウザがページをレンダリングするために不要な文字——コメント、改行、インデント、タグ間の空白——をページの見た目や動作を変えずに削除することです。例えば、'<ul>\n <li>一</li>\n <li>二</li>\n</ul>'（約43バイト）は'<ul><li>一</li><li>二</li></ul>'（33バイト）にミニファイされます。訪問者に表示されるリストは全く同じです。1つのスニペットでは小さな節約に思えますが、インデントとCMS生成マークアップで満ちた実際のHTMLページは、生のバイト数で15〜25%縮小されることが多く、サーバーのgzip圧縮と組み合わせるとさらに効果が大きくなります。

HTMLが小さくなればダウンロードするバイト数が減り、ブラウザが解析する量も減るため、ページの読み込みが速くなります——特にモバイルではFirst Contentful Paint（FCP）とコアウェブバイタルのスコアが向上します。GoogleのPageSpeed Insightsはミニファイされていないhtmlを標準的なパフォーマンス問題として指摘し、推奨事項に含めています。インデントと開発者コメントで満ちた手書きやCMS生成のページで最も効果が大きいです。削減した1キロバイトは訪問者が取得する必要がない1キロバイトであり、帯域幅が限られる低速のモバイル接続で最も重要です。

コメント（<!-- … -->）、連続する空白、タグ間のインデントと改行、ブロックレベル要素間のギャップが削除されます。ミニファイアは真偽値属性も折りたたみます（'disabled="disabled"'が単に'disabled'になります）。また、オプションで</li>や</td>などの省略可能な閉じタグを削除することもできます。条件付きコメント（<!--[if IE]>）は古いIEターゲティングに引き続き関係するため、常に保持されます。<pre>、<textarea>、<script>、<style>の内容は決して変更されません——これらの要素内の空白は意味を持ち、変更するとページが壊れる可能性があります。

はい、HTMLがすでにビルドステップを通過していない場合に効果があります。手書きのページ、CMSからエクスポートされたページ、WordPressテーマで組み立てられたページ、HTMLメール、インラインの<style>/<script>ブロックはすべて、ミニファイが無料で削除するインデントとコメントとともに配信されています。ViteやwebpackなどのバンドラーがすでにOUTPUTをミニファイしている場合、それらのファイルに2回目のパスは必要ありません——しかし実際の多くのHTMLはバンドラーを通過しません。JekyllやHugoなどの静的サイトビルダーはHTMLミニファイアをオプションのプラグインとして含んでおり、WP Rocket、LiteSpeed Cache、AutoptimizeなどのWordPressプラグインはすべてのページレンダリングに対して自動的に行います。

生のテキストとして、ミニファイでは通常10〜25%節約されます。30KBの手書きページは多くの場合約24KBに下がり、'<ul>\n <li>一</li>\n <li>二</li>\n</ul>'（43バイト）のような小さなスニペットは33バイトに縮小されます——約23%小さくなります。サーバーが結果をgzipすると、組み合わせた削減は通常70〜85%になります。このツールはミニファイされたサイズとgzip推定値を並べて表示するため、両方の数値を一度に確認できます。gzip推定値はサーバーではなくブラウザ内でローカルに計算されるため、何もアップロードせずに実際の組み合わせ節約を確認できます。

安全に行われた場合は壊れません。このツールはその方法で動作します。空白が意味を持つ<pre>、<textarea>、<script>、<style>の内容には決して触れず、リンクや<span>などのインライン要素間の単一スペースを保持します——'a <a href="/x">リンク</a> こちら'が'aリンクこちら'と詰まって表示されることはありません。一部の手早いオンラインミニファイアはこのスペースを圧縮してレンダリングやレイアウトを微妙に変更します。最も人気のあるNode.js HTMLミニファイライブラリであるKangaxのHTMLMinifierは、同じ理由で同様のデフォルト安全アプローチを使用しています。ミニファイ後にレンダリングの違いが見られる場合は、ビューティファイモードを使用して元の構造を復元してください。

上部のトグルでビューティファイモードに切り替えて、ミニファイされたHTMLを貼り付けてください。ツールはマークアップを再インデントしてタグをそれぞれの行に配置し、'<ul><li>一</li><li>二</li></ul>'を読みやすくフォーマットされたコードに戻します。プロジェクトのスタイルに合わせて2スペース、4スペース、タブのインデントを選択できます。これはミニファイの逆の操作です——本番環境で見つけたミニファイされたページの検査、ビルドツールに圧縮されたCMSテンプレートの読み取り、完全なタグ構造を明確に表示してレイアウトをデバッグする際に役立ちます。

ミニファイはソーステキスト自体を縮小します——物理的に小さい.htmlファイルを配信します。GzipとBrotliは転送中にバイトを圧縮し、ブラウザが到着時に透過的に解凍します。2つは組み合わせられます。まずソースをミニファイし、次にサーバーにgzip圧縮させてください。Googleのweb.devは両方のステップを実施することを推奨しています——ミニファイはgzipが完全に圧縮できないバイトを排除し、gzipはミニファイが残す繰り返しパターンを処理します。そのためこのツールはミニファイされたバイト数とgzip推定値の両方を表示し、デプロイ前後の完全な組み合わせ利益を確認できるようにしています。

ミニファイはHTMLを小さくしながらも有効で、ビューティファイすれば完全に読める状態を保ちます——ブラウザが無視する文字を削除するだけです。難読化はコードを意図的にスクランブルまたは書き換えて理解やコピーを困難にします。HTMLをミニファイしてもクラス、ID、コンテンツの名前が変わったり意味が変わったりすることはありません。可逆的でロスレスな操作であり、難読化はそうではありません。HTMLソースを人々が読めないようにしたい場合（ブラウザはどのみちソース表示で公開しますが）、ミニファイだけでは役立ちません——ミニファイアの範囲外の追加技術が必要になります。

はい、1回のパスで可能です。「インラインCSSをミニファイ」をオンのままにしておくと、すべての<style>ブロックの内容が圧縮されます——コメントと空白が削除され、文字列、url()、calc()が保護されます。「インラインJSをミニファイ」は<script>ブロックを保守的に整形します。コメントを削除して空白を圧縮しますが、自動セミコlon挿入（ASI）がコードを壊すことがないよう改行は保持されます。JSONやテンプレートなど非JavaScriptタイプとしてマークされたスクリプトはそのままにされます。このアプローチは、CSSのみのミニファイアとJSのみのミニファイアを順番に実行するよりも優れています。それぞれを混在したHTMLファイルに適用するとコンテキストを誤読する可能性があるためです。

このツールでは安全です——100%ブラウザ内でJavaScriptを使用して動作するためです。HTMLがアップロード、ログ記録、保存されることは一切ありません。そのため未公開ページ、クライアントの作業、個人データを含むマークアップもすべてデバイス上に留まります。ネットワーク接続を切断することで確認できます。サーバーが関与しないため、ミニファイアはオフラインでも動作します。対照的に、HTMLMinifier.comとMinifier.orgはどちらも処理のためにHTMLをリモートサーバーに送信します。Willpeavy.comのHTMLミニファイアもサーバーへの通信を行います。機密プロジェクトでは、ブラウザローカルの処理が唯一の安全な選択肢です。

2つの方法があります。1回限りの場合は、レンダリングされたページソース（またはテンプレートの出力）をコピーしてここに貼り付けてミニファイしてください。すべてのページを自動的に行うには、キャッシュまたは最適化プラグインでHTMLをその場でミニファイできます。WP Rocket、W3 Total Cache、LiteSpeed Cache、AutoptimizeはすべてHTMLミニファイの設定を含んでいます。WP RocketとLiteSpeed Cacheは、動的コンテンツが多い複雑なテーマに最も信頼性が高いです。このツールは、Elementorのカスタムセクションやカスタムフィールドテンプレートなど、それらのプラグインが自動的にカバーしないテーマスニペット、カスタムブロック、HTMLメールテンプレートに最適です。

HTMLMinifier.comとMinifier.orgは人気のあるオンラインHTMLミニファイツールですが、どちらも処理のためにHTMLをリモートサーバーに送信します。つまり、未公開ページ、フォーム内のパスワード、非公開のクライアント作業を含むマークアップがデバイスから離れます。Minifycode.comも同じ制限を持つサーバーサイドツールです。このツールはブラウザ内ですべてをローカルで処理するため、何もアップロードされません。機能面では、同じインターフェースに双方向のビューティファイア、リアルタイムのgzip推定、インラインCSS/JSミニファイが追加されています——すべてページのリロードやサーバーの通信なしに動作します。

はい、モバイルでも完全に動作します——クリップボードからHTMLを貼り付け、ミニファイ結果を即座に確認し、コピーして戻すことができます。インターフェースは小さな画面に適応します。iOS版SafariとAndroid版Chromeでテスト済みです。モバイルでの一般的なユースケースのひとつは、変更をコミットする前にページテンプレートがどれだけ小さくなるかを確認することです——モバイルブラウザのソース表示からHTMLを貼り付けてその場で節約を確認できます。アプリのダウンロード、登録、モバイルでの利用制限はありません。ページが読み込まれた後はネットワーク接続なしでも動作します。