完全無料

HTML を ミニファイ

ブラウザで即座にHTMLコードを圧縮・最小化。コメント削除、空白圧縮でファイルサイズを削減。無料・プライベート。

HTMLファイルをここにドラッグ&ドロップ

.htmlおよび.htmファイルに対応。または上にHTMLを貼り付けてください。

または

このツールについて

HTML 縮小化では、Web ページのソースから不要な文字 (タグ間の空白、コメント、冗長な引用符、オプションの終了タグ) を取り除き、ページのレンダリング方法を変更せずにファイル サイズを削減します。ページごとの節約効果はわずか (通常 10 ~ 30%) ですが、特に静的サイトや動的圧縮なしで提供されるページの場合、多くのリクエストにまたがって節約されます。

このミニファイアは、ブロックレベルの要素間の空白を削除し、重要でないテキスト内の一連の空白を折りたたみ、HTML コメント (IE の条件付きコメントを除く) を削除し、HTML5 仕様で許可されている場合は冗長な属性の引用符を削除し、仕様で許可されている場合はオプションの終了タグ (</p>、</li>) を削除します。結果は、どのブラウザでもソースと同じように表示されます。

縮小化は、サーバー レベルで gzip または Brotli 圧縮と組み合わせると最も役立ちます。圧縮によって縮小化による節約効果の多くはすでに失われていますが、この 2 つを組み合わせても、特に帯域幅のコストが重要となるトラフィック量の多いサイトでは圧縮単独よりも優れています。

HTML を縮小する理由

HTML が小さいほど、特に低速の接続やモバイル ネットワークでの読み込みが速くなります。ページの重みは、Core Web Vitals に直接影響します。サーバーが解析に返す HTML が少なくなると、最大コンテンツフル ペイントと最初のバイトまでの時間の両方が向上します。 SEO ランキングが Core Web Vitals スコアに依存するサイトの場合、縮小は目に見える改善です。

縮小された HTML は、帯域幅コストも大規模に削減します。 1 日に 100 万ページを処理するサイトでは、1 ページあたり 10 KB の送信量が節約され、毎日 10 GB の送信量が節約されます。データ転送によって課金される CDN から提供される静的サイトの場合、その影響はさらに大きくなります。

使い方

HTML を貼り付けて、縮小版を取得します。

  1. HTML入力を追加: HTML ソースを入力領域に貼り付けるか、.html ファイルをドロップします。ミニファイアは、有効な HTML5 マークアップを受け入れます。
  2. オプションを選択してください: デフォルトではコメントが削除され、空白が折りたたまれます。特定の要素を保持する必要がある場合は、個々の変換を無効にすることができます (ドキュメント用にコメントを保持するなど)。
  3. 縮小する: ミニファイアは HTML トークン ストリームをたどって、有効な各変換を適用します。出力は、機能的には同じ HTML ですが、サイズが縮小されます。
  4. コピーまたはダウンロード: 結果を提供される HTML として使用します。デプロイする前に、ターゲット ブラウザでページが正しくレンダリングされることを確認してください。

一般的な使用例

技術的な詳細

ミニファイアは HTML トークンをトークンごとに処理します。ブロックレベル要素間の空白 (<div>、<p>、<ul>) はレンダリングに影響しないため、削除されます。インライン コンテキスト (<span>、<a>、テキスト コンテンツ) 内の空白は、レンダリングに影響を与える可能性があるため、保持されます。

デフォルトではコメントは削除されますが、条件付きコメント (<!--[if IE]>) は保持されます。 HTML5 パーサーが許可する場合、属性の引用符は削除されます。スペースや特殊文字を含まない単一単語の属性値では引用符を省略できます。

HTML5 仕様に従って、オプションの終了タグは省略されます: </p>、</li>、</td>、および他のいくつかのタグは、終了を暗示する兄弟が後に続く場合は省略できます。これは読みにくいですが、ブラウザが同様に解析する有効な HTML5 です。

ベストプラクティス

よくある質問

HTML 縮小では何が削除されますか?
タグ間の不要な空白、HTML コメント (<!-- -->)、オプションの終了タグ (</li>、</p>、</td>)、デフォルトの属性値 (入力の type="text")、およびブール属性値 (disabled="disabled" → disabled)。
縮小するとページが壊れる可能性がありますか?
まれですが、CSS がインライン要素間の空白に依存している場合、または JavaScript が innerHTML 比較を使用している場合に発生する可能性があります。縮小された出力を常にテストしてください。このツールはデフォルトで保守的な設定を使用します。
Next.js のようなフレームワークを使用する場合、HTML を縮小する必要がありますか?
最新のフレームワーク (Next.js、Nuxt、Angular) のほとんどは、運用ビルドで HTML を自動的に縮小します。このツールは、静的 HTML ファイル、電子メール テンプレート、およびビルド システムのないプロジェクトに役立ちます。
これによりインライン CSS と JavaScript も縮小されますか?
このツールは HTML 構造に焦点を当てています。インラインの <style> および <script> の内容はそのまま保持されます。これらの場合、最適な結果を得るために、専用の CSS および JavaScript ミニファイアーを使用してください。
オプションの終了タグは削除しても安全ですか?
HTML5 仕様に従ってはいですが、結果は読みにくくなります。一部のチームは、サイズの若干のペナルティを受け入れて、明確にするためにこの変換を無効にしています。
私の HTML はサーバーにアップロードされていますか?
いいえ。ミニファイアーはブラウザーで実行されます。
これを html-minifier-terser と比較するとどうなるでしょうか?
html-minifier-terser は標準的な Node.js HTML ミニファイアーであり、もう少し積極的な結果を生成します。このツールは、ビルド設定なしでブラウザ側で使用するための同じ変換をカバーします。
常に縮小化する必要がありますか?それとも選択的に縮小化する必要がありますか?
常に生産用です。バージョン管理内のソースコードには決して使用しません。ソース内の読みやすい HTML はメンテナンスのために不可欠です。