HTMLの空白除去 — 安全なスペースの削除

HTMLの空白除去

HTMLの空白除去は、HTML圧縮において最も効果の大きい単一の最適化です。ブラウザはレンダリング中に複数の空白文字を1つのスペースに統合するため、ソースHTMLの余分なスペースは読みやすさのためだけに存在します。

ブラウザの空白ルール

HTML仕様は以下の空白統合ルールを定義しています：

1. スペース、タブ、改行のシーケンスは1つのスペース文字に統合されます。
2. ブロックレベル要素内の先頭と末尾の空白は視覚的に除去されます。
3. ブロックレベル要素間の空白は完全に無視されます。
4. インライン要素間の空白は重要です — 単語やインライン要素間の視覚的なスペースを生成します。

安全な除去パターン

<!-- ブロック要素間の空白：安全に除去可能 -->
<div>
  <p>First</p>

  <p>Second</p>
</div>

<!-- 変換後 -->
<div><p>First</p><p>Second</p></div>

<!-- 要素内のインデント：安全に除去可能 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- 変換後 -->
<ul><li>Item 1</li><li>Item 2</li></ul>

保持しなければならない空白

インライン要素の境界には注意が必要です：

<!-- </strong>と"world"の間のスペースは重要！ -->
<p><strong>Hello</strong> world</p>

<!-- これはレンダリングを壊します： -->
<p><strong>Hello</strong>world</p>

プリフォーマットコンテンツはそのままにする必要があります：

• <pre>と<code>ブロック
• <textarea>のコンテンツ
• white-space: preまたはwhite-space: pre-wrapでスタイルされた要素
• <script>と<style>ブロック（独自の圧縮ツールで処理）

アグレッシブ vs. コンサバティブモード

ほとんどのHTML圧縮ツールは2つのレベルを提供します：

• コンサバティブ — ブロック要素間の空白のみ除去し、スペースのランを統合。すべてのHTMLに安全。
• アグレッシブ — 可能な場合はインライン要素周りの空白も除去し、属性値内の不要な空白を削除。エッジケースで視覚的な変化のリスクあり。

ファイルサイズへの影響

空白は通常、HTMLファイルサイズの**15-25%**を占めます。特に深いネストを持つ適切にインデントされたテンプレートで顕著です。空白の除去は最小限のリスクで即座の節約を提供します。