データ

HTML 圧縮

訪問者がダウンロードする HTML の 1 バイトは、ブラウザーがページを組み立てる前に待つ 1 バイトです。そして多くのマークアップには、ビルド工程が片付けるべき無駄——インデント、コメント、タグ間の空白——が残っています。この圧縮ツールは一度の貼り付けでそれらを取り除きます。実際のページにはスタイルやスクリプトが埋め込まれているので、<style> 内の CSS と <script> 内の JavaScript も縮小し、文書全体が小さくなります。元のサイズ・圧縮後・gzip を並べて表示するので、どれだけ減ったかが一目で分かります。安全な範囲でのみ空白を畳み、描画を変えることはありません。すべてブラウザー内で完結します。

  • タグ間の空白とコメントを畳む——ページの描画を変えない範囲でのみ
  • マークアップだけでなく、埋め込みの <style> 内 CSS と <script> 内 JavaScript も縮小
  • 元のサイズ・圧縮後・gzip を並べて表示し、サーバーが実際に送る大きさで結果を判断
  • すべてブラウザー内で完結し、貼り付けたマークアップ（未公開のものも含む）は端末に留まる
工具/HTML 圧縮
815 B
削減 0%
圧縮エンジンを読み込み中
8%
圧縮エンジンは初回のみダウンロードし、訪問中はキャッシュされます。
オプション

概要

圧縮ツールが使う価値を持つのは、出力を信頼でき、削減を確認できるときだけです。このツールはその両方を中心に据えています。配信できる安全な圧縮と、やる価値があったと示す数字です。

  1. 01

    マークアップを安全に畳む

    タグ間の空白と改行は取り除きますが、空白に意味がある箇所はそのままにします。pre や textarea 内のテキスト、レイアウトに影響するインライン要素間の空きは保たれるので、描画されるページは変わりません。

  2. 02

    埋め込みの CSS と JS も圧縮

    実際のページはマークアップだけということはほとんどありません。すべての <style> 内の CSS と、すべての <script> 内の JavaScript を同じ工程で圧縮するので、別ツールに通してバイトを絞る必要はありません。

  3. 03

    コメントは削除、条件付きは保持

    HTML コメントは描画に現れないので既定で削除しますが、意味を持つ条件付きコメントは保持します。デバッグで必要なときは、ひとつのトグルですべてのコメントを残せます。

  4. 04

    信頼できるサイズの内訳

    元のサイズ・圧縮後・gzip が入力に合わせて更新され、その隣に正確な削減率が出ます。回線を実際に流れる大きさに対応するのは gzip の数値です。

  5. 05

    自分で決められるオプション

    空白は常に畳まれますが、埋め込みの CSS と JS を圧縮するか、コメントを残すかはそれぞれトグルなので、どこまで圧縮するかを自分で決められます。

  6. 06

    コピー・ダウンロード・アップロード

    クリップボードから貼り付けたり、ディスクの .html ファイルを開いたりして、結果をコピーまたは min.html として保存できます。一連の処理は数秒で、サーバーには触れません。

使い方

読みやすいページを、削減を常に目の前に見ながら、数ステップで本番向けの最小版にします。

  1. 01

    HTML を入力パネルに貼り付けるか、「アップロード」でディスクの .html ファイルを直接開きます。

  2. 02

    オプションを選びます。「CSS を圧縮」「JS を圧縮」をオンのままにして埋め込みコードも縮小し、必要なときだけコメントを残します。

  3. 03

    出力の横の内訳で削減を確認します。元のサイズ・圧縮後・gzip と、削減率が表示されます。

  4. 04

    圧縮された HTML をコピーするか min.html としてダウンロードし、本番のマークアップを配信するページやビルド工程に組み込みます。

詳細

出力を安心して配信でき、すぐ信頼できるものにする細部。

  • html-minifier-terser を基盤にしており、マークアップを解析し、埋め込みの CSS と JS を成熟した最適化器で圧縮します。当て推量のテキスト置換ではありません。
  • gzip サイズはブラウザー内蔵の圧縮で測るので、実際のサーバーが送る大きさを反映します。
  • 入力中もオプション変更時も圧縮が走り、結果が更新される前にボタンを押す必要はありません。
  • 解析エラーはその場でメッセージとともに表示され、壊れた出力や空の出力を黙って出すことはありません。
  • アップロードもログ記録もしません。貼り付けた HTML（未公開のものも含む）はブラウザー内に留まり、タブを閉じると消えます。

活用シーン

HTML を本質まで削ることが報われる場面。

  1. より速いページの配信

    小さいマークアップは早くブラウザーに届き、解析のブロックを早く解くので、First Contentful Paint や検索エンジンが重視する Core Web Vitals に効きます。

  2. バンドラーのないビルド工程

    静的サイト・ランディングページ・メールテンプレートでバンドラーを使っていないとき、HTML をここに貼れば、パイプラインと同じ圧縮が得られます。

  3. クリティカルパス文書のインライン化

    CSS と JS をインラインにした自己完結の HTML ファイルを配信するとき、三つをまとめて圧縮することが、無駄のないペイロードと肥大したペイロードの差になります。

  4. 生成されたマークアップの削減

    テンプレートエンジン・CMS・メールビルダーの出力はしばしば未圧縮です。ここに通せば、ユーザーに届く前にバイトを取り戻せます。

関連情報

縮めるのではなく読みたいですか？HTML フォーマッター は圧縮されたマークアップを読める文書へ戻し、スタイルシート単体ならCSS 圧縮 が同じやり方で CSS を圧縮します。

HTML の圧縮が実際に行うこと

圧縮は難読化ではなく、gzip 圧縮とも違います。描画結果を同じに保ちながら、ブラウザーが必要としない文字を取り除きます。何が消え、なぜ安全なのかを説明します。

  1. タグ間の空白

    マークアップを読みやすくするインデントや改行は、ブラウザーがほぼ無視するので畳まれます。例外は pre と textarea 内の空白、そしてレイアウトに影響しうるインライン要素間のひとつの空白で、これらは保たれます。

  2. コメント

    HTML コメントは人間向けで描画されないので、すべて削除します。特定のブラウザーを対象とする条件付きコメントは例外で、保持されます。

  3. 埋め込みのコード

    スタイルやスクリプトは HTML の中にあるので、マークアップだけを扱う圧縮ツールでは重さの大半が残ってしまいます。<style> 内の CSS と <script> 内の JS を圧縮することが、実際のページを本当に小さくする鍵です。

  4. 可逆ではないが、非破壊

    圧縮は、ブラウザーが同じページを描画するのに必要としないものだけを取り除きます。難読化ではありません。マークアップはまったく同じように動き、ただ人が読むための体裁ではなくなるだけです。

  5. gzip が重要な数字である理由

    サーバーは HTML を gzip や brotli で圧縮してから送り、それらはすでに繰り返しの空白を畳みます。圧縮はそれでも有効で、伝送圧縮にできないことを取り除き、圧縮器により綺麗な入力を渡します。ただし削減は原バイトではなく gzip サイズで判断すべきです。

  6. 本番は圧縮、ソースは読める状態で

    圧縮された HTML は編集が大変なので、リポジトリではなくビルド成果物に属します。読めるテンプレートをソースとして保ち、配信直前の最後の工程として圧縮します。

使い方のヒント

圧縮した HTML を小さく、かつ意外性なく保つための習慣。

  • 圧縮はビルドの最後の工程にして、その成果物を配信します。圧縮された HTML を手で編集したり、真実のソースとしてコミットしたりしないでください。
  • 削減は gzip サイズで判断します。サーバーが実際に転送するのはそれだからです。原バイトの大きな削減も、圧縮後にはわずかになることがあります。
  • 本番では「CSS を圧縮」「JS を圧縮」をオンのままにして、埋め込みコードをマークアップと一緒に圧縮し、ファイルで最も重い部分として残さないようにします。
  • 圧縮したファイルは gzip または brotli を有効にし、適切なキャッシュ期間を付けて配信します。圧縮と伝送圧縮は積み重なるもので、置き換えるものではありません。
  • 空白に敏感な箇所に注意します。レイアウトがインライン要素間の空白に依存しているなら、その空白には意味があるので、圧縮後も正しく見えるか確認してください。

制限事項

このツールが行うことと、他の工程に委ねること。

  • 単一の HTML 文書と、その中に埋め込まれた CSS・JS を圧縮します。リンクされたスタイルシート・スクリプト・画像は取得しません。
  • 現代の JS をトランスパイルしたり、CSS にベンダープレフィックスを付けたり、古いブラウザー向けに降格したりはしません。それはビルドツールに任せてください。
  • Handlebars・Jinja・ERB などのテンプレート言語はそれ単体では HTML ではありません。テンプレートのソースではなく、描画後の出力を圧縮してください。
  • 構文エラーは圧縮を止めて報告し、回避はしないので、ひどく壊れた入力が部分的な出力を出すことはありません。

よくある質問

HTML の圧縮、それが何を変えるか、いつ使うかについてのよくある質問。

圧縮でページの描画は変わりますか？

いいえ。圧縮はブラウザーが必要としない文字、たとえばタグ間の空白や描画されないコメントだけを取り除きます。レイアウトに影響する空白（pre 内のテキストやインライン要素間の空き）は保たれるので、描画されるページは前後で同じに見えます。

HTML 内の CSS や JavaScript も圧縮しますか？

はい。すべての <style> 内の CSS と、すべての <script> 内の JavaScript がマークアップと一緒に圧縮され、それぞれトグルでオフにできます。実際のページでは埋め込みコードが重さの大半を占めることが多く、削減の多くはここから来ます。

圧縮と gzip の違いは何ですか？

両者は協調します。圧縮は HTML そのものを編集し、圧縮器には不要と分からない内容を取り除きます。gzip や brotli は送る内容を伝送時に圧縮し、回線上で繰り返しを畳みます。両方が必要です。まず圧縮して最も綺麗な入力を作り、次にサーバーに伝送圧縮させます。本当の削減はここに出る gzip の数値で判断します。

HTML はどれくらい小さくなりますか？

ソースの書き方によります。体裁がゆったりして、インラインのスタイルやスクリプトが大きいマークアップは大幅に縮み、すでに引き締まったページは削減が少なめです。gzip を考慮すると割合は下がります。圧縮がすでに空白の多くを取り戻しているからで、これが gzip の数値の方が正直な理由です。

圧縮した HTML をリポジトリにコミットすべきですか？

いいえ。圧縮した HTML はビルド成果物であり、ソースではありません。あなたや仲間が編集する読めるテンプレートや文書をコミットし、圧縮ファイルは配信直前の最後の工程で生成します。圧縮出力をコミットすると、レビューは読みにくく、マージは苦しくなります。

Handlebars や Jinja のようなテンプレートファイルを圧縮できますか？

直接はできません。このツールが圧縮するのはブラウザーが受け取る標準 HTML です。{{ }} や {% %} のようなテンプレート構文はそれ単体では正しい HTML ではないので、描画後の出力を圧縮するか、テンプレート言語向けのツールを使ってください。

HTML はどこかにアップロードされますか？

いいえ。すべてブラウザー内で動きます。貼り付けた HTML、アップロードしたファイル、結果はローカルで処理され、送信も保存もされず、タブを閉じた瞬間に消えます。私的・未公開のマークアップも安全です。

関連ツール

データと整形のツールキットの残りも続けてどうぞ。