サイトを作成する上で、観覧する人が見やすくする方法に、表示速度を早くしてあげることが上げられると思う。
ここで言う表示する速度とは、サイトのページを開いた際にテキストや画像や動画・FLASHを読み込むのにかかる時間であり、最初にアクセスした際にこれらの全てをダウンロードして一時ファイルとして保存されてはじめて表示するまでの時間をさしています。
なので、なるべくサイトの一ページで表示する総サイズが少ないほど、表示は早くなるという事ですから、飾りで使用している画像のサイズは少ないほど良いという事になります。
光接続などの普及により、通信速度が格段に早くなっている昨今では気にする必要も無いことかもしれませんが、それでもなるべく早く『主要の画像や動画をダウンロード出来るようにする』方が、観覧する人にとって都合が良いストレスの無いサイトが出来るように思います。
phpspot開発日誌さんの【HTTPのリクエストを最小化するためのTIPS】を受けて実際に使う為の方法を考えてみました。
 |
できるホームページHTML入門 Windows対応 (できるシリーズ) 佐藤 和人 できるシリーズ編集部
by G-Tools |
できるホームページスタイルシート入門―Windows対応 (できるシリーズ)
1億稼ぐ! メールマガジン私の方法 銀行口座380円が2億円になった理由
できる大事典 HTML & CSS (できる大事典)
HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?
できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ (できる100ワザシリーズ)
【Googleの検索結果ページは画像を一つしか読み込んでいない (polog)】で知った技法ですが、Googleの検索及び検索結果ではひとつの画像で複数に表示をさせているそうです。
【HTTPのリクエストを最小化するためのTIPS】では「イメージマップ」を用いる方法が述べられていました。
ただ、イメージマップというのは画像内において複数のリンクをさせる技法であり、イメージの情報を読めない検索ロボットに対するSEO的には、「イメージリンクのみのリンク」と同じくあまり好ましく思っていないため、CSSの『positionプロパティによる要素の配置方式』と『overflowプロパティによるはみ出た表示方法の指定』によって実現を試みてみました。
まず以下が元になる画像です。
元になる画像にはあらかじめ幅・200px、縦・100pxの中に色んな絵を書き込んであります。
そして元になる画像を<div></div>にて囲っておき、DIVと画像に以下のようなSTYLEの属性や値を与えていきます。
■ 指定例
DIV
画像
このようにして一部分のみ表示させると以下のようになります。
あとはこれらにリンクをさせたり、テキストを「z-index」などで表示させると宜しいかと思います。
また、複数回使用する物はCSSファイルにまとめておくと尚良いでしょう。
今回の技法はあくまで一例であり、一つ一つ細かく指定しなくてはならない為、はっきりいって面倒な方法であると言えます。
また、同じ画像を何度も呼び出すことには変わり無いので、余りサイズの大きい画像を使用するのでは、今回の方法を利用する意味は有りません。
表示速度を早くするには、複数のCSSファイルやJSファイルを一つにまとめるとか、他にも色々方法があります。
ですから、あくまで一例として考えて、実際に使用するのは時間が余った時に利用するくらいの考えで良いのではと思います。
—–
EXCERPT:
