HTMLは圧縮（compressやminify）すべきか

誰にも言わずにひっそり、こういう記事を先月書きました。
http://mtdew2.com/2015/09/15/why-to-compress-javascript/

誰かの役に立つとも、おもしろいとも思わなかったので、そっとしておいたのですが
某氏の記事からリンクしていただき、思ってたより多くの方の目に触れることになったようで非常に恥ずかしいです。
まとまっておらず申し訳ありません。
ひっそり書いた記事の終盤で、HTMLはなぜ圧縮しないのか（する必要がないのか）というようなことを書き、それについて@webcre8さんに相談にのってもらっていたので、そこを改めて書こうと思います。

HTML ファイルは圧縮しないの…？

私が普段、他所様のソースコードを拝見する限りではHTMLファイルのソースコードを圧縮しているものもありますし、していないものもありますが、圧縮していないことが圧倒的に多いような気がしていました。（CSS/JSは圧縮しているのに！）

で、その疑問を深夜の@webcre8さんに投げかけたところ、氏の書いた過去記事の「要素間ホワイトスペース」にあるようなお話をしてくださいました。

HTMLには要素間ホワイトスペースが存在する

上記記事には、

スペースは通常半角を使うと思いますが、ここで代わりに全角スペースを使うと、それは要素間ホワイトスペースとはみなされません。それを利用して自由に間隔をとる人もいたりするのですが、半角スペースは改行やインデントの様に記号として存在するものであり、全角スペースは日本語にしか存在しないれっきとした文字です。見えないひらがなを置いているのと同じで、タグとタグの間にあるべきものではありません。

と書いてあります。
さらに、

要素と要素の間にある連続したスペース、タブ、改行タグは全て一つの要素間ホワイトスペースと見なされているからです。

とのことです。

この説明を踏まえて、「HTMLを圧縮してスペースや改行を取り除いたHTMLのソースコードは、圧縮の前後で全く同じHTMLのソースコードは言えない。」という内容の話をしました。@webcre8さんの記事をじっくり読むといいかもしれません。

この記事ではこのあと、display: inline;やdisplay: inline-block;を使ったリストの横並び表示をした際に、横並びのリスト間に隙間ができることについて説明されています。

前述の説明で、なぜ横並びのリストの間に隙間が出来るかがわかったと思います。これはli要素をインライン扱いにしたことによってli要素間に要素間ホワイトスペースができている、というわけです。

1
2
3
4
5
<ul>
  <li>リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li>
</ul>

この<li>に、display: inline;やdisplay: inline-block;を指定して横並びのリストをつくろうとします。
で、表示するとリスト間に小さな隙間ができます。
これを

1
<ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul>

こんな感じに改行とスペースを削除して、display: inline;やdisplay: inline-block;を指定して表示させると、リスト間の隙間がなくなるのですねー。

これが、「圧縮（改行やスペースを削除）前後のソースコードは同じものと言えない」ってことなのかと思います。

preの話

あとは<pre>の話です。
<pre>内は改行もスペースもソースコード通りに表示されますね。
試しにぐぐって出てきたHTMLソースコードの圧縮ツールのうちいくつかで、圧縮を試してみたのですが、今回試したものに関しては全て<pre>内の改行も削除されてしまいました。
そのHTMLファイルをブラウザで表示すると、元々含まれていた改行やスペースが削除された<pre>〜</pre>が表示されるわけです。
たまたまそのとき見ていたCodeGridさんの^1ソースコードを見ると、<pre>内の改行やスペースのみ保持され、それ以外の改行やスペースは削除されている感じでした。（違うかも。）
このCodeGridさんのような圧縮であれば、<pre>内は正しく表示され、圧縮による表示への影響は大きくないのではないかと思います。

preのスペース・改行を保持したとしても

話を少し戻して、@webcre8さんの記事にあった「要素間ホワイトスペース」の存在を考えると、<pre>内の改行が保持されていようと、圧縮前後のソースコードが同じものとは言えないですよねーというお話になりました。

圧縮したらファイルサイズが小さくなるわけですね。で、そのとき圧縮前後のソースコードが必ずしも「同じもの」でなければならないとは私は思いません。（HTML詳しくないので、なんとなくそう思うだけです。）
ただ、HTMLのソースコードを見る・読むのが個人的に好きなので、圧縮されてないほうが読みやすくていいなあと思います。

はじめ@webcre8さんにこれについて聞いた時に「HTMLは文書だし、スペースも行間も意味あるんだからむやみに消さんほうがいいでしょ」的なことをおっしゃっていたのですが、
私の頭が追いつけず、@webcre8さんにはだいぶ長い時間お付き合い頂きました。ありがとうございます。
正直しっくりこない部分もあるのですが、以上のような理由で圧縮ツールにかけないほうがよさそうだね〜（<pre>内のスペースや改行が削除されてしまうツールも多いので）って話で一旦終わりになりました。

もし違う意見がある方がいらっしゃいましたら、お聞かせいただけますと大変嬉しいです。

おわり！

追記

  • 2015-10-06 @debiruさんが記事書いてくださいました。
    http://debiru.hatenablog.com/entry/20151006/no-more-compress
    ありがとうございます。
    記事の内容と関係ありませんが、no-more-compressっていうのがかっこいいと思います。（NO MORE LIESっぽいです。COMPLEXの）