タイトル画像
サイトタイトル画像

表示の早い・軽いサイトでアクセス数を増加

Web ページの良し悪しを決める重要な要因の1つに、「表示速度」があげられます。
Web ページがどれくらい速やかに表示されるかによって、
そのサイトを訪れた人の受ける印象は異なってくるものです。

あなたのページを軽くするには

Web ページの「表示速度」は

  • 1.ファイル容量 
  • 2.パソコン表示の早さ 
  • 3.体感 
  • 4.サーバの軽さ

の4要素で決まります

HTML ファイルのサイズを小さくしたり、小さい画像を使えば「表示速度」は速くなります。しかし、ここでは「見た目を変えずに」速くする方法を考えてみましょう。

(1)ファイル容量を小さくする

これには大きく分けて2つあります。

  • 物理的なファイルサイズを小さくする方法
  • レンダリングにかかる時間を減らす方法

まず、物理的なファイルサイズを小さくする方法として、「HTML内に含まれるホワイトスペース
の問題を考えます。

<html>
<head>
<title>ホワイトスペース</title>
<body>

<p>ABC              ABC</p>
<p>ABC ABC</p>
<p>ABC					ABC</p>

</body>
</html>

HTMLファイルでは改行コード(CR,LFの両方)、1バイトの空白、タブはすべて「ホワイトスペース」と呼ばれ、何文字連続しても、レンダリングされると1文字分しか表示されません。

代表的な「不必要な」情報の例

不必要な情報 解説 サンプル
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 …>

(2)パソコン表示の早さ

画像はページが表示されてからダウンロードされますが、中にはページと同時に表示されないと困る画像などがあります。そういう場合は、画像を前もってロードする機能を使うこともできます。

<script type="text/javascript">
<!--
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"; 

</script>

とりあえず、画像に JavaScript 用の名前をつけ、「その名前 = new Image() 」で新しい画像であることを宣言します。そして「その名前.src = "その画像の場所"」と画像を指定します。

全て半角英数で入力しましょう。「 ; 」はコードの終わりを意味します。

改行だけでもかまいませんが、他の言語の多くは改行だけではコードの終わりを意味しないため、 JavaScript でも「 ; 」の使用を優先する人が多いです。

(3)体感

テーブルの表示をす早くするには

  • 1.テーブルの中にテーブルを入れる等はしない(遅くなる) (どうしても入れる時は1個のセルにする)
  • 2.テーブルは分割して細かく作ること (除々に現われ、一個見ている間に他が表示されていく、しかも表示が早い)

(3)サーバの軽さ

(Web ページを置いているサーバの性能、回線容量及び同時使用者数による)

  • 1.軽い領域を ゲット しミラーサイトを作る

(4)URLの最後にスラッシュ( / )をつける

削除すると転送されるデータ量が増えるものもあります。

それはリンクなどで URL を指定する場合で「 http://www.~/uguisu/ 」のように、最後に「/(スラッシュ)」がついているものです。

http://~/uguisu で終わってしまうURLをよく見掛けますが、uguisu がディレクトリ(フォルダ)であれば、 http://~/uguisu/ のように最後にスラッシュ( / )をつけましょう。

(5)全般

市販ソフトは購入しなくてもウィンドウズのメモ帳で十分。 (パソコン内で表示のソースを変更し更新で確認し編集する) (Web ページの自由度大で工夫しだいで軽くできる)

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2005/02/10)