HTML ミニファイヤーとは？
HTMLミニファイアーは、HTMLコードから不要な空白、コメント、省略可能なタグ、冗長な属性を削除します。これによりファイルサイズが縮小されてページ読み込み時間が改善され、Core Web Vitalsスコアと検索ランキングに直接影響します。
ミニファイヤーは連続する空白を畳み、HTMLコメントを取り除き、オプションで </li> や </body> のような省略可能な閉じタグを削除し、インラインの <style> や <script> もCSSとJSのミニファイヤーに通します。出力は入力と機能的に同一ですが、サイズは通常20%から40%小さくなり、モバイル回線でのLCP時間を直接縮めます。
使い方
- ステップ1 — HTMLソースコードを入力エリアに貼り付けます。
- ステップ2 — オプションを設定します：空白の折りたたみ、コメントの削除、省略可能なタグの削除、インラインCSS/JSのミニ化。
- ステップ3 — ミニ化されたHTMLをコピーするかファイルとしてダウンロードします。サイズ削減率を確認してください。
使用するタイミング
- ビルド時にミニファイできないサーバーレンダリングのページで、HTMLレスポンスをもっと小さくしたいとき。
- メールのHTMLテンプレート。クライアントが102KBを超えると本文を切るため、1KBの差が効きます。
- モバイルアプリやPDFにHTML片を埋め込む場合、バンドルサイズはそのままダウンロード時間に直結します。
結果
48KBのホームページHTMLがミニ化後に31KBに縮小されます — 35%の削減で、3G接続では読み込み時間が50ms短縮されます。
よくある質問
- ミニファイでインラインのJavaScriptやCSSが壊れない？
- ミニファイは文字列、テンプレートリテラル、正規表現の中の意味ある空白を保持します。インラインJS/CSSミニファイヤーも同様です。ASI依存など特殊な書き方があるなら、Minify Inline JSをオフにして空白圧縮だけにしてください。
- Remove Optional Tagsは具体的に何を消す？
- 仕様で省略可能とされているタグです。次の <li> の前にある </li>、ブロック要素の前の </p>、</tr>、</td>、さらには <html> や <body> の開始タグまで含みます。ブラウザは同じように解釈しますが、古いツールが警告を出すことがあります。
- Gzipで圧縮されるなら、ミニファイは無駄では？
- Gzipは大きく効きますが、先にミニファイすると通常さらに5〜10%縮みます。Gzipは内容を並べ替えたり冗長なトークンを取り除いたりできないからです。最終的にブラウザに届くサイズがTTFBを左右します。
- ミニファイ後のHTMLはW3Cバリデーションを通る？
- 既定の設定なら通ります。Remove Optional TagsもHTML5として有効なHTMLを生成します。仕様が明示的に省略を許しているためです。厳密なXHTMLが必要ならこの設定をオフのままにします。
- ミニファイを元の整形に戻せる？
- 完全には戻せません。空白、コメント、省略タグは取り除かれた時点で失われます。組み込みの「フォーマット」ボタンでインデントを整え直して読みやすくはできますが、元のレイアウトや削除したコメントは復元できません。ソースファイルは別途保管してください。