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

 · 7 min read

こんにちは。
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>
  <li>4 (50万行繰り返し)</li>
</ul>

<p>1</p>
<p>
  2 (50万行繰り返し)
  <script>
    alert(new Date().getTime() – st);
  </script>
</p>

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

ファイルサイズの比較

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

速度の計測

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

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)

結果

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

まとめ

以上の検証結果から、

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

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

HTML
© 2012-2022 Leko