パソコン活用研究ホームページ作成達人の道

読み込み時間 

表示のスピードアップ

ついこの間まで、ホームページの1ページのファイルサイズはMAX50KBまでにしなさい、
というのがWeb制作の不文律だった・・・んですよ。皆さん、知ってましたか。モデムで32Kbps
なんて時代は、50KBのページを表示するのに、なんと20秒近くかかってたんですから。
ええ、ついこの間まで、インターネットでは辛抱強くページが開くのを待ってたもんです。
(それでも9.6Kbpsなんていうパソコン通信時代にくらべれば、すごくましだったんですけどね。
そんな時代は500KBくらいのファイルをダウンロードしようとしたら、終わるまでに昼飯食いに
行けたからなあ。今なら一瞬ですよね。)
64Kbpsの高速モデムが登場して、50Kのページの表示がが8秒から10秒くらいになり、
だいたいこれくらいが、1ページの表示で待てる限界、これ以上かかると、他のページを見に
行ってしまう、と言われたものです。

それが、昨今の回線高速化のおかげで500KBくらいのページもさくさく表示の時代になり
ました。50KBのページなんて一瞬です。

しかし、それなのに、それなのに、10M,20M,30Mの高速回線なのに、妙に表示ののろい重い
ページって結構ありますね。おじさんのページのいくつかもそんなに重いファイルじゃないのに、
表示がのろくちょっといらいらしてしまいます。

表示が遅い原因は
A)回線が細い
B)Webサーバの能力が低い
C)PCのスペックが低い、ブラウザの性能が低い
D)コンテンツの作り方が重い
の4つあります。
A),B),C)の3つは作り手にはある意味どうしようもありませんが(Bは選択の余地はあるけど)、
D)は100%つくり手の問題ですね。
HTMLの作り方によってWebページってものすごく表示の遅いものになってしまうことが、あるん
ですね。そこで、今回はWebページの表示の高速化というテーマで少し書いてみたいと思います。

コンテンツの表示については、更に
・ダウンロードの時間(ファイルサイズの問題)
・ダウンロードしてからの表示の速度
・JavaScriptなどの実行速度
などに原因が分かれます。

今回は、ダウンロードの時間(ファイルサイズの問題)は軽くおさえつつ、ダウンロードしてからの
表示の速度について検証してみたいと思います。


0 基本はファイルサイズを小さく。
これは、言うまでもないことですが、最近やたらと画像が多くて表示に時間のかかるページが
増えてきた気がします。上場しているメーカーのサイトなども、見た目はきれいなのですが、
画像が多すぎて重いところが多いです。いくら回線が高速化したとは言え、画像が20も30も
使ってあって、トータルのファイルサイズが1ページで500Kなんていうページはご勘弁願いたい
ものです。

1 大きい画像は表示が遅くなる
大きいファイルサイズの画像はダウンロードにも時間がかかりますが、ダウンロードした後の表示も
遅くなります。100*100くらいの小さい画像(ファイルサイズはだいたい20KB未満)はJPEGもGIFも
PNGもさくさく表示しますが、500*500以上のサイズになると、JPEGの場合、急に表示が遅くなるよう
です。これらの大きなサイズになると、JPEGの方がGIFよりファイルサイズも大きくなりがち(壁とか空
とか色の変化の少ない画像だとJPEGのほうが小さくなる)なので、ダウンロードも時間がかかるし、
表示も遅いということになります。大きい画像は避けるのが懸命ですが、どうしても必要な場合は、
可能ならGIFのほうがいいようです。

また、GIFの場合透過GIFにすると、透過のために計算が必要な分当然のごとく表示が遅くなります。

画像にWidth,Heightでサイズを指定した場合と、指定無しの場合では顕著に表示速度に差はないようです。

2 テーブルを使うと表示は遅くなる

2.1 テーブル(Table)の多用は、表示がものすごく遅くなります。

テーブルを使うと、簡単に整然としたレイアウトを組むことができます。が、テーブルは表示を遅く
する代表格です。ブラウザは<p>とか<DIV>とか<BR>とかのタグを解釈しながらコンテンツの表示
をするわけですが、テーブルタグ<TABLE>の解釈には非常に時間がかかるようです。
ですので、テーブルを多用すると、表示がものすごく遅くなります。

2.2 特にTABLEを入れ子にして使うと極端に遅くなります。
きれいなレイアウトを組もうとするとどうしてもTABLEを入れ子で使用することになりますが、
TABLEの入れ子は更に表示を遅くします。

普通のページと同じページをTABLEの入れ子で組んだページを作りました。試しに表示させて
どれくらい表示速度に差があるか確認してみて下さい。多重入れ子のページは普通にはありえあない
ページですが・・・
 いろんなフォント(普通のページ)    ファイルサイズ 23K
 いろんなフォント(入れ子のページ)  ファイルサイズ 29K
 いろんなフォント(多重入れ子)     ファイルサイズ 40K

以下の表は、これらのページをI.E..でローカルPC上で呼び出して表示にかかった時間を5回計測し、
速い順に並べたものです。
平均は、普通のページ 0.238秒  入れ子のページ 0.26秒 多重入れ子 0.274秒

普通のページ 入れ子のページ 多重入れ子
0.22 0.25 0.27
0.23 0.25 0.27
0.24 0.26 0.27
0.24 0.27 0.28
0.26 0.27 0.28

TABLEは遅くなると言われる割には、思ったほど顕著な差はでませんでしたが、TABLEの使用
により遅くなってはいます。(まあ、誤差ともいえるくらいの差ですが。)
TABLEタグのせいでファイルサイズも肥大化していますが、ローカルPCのHDDからの読み込みなので、
この差は純粋に表示速度の差だと思われます。
(ネット上から読み込む場合は、ファイルサイズの大きさも速度低下要因になるので、過剰なテーブルの
使用は更に表示速度の低下につながると言えます。)

今回のテストではテーブルの中のコンテンツ量が少ないので、あまり差はでませんでしたが、テーブルに
100Kをこすようなコンテンツが入っていると、もっと差がついてくるはずです。
逆に言うと、この程度のコンテンツならテーブルを使用してもあまり差がつかないので、きれいなレイアウト
組のためにテーブルを使用しても、特に問題ないと言う結論になるかもしれません。

ついでに補足しておくと、上記の実験では、カウンタを表示させるJavaScriptをネット上から読み込むための
記述部分をコメントアウト(<! --   // --> ですね)してテストしました。
<SCRIPT language="Javascript" src="http://count.tok2.com/countlink/link.js" type="text/javascript">
</SCRIPT>
という記述です。

実は、コメントアウトをやめて、カウンタを表示させると、10回計測の平均値で、
普通のページ 2.691秒  入れ子のページ 2.828秒  多重入れ子 2.856秒
となり、テーブルの影響など木っ端微塵にふっとぶほど表示が遅くなりました。

このページを遅くしている一番の原因は、このスクリプトファイルの読み込みと実行だったわけです。
カウンタの表示はサーバ側で処理して、その結果をまたインターネット経由で返してくるにの結構時間
を食いますので、表示を遅くする一番の原因になっていました。

2.3 テーブルの表示方法を固定レイアウト(table-layout:fixed)にすると表示が速くなる

tableの幅(width)も指定して、「table-layout:fixed」を指定して固定レイアウトにしておくと、
テーブルを使用しても、それなりに表示が速くなります。I.E.ではかなり効果があるようです。
表示の時にブラウザがいろいろとレイアウトのための計算をしなくていい分、速くなるので
しょうか。

2.4 ブラウザによる違い等
表示の速さに大きな影響を与える要素について、いくつかみてみましたが、テーブルの表示の
速さはブラウザによってかなり差があるようです。一般にI.E.(Internet Explorer)やNetscapeは
表示の遅いブラウザと言われています。Operaがよく高速ブラウザと言われていますが、テーブル
の表示はOperaの方がI.E.より30%程度速いようです。特に入れ子構造のテーブルの表示では
I.E.やNetscapeは極端に遅くなるのに対し、Operaはさほどスピードダウンしないようです。
なお、テーブルの表示に関してはSafariが非常に高速といわれています。I.E.などの10倍以上
も高速とも言われています。ただし、OperaやSafariは逆に画像の表示が遅いようで、JavaScript
の実行速度もI.E.が勝るようですので、一長一短と言えるでしょう。それでも世間一般には、
OperaやSafariは高速と評価されているようです。


それ以外で、大きな影響はありませんが、以下のような事項も表示速度に影響します。

2.5 セルの内容が指定したサイズに収まらないと、表示は遅くなる。

セルの内容が、セルの指定したサイズにおさまらないと結構表示が遅くなるようです。
試しに、ブラウザの文字サイズを大きくして以下のページを表示してみて下さい。
(I.E.の場合は、「表示」−「文字のサイズ」で最大を選択する)

2.7 テーブルの幅はピクセル単位で指定する。

テーブルの幅の指定をする場合は、ピクセル単位での指定が一番速くなります。%表示にすると
計算する分、僅かですが遅くなるようです。

3 背景画像を指定すると遅くなる
背景画像を指定すると、背景画像なしの場合に比べて、明らかに表示が遅くなります。TABLEの
入れ子ほど極端ではありませんが、自分のページに背景を指定してみると体感できる程度に遅く
なります。
<BODY>タグのなかで、background-attachment:fixed にすると背景が固定され、画面をスクロール
させても、背景画像が固定され動かなくなりますが、これは更に表示を遅くする原因になります。

4 不要なタグが残っていると表示は遅くなる
ホームページビルダーなどのホームページ作製ツールを使って、ホームページの修正・編集を
していると、結構不要なタグが残ったままになってしまいます。
タグのすすめのところで書きましたが、これら不要なタグは、(A)無駄にファイルサイズを大きくする、
(B)不要なタグをブラウザが解釈するためのムダな時間が発生する、の2点のため、やはり表示
速度を遅くする原因になります。特に不要なテーブルが残っていたりすると、影響は結構なものに
なります。おじさんのページも調べてみると、10%くらいムダなタグが残っていたりしました。(というか
今もほとんどのページで残っている)

TopPage

inserted by FC2 system