表示の速いホームページの作り方

ホームページの表示を速くするには、画像の使用は必要最小限にすること、画像のファイルサイズは適度に縮小することなどが必要です。また、ページ全体を表で囲まないことや表は大きくしないで区切って使うことなど注意すべき点を解説しました。

ネットサーフィンをしていると時々とても表示の遅い(重い)ホームページがあります。もちろん画像を多用して表示が遅くなっている場合もありますが、なかなか表示されないで待っていると最後に急に表示されることがあります。これはひとつの表(TABLE)の中に全ての画像や文字を入れている場合があります。

私は表示の遅いページは大嫌いです。数秒間で表示されなければさっさとページを閉じてしまいます。だから私が作るページは内容と表示の速さを最優先にしています。表示の速いホームページを作るにはどうしたら良いのか考えてみました。

画像の使用は必要最小限にする

文字だけのファイル(テキストファイル)はファイルのディスク上のサイズは約数キロバイト(kB)程度で小さいものです。それに比べて 画像楽天 のファイルは通常その10倍~100倍以上もの大きさがあります。

これをそのまま表示させるとページが非常に重い(表示が遅い)ものになってしまいます。画像は画素を縮小してその使用は必要最小限にしましょう。

また、メニューのように画像の代わりにテキスト(文字)を使えるものはテキストで表示するようにしましょう。

画像のファイルサイズは適度に縮小して使う

最近はブロードバンドが流行っていてダイヤルアップからフレッツISDNに、フレッツADSLから光ファイバーへと移行しています。通信のスピードが速いので、知らず知らずの間に表示の遅い(重い)ページを作ってしまいがちです。

画像のファイルサイズはせいぜい50kB以下に縮小して使うのがホームページ作成のマナーというものです。ダイヤルアップの人の為にできれば20kB以下にしたいものです。

どうしても綺麗な画像を載せたい場合は、サムネイル画像をホームページに表示して必要な人だけにダウンロードさせるようにするべきでしょう。私はホームページで使う画像のサイズは約240X320ピクセルに統一しています。

ここで言うファイルサイズとは、ディスク上のファイルの大きさであり、表示された画像の縦と横の幅ではありません。時々1MBもある画像の縦横サイズだけを小さく表示するように指定していて、画像の表示が非常に遅いものがあります。注意してください。

表(テーブル)はできるだけ使わない

凝ったデザインやしゃれたレイアウトのページを実現する為には表(TABLE)を使うのが手軽でよく使われています。表というものは表の中身が全て読み込まれてからでないと表示されません。

通常、ホームページは読み込まれた順番に表示されます。しかし、表の場合は、中身を全部読み込んでからでないとレイアウトを決定できないので、読み込み中は表示できないのです。

表を全く使わなくてもホームページを作ることができます。まずは表を使わないページを作ってみましょう。レイアウトだけの為に表を使うのはやめたいものです。

特にページ全体を表で囲まない

ページ全体を表で囲むと全ての内容を読み込んでからでないとページを表示しません。何秒間も待たせて突然ページ全体が表示されるのを見たことはありませんか。

ひどいのは文字しか無いのに表で全体をくくったページがあります。ページのレイアウトの為に安直に表を使ったものと思われますが、テキストのレイアウトにはスタイルシートを使うのが基本です。

ひとつの表は大きくしないで区切って使う

表を使う場合、次のように途中で区切ってやると表は上から順番に表示されるので、上の表が読み込まれたら下の表を読み込み中でも表示されます。

JavascriptよりHTMLを使用する

Javascript(ジャバスクリプト)は便利でHTMLではできない事が簡単にできる場合があることから、よく使われるようになってきました。しかし、JavascriptではどうしてもHTMLよりファイルが大きくなり、表示速度が遅くなります。HTMLで実現できることはできるだけHTMLを使うことで少しでもページの表示を速くするようにしましょう。

ページのデザインはスタイルシートでする

テーブルを使ってページをデザインすると、一般的に表示は遅くなります。また、テーブルを使わなくても、スタイルシート(CSS)を使わないでデザインすると、タグの数やコードが増えてどうしても表示が遅くなるものです。

デザインとページの内容は分離して、ページのデザインはスタイルシートに任せて、表示の速いホームページになるようにしましょう。

ページのサイズは適度な大きさにする

時々、テキストだけのページでも非常に大きなページを見ることがあります。どこに何が書いてあるのかを探すだけでも大変です。ひとつのページの大きさはテキストだけしかなくても10~30kB以下になるようにしましょう。

ホームページは見てもらわなければ存在する意味がありません。適度なファイルサイズで、表示が速く、読みやすいページを作るように心がけましょう。ちなみにこのページのサイズはインクルード前で約6kBです。

PDFファイルはできるだけ使わない

PDFという拡張子のファイルはAdobe Systems社によって開発された電子文書で印刷に適した規格です。Adobe Acrobatが生成したファイルで、画像や表や文字列が一つのファイルとなっています。

この文書を読む為のAcrobat Readerは起動時に大量のプラグイン(組み込みソフト)を読み込んでいる為に、非常に動作が遅くていらいらさせられます。

文書をファイルにするのにはPDFは手軽なのでよく使われていますが、同じ内容でHTMLかテキスト(文字)でもページを作成してほしいものです。

PDFファイルはファイル内の文字列の検索ができないので閲覧に手間がかかります。印刷に適したファイルの為か拡大すると横スクロールが必要な事が多く操作が不便です。