「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた

こんにちは。
Web Designing様主催の「Tap App Awards 2013」というコンテストに出すアプリの開発が終わりました。
jQueryMobileを初めて使ってみたので、色々と記事のネタが溜まっております。
アプリの方も一般公開用に微調整して、近々リリース予定です。

それはさておき、本題です。 HTMLの閉じタグは省略できるという噂を聞いたので、調べてみました。

HTMLにはタグや閉じタグを省略できるタグがある

終了タグのみ省略できるタグ(次のタグの開始と共に自動的に終了タグがはさまれるので) li, dt, dd, p, tr, td, th,rt, rp, optgroup, option, thread, tfoot 開始タグ終了タグ共に省略してよいタグ(タグが無ければデフォルト値が使われる) html, head, body, tbody, colgroup

HTMLにて終了タグがいるタグいらないタグ・・の話とか

! ?
HTMLの閉じタグって省略可能なんですね…今まで知りませんでした。
というのも、こちらの記事 Googleが推薦するHTMLとCSSのコーディング方法 | 簡単ホームページ作成支援-Detaramehp から知ったのですが、 調べてみたところこの書き方はW3Cの仕様でもOKだそうです。id="feel">

閉じタグの省略は何処か気持ち悪い。

しかし、今まで閉じタグをしっかり書いていた人間としては、 なんか落ち着かない…と思うわけです。
でも天下のGoogleさんが仰るなら、 何か良い事が有るのだろうと私なりに利点を整理してみました。

  • インデントが浅くなり見やすくなる
  • カッコカッコって並ばずにすっきりしていて、見やすくなる
  • 入力が楽
  • ファイルサイズが小さくなるから表示速度が上がる?

と、主に可読性と保守性に有るのかなと思いました。 閉じタグが分からない、ってことも、きちんとインデントしていれば特に問題無さそうですし、 「このタグはbody(もしくはhead)にしか入らない」 という感覚がわかっていれば、 html,head,bodyタグも省略してもむしろスッキリすると思います。 これはぜひ使ってみたい。しかし、

  • ブラウザの対応は出来ているのか?
  • きちんと閉じタグが補完された状態で表示されるのか?
  • 閉じタグの補完はパフォーマンスにどう影響するのか

が気になったため、調べてみました。

実験

何を実験するのか。それは、 (ほぼ)同条件で閉じタグが有る/省略されている状態だと どちらの方が読み込みが早いのか です。 計測に用いた環境は、

サーバ : さくらVPS 2Gプラン CentOS6

使用PC : MacBook Air 11inch OSX Lion メモリ4GB Intel Core i7 1.8GHz

ブラウザ : Google Chrome 23.0.1271.101 Firefox 18.0 Opera 12.12 Safari 6.0.2

です。 そして、実験に用意したHTMLはこちらです。

<!DOCTYPE html> 
<title>タグ省略時の速度計測</title>
<script> var st = new Date().getTime(); </script> 
<ul>
   <li>1 
   <li>4 (50万行繰り返し) 
</ul>
<p>1 
<p>2 (50万行繰り返し)
<script> alert(new Date().getTime()  st); </script>

というHTMLを用意しました。 html,head,bodyとli,pの閉じタグが省略されています。 どう計測したら良いのか分からなかったため、この形式にしてみました。 上下のscriptタグが実行されるまでの差を計測します。 これで読み込みから表示完了までの時間が取れるのではないかと! 見た目は、長いけどかなりすっきりしています。 およそ100万行。シンタックスハイライトの入ってるエディタだと確実に固まります。 上記が閉じタグを省略した版のHTMLで、 閉じタグを省略しない版では、上記のpタグとliタグを閉じています。

ファイルサイズの比較

まずはファイルサイズの比較。 閉じタグを省略して居ない方は、17426630バイト。約17.4MBです。 一方閉じタグを省略した方は、12926627バイト。約12.9MBです。 ファイルサイズの差は、 閉じタグを省略した方が約4.5MB程ファイルサイズが少なくなります。

速度の計測

さて、速度計測です。
先ほどのHTMLを5回ずつ読み込み、平均値を取ります。
ざっくりと、どっちが早いor変わらないかが分かれば良かったので、5回。
では結果発表です。

Chrome

非省略:53998.8ms 省略 :45836.6ms(-8162.2ms)

Firefox

非省略:104364.8ms 省略 :74252.6ms(-30112.2ms)

Opeta

非省略:52895.6ms 省略 :35929.8ms(-16965.8ms)

Safari

非省略:24673.8ms 省略 :21818.8ms(-2845ms)

結果

どのブラウザでも、閉じタグを省略したほうが読み込みが大幅に高速でした 状態を変えずに計測を行ったのですが、 結構結果に結構ばらつきが有ったため、あまり信頼できるデータでは無いかもしれません。

まとめ

以上の検証結果から、

  • 閉じタグを入れる/省略するは動作に影響しない
  • ファイルサイズの差が読み込み速度の差に影響している
  • 許可されたタグは省略してもきちんと補完される(計測ついでに確認
  • 複雑な入れ子構造になった場合などは不明

という判断をしました。 いかがでしたでしょうか。 閉じタグ省略は、表示高速化のための 選択肢の一つとなりえるのではないでしょうか。 万が一が怖いので用途を選びますが、 私はこれから積極的に採用して行きたいと思います。 しかし、注意事項として 省略できないタグもあることと、 私の検証では高速でしたが、他の条件でも同様かは不明 であることをお忘れなきようお願いします。