2011年5月6日金曜日

表示速度

ウェブサイトにアクセスしたときに、すぐに画面が表示されなければ、ユーザはイライラしてしまい、あまりに待たされるようならば、他のサイトに移ってしまう。
ブロードバンドが当たり前の昨今では、それほど待たされることはないかもしれないが、それでも回線が細い場合には、混み合ってきたら中々表示されなくなることもある。
理想的には10秒以内にページが表示されることである。

ページの読み込みが遅くなる理由は、ページのサイズである。
ページサイズは、HTMLファイルに書かれているテキスト以外に、表示しようとしている画像やFlash、CSS、JavaScriptなどの外部ファイルも含まれる。これらの総合計ファイルサイズが、ページサイズとなる。

回線別の最大ページサイズ
56Kモデム --- 65KB
ADSL(1M) --- 1MB

以上のように、回線の速度によって、10秒以内に読み込めるページサイズは変わってくる。
画像や、動画のようなものをたくさん使っていれば、別であるが、普通にウェブサイトを作っていれば、1MBなどという大きさのページになることはあまりない。

重くなるのを避けるテクニック
ページサイズをなるべく軽くするには、以下のことに注意しよう。

(1) ファイルに余計なテキストを書かない
HTML、CSS、JavaScriptなどのファイルに、余計なタグやコメントを書き込まないようにする。特にコメントを大々的に書いてしまうと、その分読み込む速度に影響を及ぼすといわれている。とはいえ、後々ファイルを管理する際にある程度のコメントは必要となる。最低限のわかりやすいコメントを心がけよう。

(2) レイアウトやデザインはCSSでまとめる
HTMLファイルに直接レイアウトや見た目に関する処理を書くよりも、外部CSSファイルに書いたほうがよい。フォントサイズ、色、レイアウトといったデザインは、他のHTMLファイル内でも同じものを使うことが多い。それならば、外部CSSファイルに、まとめて書けば、1つ設定するだけで、複数のHTMLファイルに適用することができる。

(3) CSSの設定をなるべく字数の少ないものに変える
例えば、border-left、border-top、border-left、border-bottomの4つを指定するのであれば、一度に、borderプロパティで指定する。また、0pxとしたいのであれば、0とだけ記述する、というように、なるべく少ない字数で収まるようにする、ということである。
ちまちまとした感じに思えるかもしれないが、こういう細かい積み重ねが大事である。

(4) 画像の画素数は下げる
画像処理ソフトで、画像のサイズを変更したときに、色の数を減らすなどしてなるべく画像のサイズを落とすようにする。特に、画像を鮮明にする必要がないような場合には、ギリギリまで下げよう。

(5) 広告などの貼り付けは最低限にする
アフィリエイトなどの広告をベタベタと貼ると、これが結構なサイズを持っていることがある。特に、JavaScriptを読み込むようになっている広告の場合は、複数のJavaScriptを読み込むようになっていると、かなりの時間を要することがある。実際に表示してみて、あまりに重いようならば、広告を減らそう。

(6) 目安をユーザに知らせる
ファイルをダウンロードする場合には、そのファイルのサイズや、ダウンロードにかかる所要時間などを書いておくと、ユーザがどのくらいの時間がかかるのかが事前にわかるため、待っていられるようになる。

0 件のコメント:

コメントを投稿