K's Labo Rebooted

きっと皆さんも頻繁に利用されていると思う「Google」ですが、表示、速いですよね〜。で、その表示速度の速さには実は秘訣があり、軽微な改修を施すだけで一般の方々も実現可能なんですよ。

そもそも「Google」の表示が何故速いのかとひとことで言うと、表示に関するコネクションの頻度が少ないからです。

コネクション？なんのこっちゃ？って方向けに説明しますと、一般的にサイトを閲覧する際には、ウェブサーバーとブラウザ間で画像等のあらゆる情報のやり取りが発生します。まっ、これがコネクションですね。画像ひとつの読み込みに対して、ひとつのコネクションが発生します。（ここまでいいですか〜？）つまり、サイト上にたくさんの情報（画像等）を網羅すればするほど、コネクションの数は跳ね上がり、ウェブサーバーとの通信が多くなり、ひいては表示速度にも影響するってことです。
上記の内容を考慮して言えば、コネクションの数を少なくすれば表示速度が早くなる！ってな訳です。

上記にも書きましたが、画像ひとつの読み込みに対して、ひとつのコネクションが発生します。でも、サイトには画像は付き物。コネクションの数を少なくする為だけに、画像の数は減らせない・・・。そうそう、そうですよね〜。サイトは見栄えが命です。画像が無いサイトなんて味気ない。あ〜、頭が痛い・・・。

で、話は戻ります。
そこらあたりの問題を「Google」はいったいどうしてるかと言いますと、複数の画像をひとつにまとめてしまい、CSSのポジションをずらすっていう手法でコネクションの数を減らしています。つまり、この手法を用いると、ウェブサーバーからの画像の読み込みは一回で済み、コネクションの数が抑えられる訳です。

それでは例をあげて説明します。
皆さん、よくご存知の「Google」の検索結果のページですが、サイト上に「Google」のロゴがありますよねぇ〜。あれって実は、ひとつの画像のように見えますが、実際は複数の画像がまとめられたファイルの、とある一部分だけを表示しているのにすぎないんですよ。
で、下記の画像が、「Google」の検索結果で実際に使用してる画像です。



どうです。よ〜く見かける画像がひとつにまとまってるでしょ。

え〜っと、実を申しますとこのブログでも同様な手法を用いております。コネクションを気にするほど、さほどアクセスがあるサイトではないのですが・・・。念の為ですよ、念の為。

下記の画像をご覧くださいませ。

実際にこのブログで使用している画像です。これも複数の画像をひとつにまとめています。
で、CSSで表示するポジションをずらすことによって、サイト上の適切な位置に表示してるって次第です。

まぁ〜、ここまで書いたのも何かの縁。このブログで実際に使用してるCSSの該当箇所を下記に記載しときます。ご参照あれ。

.section .sprite {
    margin: 0px;
    padding: 0px;
    background: url("./images/bnr187.jpg") no-repeat top left;
    width: 187px;
    height: 26px;
}
.section #blogroll { background-position: 0 -5px; }
.section #categories-archives { background-position: 0 -67px; }
.section #feed { background-position: 0 -98px; }
.section #links { background-position: 0 -129px; }
.section #monthly-archives { background-position: 0 -160px; }
.section #profile { background-position: 0 -191px; }
.section #calender-view { background-position: 0 -36px; }

内容が簡潔にまとまってないような気もしますが、こんな感じでお分かりになられましたでしょうか？ちと不安。

あっ、そうそう。
画像をまとめるのが面倒。CSSを書くのに不安がある。そんな方の為に、大変便利なジェネレーター・サイトを最後に紹介しておきます。ここ（↓↓）です。
CSS Sprite Generator

上記のサイトに赴き、事前に複数の画像を圧縮したzipファイルをサイト上からアップロードすれば、そのzipファイル内の画像を連結しひとつにし、さらには表示する為のCSSまで自動で生成してくれます。
いや〜、ありがたや〜、ありがたや〜。