HTMLの高速化・表示速度

2005/03/20

高速化・表示速度

Ｗｅｂブラウザにページが表示されるまではサイトごとにバラつきがあります。
さまざまな遅くなる要因がありますのでそれについて少し書こうと思います。

表示速度を左右する３つの要素

Ｗｅｂページが表示されるスピードには大きく分けて３つの要素があります。
一つはコンテンツの作り方でもう一つはＷｅｂサーバーから送られてくるデータの転送速度。
最後は見る人のパソコンの性能です。
三つ目はＨＰを作る側にはどうする事も出来ませんが、それ以外はコンテンツの作りかたやデータ転送に関しては工夫次第で劇的な高速化 を図る事もできます。

ＨＴＭＬの表示の高速化

ＨＴＭＬの表示速度を左右するポイントは２つあります。
それは「ファイルの容量」と「テーブル」です。
勿論詳しく見るともっと他の要素も沢山ありますが、大きな問題ではこの辺りでしょう。
ファイルの容量が小さいほどデータを転送する時間や表示する時間が短いので速くなります。
これはなんとなく分かって貰えると思います。問題はテーブルタグです。

単純に<p>〜</p>でタグ付けした場合とテーブルタグにシンプルに<td>〜</td>で囲った場合 ではほぼ同じ容量の大きさでは表示にかかる時間は全体的にテーブルタグに入れた方が時間がかかります。
さらにテーブルを入れ子にするだけでも時間がかかり階層が深くなると更に遅くなります。

その他にはテーブルの幅はパーセントを指定するよりピクセル単位で表示した方が若干ではありますが表示速度は速くなります。
その他ではテーブルのセルの内容が十分に収まる幅と高さを指定した場合と内容が収まりきらない幅と高さ を指定した場合では、テーブル内に収まらない方が確実に遅くなるようです。

あと画像ですが、一般的にはwidth属性とheight属性を使って幅と高さを指定するのが常識ですがこれは表示速度では 指定しない方が若干すが速いです。

外部スタイルシート

共有するスタイルをまとめて外部スタイルシートにしておくと、それが最初に読み込まれた時点でキャッシュされる ため、それ以降の表示速度が速くなると言われている。
確かにその通りですが、場合によってはその都度style属性で読み込んだ方が速い時もあります。
ＣＳＳがまったく共通していないものからＣＳＳを抜き出して一つの外部スタイルシートに まとめた場合（本来なら別々の外部スタイルシートにする場合）がそうです。ある程度の容量になってくるとその都度 style属性で読み込んだ場合の方が速いです。
しかし、その速度差はごくわずかなのでメンテナンス性を重視して考える とやはり外部スタイルシートにする事を私はオススメします。

あと余談ですが、div要素・span要素・id属性・class属性を少なくすると表示速度は速くなり、背景画像は固定すると表示速度 は遅くなるなどいろんな要素があります。

このコラムにコメントして頂ける場合Travail掲示板-バイト チャットレディまで！