数千行HTML 画面表示の性能改善

質問

Webシステムを作成しております。1画面の情報量が肥大化してきており、8000行ぐらいの物になっております。(JS含む)
リクエストから画面表示が終わるまでに、4～5秒ほどかかってしまうのです。
JSのonload処理で、0.5msぐらいの処理がかかっていることは確認できております。
どうやら、それ以外の箇所で時間がかかっているようです。
HTMLのヘッダ部にnew Date()を利用して、JS処理の開始時間を採取
<script ****>var st = new Date(); ****</script>・・・(a)
(onload時ではなく、global領域に記載)して計測したところ、
(a)からonload処理が開始されるまでに1秒強かかっております。
試験的に、画面に表示されるTAGを削除すると、1秒強から700msになります。
さらに、hiddenを削除すると150ms程度まで高速になります。（ほとんどタグ無しなので当然なのですが、、、）

このことから、HTMLのbodyの多さが大きな原因となっていると考えています。

いくつかの不明点があります。
１．HTMLタグの最適化（？）を行う手法
今まで、HTMLの最適化を意識したことが無く、このあたり無知な状況です。レイアウトにTABLを多用しているのが悪い？また、HDDENなどは、あまり性能的に良くない？など、なにか、性能改善がまとめられているWebサイトや書籍はありませんでしょうか？

２．遅くなる原因を細分化するために、リクエストから、サーバ処理（Apache）、通信（読込）時間、JS開始時間、画面描画時間、を採取したいところですが、各時間の計測方法はありますでしょうか？
特に、クライアントの読込終わって画面描画にかかる時間を調査したいです。

対象プラットフォームは、
Apache,IE6を利用しています。

回答No.1

golive001 · ベストアンサー

body内にtableを多用していませんか？
データの通信速度が速くともブラウザの処理にて、tableは動作が遅くなるとの話を聞いたことがあります。（すべて解釈し終わってから表示を実行する為）それに対してCSSなどを用いて適切にレイアウトしてあるページは表示スピードが速くなります。HTML+CSSの構成にて再度構築しなおしてみるのもいいかもしれません。またJSについてはアクセスと同時に実行する必要がない機能については可能な限り、イベント毎に実行することを試行してみるのもいいかもしれません。あとは画像を含めPage全体のファイルサイズに気をつけるといったところでしょうか。

■参考書
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト (単行本)

お礼

ご指摘の通り,TABLEをかなり多用しています。
実験的に、CSSを利用した物に変えてみたいと思います。

アドバイスありがとうございました。