Utilore

HTML 圧縮

貼り付ければ、誰も見ていない余白を落とした形で返ってきます。入力欄の下の数値で、どれだけ減ったかが分かります。

コードはこのページから出ません。整形はブラウザ内で行われます。

使い方

  1. 最初の欄に HTML を貼り付けます。入力に合わせて圧縮されます。
  2. 入力欄の下に出るサイズを確認します。
  3. 結果をコピーします。「整形」を押せば再び広げられます。

知っておくと便利

取り除くもの、残すもの

タグ間の改行、連続した空白、通常のコメントは取り除きます。条件付きコメントは残します。古いブラウザ向けのマークアップが入っているからです。pre・textarea・script・style の中身はそのまま運びます。そこでの改行は書式ではなく内容だからです。

実際どれほどの効果があるか

一般的なページでは、転送圧縮の前で 1〜2 割ほど、圧縮後ではさらに小さな差になります。gzip はもともと繰り返しの空白に強いからです。ビルド時に組み込む価値はありますが、開発中は忘れて構いません。読みやすいマークアップは何の費用もかからず、時間だけを節約します。

よくある質問

見た目は変わりませんか。

変わりません。ただし一点、インライン要素のあいだの空白は画面上で意味を持ちます。そのためタグ間の空白は削除せず 1 個にまとめており、レイアウトはずれません。

コードはどこかに送られますか。

送られません。すべてページ内で完結するので、未公開のテンプレートも手元に残ります。

中の CSS や JavaScript も圧縮しますか。

しません。これらのブロックはそのまま写します。スタイルシートには CSS 圧縮ツールを使ってください。マークアップ用の道具でスクリプトをいじるのは、見つけにくい不具合を生む典型的な方法です。

元に戻せますか。

「整形」を押せば、インデントの付いた形に組み直せます。元の改行位置は失われますが、構造は戻ります。

関連ツール