HTML圧縮ツール

HTML圧縮ツールは、HTMLから不要な文字を取り除いてコンパクトにし、処理前後の文字数も表示する無料ツールです。

HTMLを圧縮すると何が変わりますか？

HTML圧縮では、ブラウザへの配信に必要のない書式を削除し、HTML文書のサイズを小さくします。主に削除されるのは、インデント、改行、要素間の余分な空白です。マークアップの意味を保ったまま、文字数を減らすことが目的です。

圧縮は通常、本番用ビルドの途中、または静的HTMLをデプロイする直前に行います。転送するデータ量を減らせますが、BrotliやgzipなどのHTTP圧縮を併用すると、多くの場合はさらに大きな削減効果が得られます。HTML圧縮はソース自体を変え、HTTP圧縮はそのソースの転送方法を変えるため、両者は相互に補完できます。

読みやすい未圧縮のHTMLソースは、バージョン管理に残しておいてください。圧縮後のHTMLはレビュー、比較、デバッグが難しくなります。特に文書全体が1行になっていると、エラーに行番号や列番号が示されても場所を特定しにくくなります。

HTML圧縮ツールの使い方は？

HTML欄に元の文書を入力し、ツールを実行してください。圧縮されたソースが圧縮済みHTMLに表示され、併せてHTMLの文字数と圧縮済みHTMLの文字数も確認できます。

1. HTML文書全体、または単独で完結するHTML断片を入力します。
2. 圧縮を実行し、返されたマークアップを確認します。
3. 処理前後の文字数を比較し、十分に削減できたか確認します。
4. 本番ファイルを置き換える前に、圧縮済みHTML文書とブラウザでの表示結果をテストします。

処理はサーバー上で行われます。入力内容はHTTPS経由でサーバーへ送信され、保存されません。組織の規定によりコード処理をローカルマシン内だけで行う必要がある場合は、機密性の高いソースを送信しないでください。

圧縮結果の見方

結果には、圧縮後のマークアップと処理前後の文字数が表示されます。圧縮済みHTMLの文字数が小さくなっていれば文字が削除されたことを示しますが、これはダウンロードしたファイルのサイズとは異なる指標です。

文字数には、マルチバイト文字を考慮した文字列長の処理が使われます。そのため、アクセント付き文字やラテン文字以外の文字も、単なる個別のバイトではなく文字として扱われます。ただし、複数のUnicodeコードポイントで構成される1つの表示記号は、文字数では2文字以上として数えられることがあります。

返される項目に検証レポートはないため、このツールをHTMLバリデーターとして使用しないでください。要素の入れ子の誤り、IDの重複、必須の終了タグの欠落、空白を含む引用符なしの属性値などがあっても、問題を指摘せずに圧縮結果を返す場合があります。末尾のカンマはHTMLの構文エラーではありませんが、埋め込まれたJSONやJavaScript内にある場合、そのコンテンツが正しく動作しない可能性があります。

具体例と注意が必要な入力

一般的なブロック要素の周囲にあるインデントは、分かりやすい圧縮対象です。

入力、\nは改行を表します <main>\n <p>Ready</p>\n</main>

圧縮後 <main><p>Ready</p></main>

テキスト内の空白は、より慎重に扱う必要があります。たとえば、2つのインライン要素の間にある空白は、ページ上でも見えることがあります。

入力 <span>Account</span> <span>settings</span>

安全ではない圧縮結果 <span>Account</span><span>settings</span>

後者は"Accountsettings"と表示される可能性があります。タグ間の空白をすべて削除できるとは考えず、インラインコンテンツは必ず確認してください。

• <pre>、<textarea>など、空白の扱いが重要なコンテンツでは、内部のスペースや改行に意味がある場合があります。
• テキストや属性値に含まれる数字と句読点は文書の内容であり、削除してよい書式ではありません。
• 文書で正しい文字エンコーディングを使用していれば、アクセント付き文字やラテン文字以外の文字も有効なHTMLテキストです。
• テンプレート式、サーバーサイドのディレクティブ、条件付きコメントには、汎用的なHTML圧縮ツールが認識できない規則が含まれる場合があります。
• 空のHTML入力には、実質的に削減できるものがありません。非常に長いHTML文書では、手作業でコピーするのではなく、再現可能なHTMLビルド処理を使用してください。

HTMLを圧縮するメリットがあるのはどんな場合ですか？

読みやすいソースファイルを本番配信用に整え、その出力を繰り返し配信する場合は、HTMLを圧縮する価値があります。静的なランディングページ、ドキュメントのビルド、サーバー側でレンダリングするテンプレートでは、デプロイ前の工程に圧縮を組み込めます。

すでに圧縮されているHTMLを再び圧縮しても、ほとんど、またはまったく小さくならない可能性があるため、通常は実行する意味がありません。人がデバッグする必要がない限り、機械だけが読むJSONやHTMLを整形する必要もありません。第三者が作成したHTMLを調べる場合、圧縮すると不慣れなマークアップがさらに読みにくくなるため、一般にはブラウザの開発者ツールやフォーマッターの方が役立ちます。

無効または壊れたマークアップを修復する目的で、HTML圧縮を使用しないでください。ブラウザによって動作が異なる場合は、まず読みやすい元のソースを検証してテストします。Markdownからページを生成する場合は、MarkdownをHTMLにでマークアップを作成し、最後の本番工程で圧縮できます。

よくある質問

インラインCSSやJavaScriptを含むHTMLも圧縮できますか？

インラインCSSとJavaScriptにはそれぞれ独自の文法があるため、HTMLの圧縮処理だけでその内容まで最適化されるとは限りません。必要に応じて該当部分にCSS圧縮ツールやJSミニファイアーを使用し、組み合わせた文書をテストしてください。埋め込みコード内の終了タグに相当する文字列が、HTMLの解析に影響する場合があります。

HTMLを圧縮すると検索順位は上がりますか？

圧縮しただけで、検索エンジンにとってコンテンツの関連性が高まるわけではありません。転送サイズは減らせる可能性がありますが、ページ配信にはキャッシュ、圧縮、画像、スクリプト、サーバーの応答時間も影響します。本番ファイルを作成する際は、見出し、メタデータ、構造化データ、表示されるコンテンツを維持してください。

TwigやBladeなどのHTMLテンプレートも圧縮できますか？

テンプレート構文は通常のHTMLではなく、汎用的な圧縮ツールが認識しない空白や区切り記号に依存している場合があります。より安全なのは、レンダリング後の出力を圧縮する方法です。または、テンプレートに対応したビルド連携を使用し、代表的なページをテストしてください。

文字数とファイルサイズが一致しないのはなぜですか？

UTF-8などのUnicodeエンコーディングでは、文字数とバイト数は別の指標です。多くのASCII文字は1バイトですが、それ以外の文字は複数バイトになることがあります。また、ファイルにバイトオーダーマークが含まれていたり、バイトサイズに影響する改行コードが使われていたりする場合もあります。

HTMLコメントは安全に削除できますか？

コメントは削除できることが多いものの、ビルド用ディレクティブ、サーバーサイドインクルードの命令、互換性のためのマークアップが含まれている場合があります。すべてのコメントを不要と判断しないでください。プロジェクト内でコメントが動作上の意味を持つ場合は、返されたソースとレンダリング後のページを確認してください。

最後に確認すること

圧縮前後のページ表示を比較し、特にインライン要素間の空白、整形済みテキスト、フォーム、埋め込みスクリプトを確認してください。読みやすい元のソースは残し、マークアップの検証は別途行います。ページが想定どおりに動作することを確かめてから、圧縮済みのコピーをデプロイしてください。