HTMLの圧縮 — マークアップファイルサイズの削減
HTMLの圧縮が空白、コメント、オプションタグ、冗長な属性を除去してマークアップサイズを削減する仕組みを解説。安全な最適化テクニックと一般的な落とし穴を含みます。
HTML
詳細な説明
HTMLの圧縮の仕組み
HTMLの圧縮は、ブラウザのHTMLパーサーが必要としない文字を除去してHTMLドキュメントのサイズを削減します。JavaScriptやCSSとは異なり、HTMLの圧縮は空白が視覚的に重要な場合があるため、より注意深く行う必要があります。
除去されるもの
<!-- 圧縮前 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ページタイトル -->
<title>My Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>Welcome to my website.</p>
</div>
</body>
</html>
圧縮後：
<!doctype html><html lang=en><head><meta charset=UTF-8><title>My Page</title><link rel=stylesheet href=style.css></head><body><div class=container><h1>Hello World</h1><p>Welcome to my website.</div>
主な最適化
- 空白の統合 — タグ間の複数のスペースと改行が1つのスペースに統合（またはブロック要素間では完全に除去）されます。
- コメントの除去 — HTMLコメント（
<!-- -->）が削除されます。IE用の条件付きコメントはオプションで保持可能です。 - 属性引用符の除去 — 値にスペースや特殊文字が含まれない場合、属性値の引用符を省略できます（
class="container"がclass=containerに）。 - オプションタグの除去 — HTML5では一部の閉じタグ（
</p>、</li>、</td>）や開きタグ（<html>、<head>、<body>）の省略が許可されています。 - 冗長な属性の除去 —
<link>のtype="text/css"と<script>のtype="text/javascript"はデフォルト値なので除去できます。 - ブール属性の短縮 —
checked="checked"が単にcheckedになります。
HTMLの圧縮ツール
- html-minifier-terser — Node.js用の最も人気のあるHTML圧縮ツール。
- HTMLMinifier — 元のライブラリ。広く使用されています。
- minify-html — Rustで記述され、非常に高速。
空白の感度
<pre>、<code>、<textarea>、およびwhite-space: preが設定された要素の内部では、空白を保持する必要があります。優れた圧縮ツールはこれらのコンテキストを検出し、その中での空白統合をスキップします。
ユースケース
HTMLの圧縮は、サーバーレンダリングされたページや静的サイトにおいて、HTMLドキュメント自体がクリティカルリソースである場合に重要です。HTMLサイズの削減はTime to First Byteを短縮し、特にランディングページやコンテンツサイトのようなドキュメントの多いページで初期DOMパーシングを高速化します。