ページを軽くしたい！（構造編） [ホームページ作成] All About

ホームページを軽くしたい！

高速なネット接続環境が普及しつつあるとはいえ、まだまだ低速回線の利用者も多いのが現状です。ホームページは、できるだけ軽い表示が望まれるでしょう。
今回は、ホームページを軽くする方法について解説致します。

軽く見せる

ホームページを軽くする方法はいくつかありますが、「何かを削る」という方法ではなく、「構成を再検討する」方法で今までよりも「軽く見せる」方法を考えてみます。今回は、TABLEを用いてレイアウトを作っているページを対象に、軽く見せる方法をご紹介致します。

TABLEを使ったデザインの問題

複雑な構造を実現したければ、今のところ(※)TABLEを使う必要があります。TABLEはうまく使えば便利なのですが、１ページ全体をTABLEで囲むと、場合によってはなかなか表示されず、重く感じられてしまいます。それは、TABLEで囲んだ中身が、『全て読み込まれてからでないと表示されない』からです。

※配置方法を指定するスタイルシートを使えばTABLEを使わなくても様々な構造を実現できますが、2001年10月現在ではサポートしていないブラウザ（バージョン）が多いので、確実に望み通り表示するにはTABLEを使う必要があります。

通常、ページは読み込まれた順に上から少しずつ表示されます。しかし、TABLEの場合は、中身を全て読み込んでからでないとレイアウトを決定できませんので、全体を読み込み終わってからしか描画（表示）されません。
ですから、TABLEで１ページ全体を囲んでしまうと、中身の分量によっては、表示が非常に遅くなってしまいます。

細かく分割

だからといって、TABLEの使用をやめろと言うわけではありません。解決法は簡単で、複数のTABLEに分割すれば良いのです。

例えば、ページを良く見ると、横一列に切れる箇所が見つかることがあります。下図をご参照下さい。そういう箇所を見つけたら、そこでTABLEを切りましょう。そうすれば、その箇所まで読み込まれた時点で、それより上の部分は表示されます。

せめて上下に分割

構成によっては、横一列で区切れるような箇所がほとんど見つからない場合もあるでしょうね。その場合でも、せめて、上下２つのTABLEに分割できるように構成をちょっとだけ再検討してみましょう。（下図）

上下に分割する際は、「１画面で見える範囲」（上）とスクロールしないと見えない範囲（下）に分割できるように考えると良いでしょう。

１画面（※1）で見える部分さえ先に表示されれば、残りの部分の表示が多少遅かったとしても、１画面で見える範囲の文字を読んでいる間（※2）に、下の部分が読み込まれることになるので、随分マシになるからです。

ですから、なんとか構成を再検討して、１画面分でTABLEを分割できるような構成に変えてみましょう。

※1:アクセス者の環境によって１画面の高さは異なりますが、だいたい800×600解像度が平均と考えて、それを基準に高さを考えると良いでしょう。
※2:もちろん、リピーター（再度訪れてくれたユーザ）の場合は、上の部分を読まずに、下の部分にアクセスしたいと思うかも知れませんから、細かく分割できるなら、できるだけ分割する方が良いわけですが。