HTML圧縮ツール – マークアップを圧縮してバイト削減を測定
HTML圧縮ツールは、貼り付けまたはドロップしたHTMLを、ブラウザのDOMParserで解析し、コメントを削除し、空白を圧縮し、インラインCSSとJavaScriptを圧縮して、よりコンパクトな版に変換します。利用可能な圧縮オプションを選び、変更前後のバイト数と削減率と並べて出力を確認します。IEの条件付きコメントは保持されるので、使う前にコンパクトな結果を確認できます。
HTML圧縮ツールは、マークアップのコンパクトな版を作成するブラウザベースのHTML圧縮ツールです。HTMLを貼り付けまたはドロップしてオンラインで変換し、元の内容と並べて出力を確認して、バイト数と削減率を確認します。ブラウザのDOMParserでHTMLを解析して再シリアル化します。
圧縮中、コメントは削除され、空白は圧縮され、インラインのスタイルとスクリプトブロックは圧縮されます。利用可能な圧縮オプションを選べますが、このツールの動作は提供するオプションに限定されます。IEの条件付きコメントは保持されます。見積もりに頼るのではなく、変更前後のサイズ数値で結果を確認できます。
HTMLはページの構造を記述するためのマークアップで、CSSはスタイルを定義し、JavaScriptはスクリプティングを提供します。圧縮はコメントや空白のようなコンテンツを削除・削減して、シリアル化されたマークアップをよりコンパクトにします。開発者は、ページを出荷する場合や、マークアップをURL・ヘッダー・設定値に配置する場合に、より小さなHTMLペイロードを使うことがあります。生成された結果は必ず用途に合うか確認してください。
HTML圧縮ツールは完全にブラウザ上で動作します。入力はお使いのデバイス上で処理され、アップロード・保存・サーバーへの送信はされません。ページの読み込み後はオフラインで動作し、サーバーへの依存はありません。このツールは無料で、マークアップを他に送信せずにHTMLを圧縮してバイト削減を確認したい開発者やDevOpsエンジニアに便利です。
手順1: HTMLを貼り付けたり、ツールにドロップしたりします。この圧縮ツールはHTML入力を受け付け、ブラウザ上で処理します。
手順2: 利用可能な圧縮オプションを選びます。HTMLとそのインラインのスタイル・スクリプトブロックに適用される圧縮を制御します。
手順3: コンパクトなHTMLの結果を確認します。このツールはマークアップを解析して再シリアル化し、コメントを削除して空白を圧縮します。
手順4: 変更前後のバイト数と削減率を比較し、結果をプロジェクト用にコピーします。
用途: プロジェクトで出荷する前にHTMLを縮小します。コメントを削除し空白を圧縮すると、マークアップをよりコンパクトな版にできます。
用途: 元のバイト数と圧縮後のバイト数を比較して、サイズ削減がページに有用かを判断します。
用途: マークアップを別の形式に収める必要がある場合に、URL・ヘッダー・設定値用のコンパクトなHTMLペイロードを作成します。
用途: HTMLとあわせてインラインCSSとJavaScriptを圧縮して、それらの埋め込まれたブロックをコンパクトな結果に含めます。
用途: 生成されるマークアップとバイト削減を確認して、利用可能な圧縮オプションの効果をチェックします。
用途: IEの条件付きコメントを保持しながら、コメントと不要な空白を削除して、HTMLをレビューや共有用に準備します。