入力
HTMLを貼り付け
HTMLを処理できます。
開発者向けツール
HTML圧縮
空白に依存する内容を保護しながらHTMLを圧縮し、サイズ、警告、ソースと出力のローカルプレビューを公開前に比較できます。
HTMLを貼り付けると出力サイズと削減量を計算します。
元のサイズ0 B
出力0 B
削減0 B
削除したコメント0
出力
圧縮または整形したHTML
安全性チェック
HTML構造と最適化の注意点
HTMLを貼り付けると出力サイズと削減量を計算します。
隔離比較
ソースと出力のプレビュー
ソース
出力
どちらのプレビューにもスクリプト権限はありません。プレビュー専用の厳格なCSPが、生成出力を変えずに通信も遮断します。
例
HTML圧縮例
HTML圧縮オプション一覧
| オプション | 既定 | 効果 | リスク |
|---|---|---|---|
| コメントを削除 | オン | 通常のHTMLコメントを削除し、選択した特殊コメントを保持します。 | 条件付き・ライセンスコメントを保持すれば低リスクです。 |
| 属性を簡略化 | オン | 不要なMIMEタイプを削除し、真偽属性を安全に短縮します。 | 現代のHTMLでは低リスクです。引用符内の値は全体正規表現で変更しません。 |
| インラインCSSを圧縮 | オン | styleブロックと属性を圧縮し、/*! license */コメントを保持します。 | 旧式CSSハックと複雑な宣言を確認してください。 |
| 空のclass/idを削除 | オフ | 空のclassとid属性だけを削除します。 | 属性の存在を調べるスクリプトに影響する場合があります。 |
| タグ間空白をすべて削除 | オフ | 隣接する終了タグと開始タグを空白なしで連結します。 | インライン内容が連結され、レイアウトが変わる場合があります。目視確認してください。 |
HTML圧縮のよくある質問
このHTML圧縮はコードを送信しますか？
いいえ。解析、圧縮、整形、統計、プレビュー、コピー、ダウンロードはブラウザー内で行います。
慎重モードがタグ間空白を残す理由は？
インライン要素間の空白は表示に影響します。隣接タグを常に連結するより、空白を1つ残す方が安全です。
どの内容が保護されますか？
pre、textarea、code、script、style、template、SVG、MathMLブロックは内部空白を保持します。スタイルはオプション有効時のみ圧縮します。
ビルド工程の圧縮ツールを置き換えられますか？
断片や単発ファイルに適しています。本番では検証済みのプロジェクト用圧縮ツールを使い、ソースとバージョン管理を保持してください。