ブラウザの表示時間を速くする方法

14. ブラウザ表示時間の短縮を心がけよ！

インターネットで一番腹が立つのは「遅いこと」である。

訪問者は８秒以内にページが表示されなければ諦めるという傾向がある。

サーバーや通信速度の問題もあると思うが、
コンテンツ（ＨＴＭＬファイル）のサイズを軽くするという
心がけを忘れてはならない。

しかし、軽くするというのは、
単にファイルサイズを小さくするという意味ではない。

もちろんファイルサイズが小さいのに越したことはないが、
それ以外にも表示速度を速くする方法はたくさんある。

例えば画像ファイルについてだが、
画像ファイル自体のサイズを小さくするだけでなく、
全ての画像ファイルのIMGタグについて

width="80" height="60"

のように、縦幅と横幅の指定をするほうが表示速度は速くなる。

もともと画像ファイル自体が縦横サイズを持っているのだから、
わざわざ属性指定しなくてもＨＴＭＬのルール上は問題無い。

でも、それでもわざわざ指定したほうが良い理由は、
ブラウザ側の処理に関係するからだ。

ブラウザ（Internet Explorer など）は、
画像ファイルを読み込む前に、width と height を参照することによって、
画像ファイル表示用の領域を予め確保することができるのだ。

だから、指定しないときに比べて表示速度が速くなる。

もし width と height が指定されていなければ、
ブラウザは画像ファイルのデータをすべてダウンロードし終わるまで、
「その画像ファイルの縦横サイズはいくつなのか？」が判定できない。

つまり、画像ファイルの全データをダウンロードし終わってから、
その画像ファイルの縦横サイズを計測し、そのための領域をブラウザ上に
確保するという動作になる。だから表示速度が遅くなるのだ。

ページを重くする原因の多くは画像ファイルにある。
あまりにも画像ファイルを多用し過ぎると、
予想以上に遅くなりすぎる危険性がある。

そして、Ｗｅｂサーバーにアップロード（ＦＴＰ）するまで、
その事実に気付かないことがあるので注意が必要だ。

ほとんどの人は、ホームページ作成中は、作ったＨＴＭＬファイルを
ローカルディスク（つまり自分のパソコンのハードディスク上）
で表示確認をするから、その速度の遅さに気付かない。

しかし、パソコン上のハードディスクへのアクセス速度と、
実際のインターネット上のＷｅｂサーバーへのアクセス速度は、
まったく異なる。

Ｗｅｂサーバーまでたどり着くためには、広いネットワークを経由し、
多くの通信回線やルーターを経由しなければならない。

だからパソコンのハードディスクへのアクセスのほうが圧倒的に速いのだ。
Ｗｅｂサーバーもそれと同じような速度で反応すると思ったら痛い目にあう。

それに注意して作らないと、
アップロードしてから「遅すぎる」という
事態に直面する可能性が高い。

ヘタすれば全部作り直したり、
画像の画質を落とすなどの作業が必要になるだろう。

そうならないためにも、

・必要以上の画像を使わないこと

・ ロールオーバー効果（※）を多用しないこと

などを注意することが大切だ。

（※）ロールオーバー効果とは、
マウスカーソルを乗せると画像が変化するデザインのこと。
１つのリンクについて、２枚の画像ファイルが必要になる。

例えばリンクのボタンなど、「画像じゃなくても出来ること」
は、極力テキストで実現するほうが望ましい。

各ページの分割方法にも注意が必要だ。
単にテーマ別に分けるだけだと、１つのテーマの内容だけが増えすぎて、
そのページサイズのみ大きくなってしまうこともある。

特に、商品画像を多数掲載するようなページは、
１つのページに多くの商品を載せすぎないように注意しなければならない。

あと、無料ホームページスペースなどを使っている人は、
勝手にバナー広告が挿入されると思うが、
それも「ページを重くする要因」である。

「タダほど高いものは無い」と言うが、
無料のものには、それなりのハンディキャップが付いてくる事をお忘れなく。
バナー広告で稼ぐつもりの人も注意してほしい。

それと、会社ロゴ画像のように、
１つの画像を多くのページで使い回すというパターンがあるが、
その時は必ず、リンク元の画像を１つに固定しておくことが大切だ。

つまり、同じ画像ファイルをいろんなフォルダにコピーしてはいけない。
１つのフォルダ内に１つのみ格納しておき、
それを全ページが参照するようにリンクを設定するのだ。

その理由は、ブラウザのキャッシュ機能を利用するためだ。
キャッシュ機能とは、

「一度読み込んだデータを覚えておき、
ハードディスクに保存しておくことで、
２回目からはもう読み込まなくていいようにしておく機能」

である。つまりキャッシュしておけば、同じファイルを何度も
Ｗｅｂサーバーからダウンロードする必要がなくなるのだ。
ブラウザの「戻る」ボタンもキャッシュ機能の１つだ。

そして、キャッシュするかしないかは、
そのファイルの格納場所（つまりフォルダ）
が前回と同じかどうか？によって判定される。

だから、ページが違っても、そのページが参照している画像ファイルの
格納場所が前回と同じなら、その画像ファイルはブラウザにキャッシュ
されるので、当然表示速度も速くなる。

そして、忘れがちなのが、Ｗｅｂサーバーの性能つまり処理速度だ。
安物のレンタルサーバーだとハードスペックが悪く、バックボーン環境も遅い。

そんな最悪な状況では、どんなにファイルサイズを軽くしても焼け石に水なので、
サーバー選びには十分に注意してほしい。

（Ｗｅｂサーバーの正しい選び方については、こちらで詳しく解説中）

成功のポイント：訪問者はみな忙しいことを認識せよ！

続き → 15. デザインで迷ったら軽いほうを選べ！

メール会員登録（無料）
ひと儲けドットコムの更新情報を無料でお知らせしています。いつでも解除できます。

Ｑ．なぜホームページビルダーが必要なのか？

ホーム＞ホームページ制作の極意！＞このページのトップへ