「早く」はHPの大事な要素です。
せっかくあなたのHPに来てくれも、なかなかページが表示されないとイライラして×クリックして帰ってしまうかも知れません。では早くするのはどうしたら良いでしょう。
○トップページを軽くする。
トップページの表示は2秒以内に出ることを目安にしたら良いと思います。なぜ2秒かというと、私は2秒以上は待てませんので(笑)
最近ブロードバンドで通信速度がどんどん速くなっていますので、どれくらいのコンテンツをトップページにおけるのかが変わっていますが、私の「mickのDIYガーデニング」ではトップのhtmlファイルが14kB、gifファイルが11kB、写真一枚25~50kBとなっています。合計で50kB~75kBくらいですね。
このコンテンツをINS64の回線で見ている人は大体8kB/秒の転送速度ですから、8~9秒かかることになります。
2秒じゃないじゃん! と言わないでください。gifとjpegなどの写真やロゴについては
IMG src="niwa/200503/05/crocus.jpg" width="600" height="400"とサイズを指定しています。こうすると写真の表示エリアを空けて文字部分が先に表示されるので、文字を読んでいるうちに写真が出てくるという計算です。
htmlのファイルは14kBと2秒以内をクリアしています。
軽くするためどうするかをまとめると
○タイトルロゴの画像ファイルは避ける
画像ファイルでサブタイトルなどつけるとデザイン的に格好良いですが、1個あたり10kB程度の重さがあるので最小限にします。
○写真は大きなものをトップに貼らない
私はトップには1枚だけ、しかも50kB以内を目処にしています。ブロードバンドなので大きめにしました。
○画像ファイルはサイズ指定する
width="600" height="400"というやつで指定します。HP作成ソフトでも画像のプロパティで指定できます。
大きな画像を表示指定で小さく表示しても意味ありませんので、画像ソフトでリサイズして小さくしておきましょう。
○画像効果など凝った演出をしない
画面をワイプ効果で切り替えたり、雪が降るなどの画像演出は面白いけど飽きます。
○音楽を貼らない
これは好き好きですが音楽をつければ重くなります。
○HP作成ソフトに任せっぱなしにしない
これもhtmlのソースを読むことの出来る力が必要ですが、HP作成ソフトは不必要、無意味なタグなどがついてしまうことがあります。特にダイナミックhtmlという写真にマウスを乗せると写真が変わるなどのJavaScriptを使用した場合に注意が必要です。その効果を使わなくなっても挿入されたタグの残骸が山ほど残ります。mickの場合はこの不要タグをテキストエディタで修正し、 topページを半分にダイエットしました。
○外部CSSファイルを使う
スタイルシートを使うとhtmlファイルを簡潔に表現できます。このスタイルシートを外部ファイルとして共通に使うとさらに軽くなります。
○プロバイダを選ぶ
いくら軽いページを作ってもHPを置いたプロバイダのインターネットへの接続インフラが細いとか、同じサーバーに極端に重いHPがあるなどでレスポンスが悪い場合があります。この場合はプロバイダを変えるしかないですね。
プロバイダ選びについては改めて。