表示の早い・軽いサイトでアクセス数を増加
Web ページの良し悪しを決める重要な要因の１つに、「表示速度」があげられます。
Web ページがどれくらい速やかに表示されるかによって、
そのサイトを訪れた人の受ける印象は異なってくるものです。
あなたのページを軽くするには
Web ページの「表示速度」は
- １．ファイル容量
- ２．パソコン表示の早さ
- ３．体感
- ４．サーバの軽さ
の4要素で決まります
HTML ファイルのサイズを小さくしたり、小さい画像を使えば「表示速度」は速くなります。しかし、ここでは「見た目を変えずに」速くする方法を考えてみましょう。
（１）ファイル容量を小さくする
これには大きく分けて２つあります。
- 物理的なファイルサイズを小さくする方法
- レンダリングにかかる時間を減らす方法
まず、物理的なファイルサイズを小さくする方法として、「ＨＴＭＬ内に含まれるホワイトスペース」
の問題を考えます。
<html><head><title>ホワイトスペース</title><body><p>ABC ABC</p><p>ABC ABC</p><p>ABC ABC</p></body></html>
ＨＴＭＬファイルでは改行コード（ＣＲ，ＬＦの両方）、１バイトの空白、タブはすべて「ホワイトスペース」と呼ばれ、何文字連続しても、レンダリングされると１文字分しか表示されません。
代表的な「不必要な」情報の例
| 不必要な情報 | 解説 | サンプル |
|---|---|---|
| META Generator | ファイルを作成したアプリケーションの名前を格納する | <META name="GENERATOR" content="IBM WebSphere Home…> |
| X-で始まるエレメント | HTMLエディタが利用するための情報 | <X-CLARIS-WINDOW TOP=43 BOTTOM=…> |
| P,TD,TH,TRなどの終了タグ | 省略可能なタグもある。ただし削除により結果が変わる場合もある | </P>,</TD>,</TR>,</TH>,</TR> |
| コメント | HTMLエディタが、独自情報をコメントとして埋め込んでいる場合がある | <!-- Fireworks 4.0 Dreameweaver 4.0 …> |
（２）パソコン表示の早さ
画像はページが表示されてからダウンロードされますが、中にはページと同時に表示されないと困る画像などがあります。そういう場合は、画像を前もってロードする機能を使うこともできます。
<script type=<!-- title = new Image(); title.src = "imgs/title.gif"; title2 = new Image(); title2.src = "imgs/title2.gif"; dog = new Image(); dog.src = "imgs/photos/hachikou.jpg";"text/javascript"></script>
とりあえず、画像に JavaScript 用の名前をつけ、「その名前 = new Image() 」で新しい画像であることを宣言します。そして「その名前.src = "その画像の場所"」と画像を指定します。
全て半角英数で入力しましょう。「 ; 」はコードの終わりを意味します。
改行だけでもかまいませんが、他の言語の多くは改行だけではコードの終わりを意味しないため、 JavaScript でも「 ; 」の使用を優先する人が多いです。
（３）体感
テーブルの表示をす早くするには
- 1.テーブルの中にテーブルを入れる等はしない(遅くなる) （どうしても入れる時は1個のセルにする）
- ２．テーブルは分割して細かく作ること (除々に現われ、一個見ている間に他が表示されていく、しかも表示が早い)
（３）サーバの軽さ
（Web ページを置いているサーバの性能、回線容量及び同時使用者数による）
- 1.軽い領域を ゲット しミラーサイトを作る
（４）URLの最後にスラッシュ( / )をつける
削除すると転送されるデータ量が増えるものもあります。
それはリンクなどで URL を指定する場合で「 http://www.～/uguisu/ 」のように、最後に「/（スラッシュ）」がついているものです。
http://～/uguisu で終わってしまうURLをよく見掛けますが、uguisu がディレクトリ（フォルダ）であれば、 http://～/uguisu/ のように最後にスラッシュ( / )をつけましょう。
（５）全般
市販ソフトは購入しなくてもウィンドウズのメモ帳で十分。 (パソコン内で表示のソースを変更し更新で確認し編集する) (Web ページの自由度大で工夫しだいで軽くできる)
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
