データ

HTML 圧縮

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

917 B
削減 0%
圧縮エンジンを読み込み中
8%
圧縮エンジンは初回のみダウンロードし、訪問中はキャッシュされます。
強度
オプション

概要

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

  1. 01

    3 段階の圧縮強度

    「安全」は連続する空白を 1 つに畳むだけで、タグも属性も書き換えません。CSS で display: inline にした要素があっても描画は同じです。「標準」はタグ間の空白と、HTML5 が既定とする属性を落とします。「最大」は既定値の属性や空の属性を削除し、doctype を短縮し、属性とクラス名を並べ替えて、ファイルがより縮むようにします。属性の引用符はこの段階でも残します。外しても gzip 後の削減は 0.5% ほどで、代わりに一部のフォーマッターが開けないマークアップになるからです。

  2. 02

    埋め込みの CSS と JS も圧縮

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

  3. 03

    黙って壊すことはない

    CSS エンジンはネスト規則を削除し、コロンの抜けた宣言をセレクターと読んで次の規則まで飲み込みます。どちらも何も言わずに起こります。ここでは各 <style> ブロックを先に検査し、通せば壊れると分かったブロックは圧縮せず、規則をそのまま残して出力の下に一覧します。

  4. 04

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

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

  5. 05

    信頼できるサイズの内訳

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

  6. 06

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

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

使い方

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

  1. 01

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

  2. 02

    強度を選びます。ふだんは「標準」、レイアウトが空きの取り方に依存するときは「安全」、最後の 1 バイトまで削りたいときは「最大」です。

  3. 03

    「CSS を圧縮」「JS を圧縮」をオンのままにして埋め込みコードも縮小し、必要なときだけコメントを残し、スキップとして挙がった項目に目を通します。

  4. 04

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

詳細

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

  • html-minifier-terser を基盤にしており、マークアップを解析し、埋め込みの CSS と JS を成熟した最適化器で圧縮します。当て推量のテキスト置換ではありません。
  • CSS エンジンには @import を追わないよう明示的に指示しています。URL で参照したスタイルシートは参照のままで、ブラウザーからリクエストが出ることはありません。
  • 各 <style> ブロックはエンジンに渡す前に検査するので、ネストした CSS や読めない宣言は報告され、そのまま保たれます。黙って消えることはありません。
  • 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 を圧縮することが、実際のページを本当に小さくする鍵です。そして圧縮ツールが誤りやすいのもここです。短くする前に、さらに 2 つの言語を解析しなければならないからです。

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

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

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

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

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

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

使い方のヒント

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

  • 圧縮はビルドの最後の工程にして、その成果物を配信します。圧縮された HTML を手で編集したり、真実のソースとしてコミットしたりしないでください。
  • 削減は gzip サイズで判断します。サーバーが実際に転送するのはそれだからです。原バイトの大きな削減も、圧縮後にはわずかになることがあります。
  • 配信前にスキップ一覧に目を通します。そこに挙がったものは貼り付けたとおりのバイト列で、安全ではありますが、その分は圧縮されていないということでもあります。
  • 圧縮したファイルは gzip または brotli を有効にし、適切なキャッシュ期間を付けて配信します。圧縮と伝送圧縮は積み重なるもので、置き換えるものではありません。
  • 理由がなければ「標準」のままにします。レイアウトがインライン要素間の空白に頼っているなら「安全」、「最大」に上げたときはスタイルシートと照らして確認します。type="text" を落とすと input[type="text"] のセレクターが当たらなくなるからです。

制限事項

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

  • 単一の HTML 文書と、その中に埋め込まれた CSS・JS を圧縮します。リンクされたスタイルシート・スクリプト・画像は取得せず、@import も決して追いません。
  • 現代の JS をトランスパイルしたり、CSS にベンダープレフィックスを付けたり、古いブラウザー向けに降格したりはしません。それはビルドツールに任せてください。
  • 属性名は小文字に揃えられます。HTML としては正しい挙動ですが、フレームワークのテンプレートには合いません。Angular の *ngIf は *ngif になります。Handlebars・Jinja・ERB もそれ単体では HTML ではないので、テンプレートのソースではなく描画後の出力を圧縮してください。
  • マークアップそのものが読めない場合（閉じられていないタグやコメントなど）は圧縮を止めて報告します。埋め込みコードが読めない場合は止まりません。スキップとして一覧し、そのまま通すので、受け取る文書は常に成立したままです。

よくある質問

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

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

いいえ。圧縮はブラウザーが必要としない文字、たとえばタグ間の空白や描画されないコメントだけを取り除きます。レイアウトに影響する空白（pre 内のテキストやインライン要素間の空き）は保たれるので、描画されるページは前後で同じに見えます。空きの取り方が気がかりなときは「安全」の強度を使ってください。連続する空白を 1 つに畳むだけで、削り取ることはありません。

強度はどれを選べばよいですか？

ほとんどの場合は「標準」です。タグ間の空白と、HTML5 が既定とする属性を落とすもので、通常のビルド工程がしていることと同じです。「安全」は空きが効いていて、あまり考えたくないときの控えめな選択肢です。「最大」は既定値の属性や空の属性を削除し、属性とクラス名を並べ替えて最後の数パーセントを絞るので、削られたものに依存するセレクターがないかを一度確認する価値があります。

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

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

「スキップ（未圧縮）」とはどういう意味ですか？

埋め込みコードのその部分が圧縮されず、規則や文をそのまま残した、という意味で、理由も併記されます。CSS エンジンはネスト規則を読めずに削除し、コロンの抜けた宣言があると次の規則まで失うので、どちらかを含む <style> ブロックは圧縮せずに保ちます。JavaScript エンジンが解析できないスクリプト（トップレベル await を使うものを含む）も同じ扱いです。失われるものはなく、その分が縮まないだけです。

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

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

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

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

ページが @import しているスタイルシートを取りに行きますか？

いいえ。CSS エンジン自体には @import を追って中身を取り込む機能がありますが、ここでは明示的に禁止しています。@import は書いたままの形で出力に残り、そのためのリクエストも発生しないので、社内ページを貼り付けても何かがネットワークへ出ることはありません。

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

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

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

直接はできません。このツールが圧縮するのはブラウザーが受け取る標準 HTML です。{{ }} や {% %} のようなテンプレート構文はそれ単体では正しい HTML ではなく、属性名は出力時に小文字へ揃えられるので、*ngIf のようなディレクティブは *ngif になります。描画後の出力を圧縮するか、テンプレート言語向けのツールを使ってください。

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

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

関連ツール

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