HTMLを圧縮
コメントと空白を削り、ページ内のCSSとJavaScriptも小さくします。実際に表示される空白には手を加えません。ソースコードがブラウザの外に出ることはありません。
- 保存しません
- 順番待ちなし
- 登録不要・透かしなし
圧縮したHTMLがここに表示されます。
使い方
HTMLを貼り付け
またはファイルをドロップします。何も保存されません。これはほかの多くのものよりも、ソースコードにとって重要です。
どこまで圧縮するか選択
コメント、空白、インラインCSS、インラインJavaScriptは、それぞれ個別にオン・オフできます。
コピーまたはダウンロード
圧縮前と圧縮後のサイズで、どれだけ小さくなったかが表示されます。
意味のある空白と、意味のない空白
HTMLでは、2つのインライン要素の間のスペースは本物のスペースです。 ここが、慎重なミニファイアとページを壊すミニファイアの分かれ目です。2つのリンクの間の改行を詰めると画面上で単語がくっついてしまいます。pre ブロックや textarea の中のインデントを詰めると、そこでは空白そのものが内容なので、内容自体が変わってしまいます。そのため、空白を削除するのは表示されないと確実に言える箇所だけで、表示される箇所には一切手を加えません。すべてのスペースを一律に削るミニファイアは、ファイルは小さくなっても、見た目が明らかにおかしいページを生み出します。
コメントは削除します。コメントはソースを保守する人のためのもので、閲覧者のためのものではないからです。ただし条件付きコメントは例外で、これはメモではなく命令です。冗長な属性も削除します。script要素の type="text/javascript" は10年前からデフォルトですし、form要素の method="get" はフォームがもともと行う動作を書いているだけです。
属性の引用符の削除はHTMLとして有効ですが、意図的にデフォルトでオフにしています。 仕様では、スペースや紛らわしい文字を含まない限り引用符なしの属性値が認められており、ブラウザも問題なく処理します。ところがテンプレートエンジンはそうとは限りません。引用符のない属性の中にあるBlade、Twig、Handlebars、JSXの式は正しく解析されなくなり、その失敗は誰も読みたくないファイルの中で、ビルド時に表面化します。削減量は小さく、リスクは小さくないため、オプトイン方式にしています。
効果を正直に測るなら、圧縮前ではなく圧縮後 で比べるべきです。サーバーはHTMLをgzipやbrotliで圧縮して送信し、これらのアルゴリズムは繰り返される空白の処理が非常に得意です。そのため、ミニファイで100 KBから70 KBになった文書も、転送時には12 KBから11 KBになる程度かもしれません。HTMLのミニファイはやる価値がありますが、3つの中で効果は最も小さく、本当に重いのはスタイルシートとスクリプトです。
ほかの目的には
ファイル単位ではなくサイト全体を対象にするなら、ブラウザのタブではなくビルドに組み込むべき作業です。現在のフレームワークや静的サイトジェネレーターはどれもビルド時にHTMLをミニファイします。手作業に頼ると、誰かが忘れた瞬間に行われなくなります。その裏で動いているライブラリは個々の変換単位まで設定できるので、特定のルールが問題を起こしているときに役立ちます。
マークアップを最適化する前に、ページが実際にどれだけ重いのかを確認してください。現実のサイトではほぼ例外なく、HTMLは画像、フォント、JavaScriptに比べれば誤差程度です。Lighthouse やブラウザのネットワークパネルを使えば数秒で分かります。たいていの答えは、最適化されていないヒーロー画像1枚のほうが、ページ上のマークアップ全体よりも重い、というものです。
よくある質問
コードはどこかに保存されますか？
いいえ。ソースコードにとっては、そこがまさに肝心な点です。何も保存されず、サーバーがコードを目にすることもありません。社外秘のソースコードを、どこかに送信するオンラインのミニファイアに貼り付けるのは、サイトが保存期間について何と言っていようと情報の開示にあたります。しかも、急いでいるときに深く考えずにやってしまいがちな行為です。
ミニファイでページの見た目が崩れませんか？
ここでの設定なら崩れません。空白を詰めるのは、divやリスト項目のようなブロック要素の間など、表示されない箇所だけです。インライン要素の「間」のスペースは残します。削除すると2つの単語が目に見えてくっついてしまうからです。「</span> <span>」は画面上で本物のスペースになりますが、「</span><span>」はなりません。<pre>と<textarea>の中身は1バイトも変えません。省略可能な閉じタグの削除は、あえてオフにしています。HTMLとしては有効ですが、多くのテンプレートエンジンやメールクライアントが、その結果をうまく解析できないためです。
実際に何を削除するのですか？
コメント、表示に影響しない空白、そして<style>と<script>ブロック内の無駄な部分です。マークアップの構造、属性、テキストには手を加えません。このツールは、処理前後のページを解析し、要素の数、リスト項目、表示されるテキストが同一であることを確認するテストで検証しています。
属性の引用符は削除すべきですか？
出力をそのままブラウザに渡す場合に限ります。HTMLとして有効で少しは小さくなりますが、引用符のない属性は一部のテンプレートエンジン、一部のメールクライアント、そして単純なパーサーの大半を壊します。デフォルトではオフで、オンにするとページに警告が表示されます。
ページ内のCSSとJavaScriptもミニファイされますか？
はい、どちらも。当サイトのCSS圧縮・JavaScript圧縮と同じ方法で処理します。例外が1つあります。インラインCSSがネイティブのネストや新しいメディアクエリ構文を使っている場合、その回はCSSの処理をオフにします。CSSのミニファイアはこれらの機能より古く、ルールを黙って削除してしまうからです。HTMLのミニファイは通常どおり行われ、スタイルの欠けたページを返す代わりに、そのことをページでお知らせします。
どのくらい小さくなりますか？
インデントやコメントのある手書きのHTMLなら、一般的に10〜30%です。残りの大部分はサーバーのgzipが担います。2つの効果は重なるので先にミニファイしておく意味はありますが、ミニファイだけでファイルが半分になるとは考えないでください。
サイト全体をまとめてミニファイできますか？
ここでは1ページずつです。ページ数の多いサイトなら、ビルドやデプロイの工程でミニファイして、リリースのたびにすべてのページが同じ方法で処理されるようにしてください。バージョン管理には、ミニファイ後の出力ではなく、必ず読めるソースを残してください。
ご注意： 空白を詰めるのは表示に影響しない箇所だけなので、preやtextarea内のテキストには一切手を加えず、インライン要素の間のスペースも残します。属性の引用符の削除はHTMLとして有効ですが、一部のテンプレートエンジンを壊すため、デフォルトではオフです。
このツールをあなたのサイトに設置
ブログ、授業のページ、ヘルプ記事などに無料で設置できます。コードを1つ貼り付けるだけで、訪問者がそのページ上でツールを使えるようになります。