サイト表示を早くするCSSスプライトとは?

時間
芸能人は歯が命であるように、ウェブサイトは軽さが命である。
表示の重いサイトが私は大嫌いだ。
訪問者に見てもらおうという気があるのか、と思う。
このブログもチャットプログラムや鳳凰の画像やらのせいで重めですみません。バナー広告もちょっと重い気がする。

以下のようなデータもあるらしい。

  1. ユーザーがページ表示に待てるのは2秒まで。
  2. 3秒以上かかると40%以上のユーザーは離脱する。
  3. 表示が1秒遅れるごとにコンバージョン率は7%落ちる。
  4. 表示が1秒遅れるごとに顧客満足度は16%落ちる。

引用元:最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012 | 海外SEO情報ブログ

やはり、表示が遅いサイトというのは誰もが嫌うものらしい。
ネットサーファーはみんなせっかちである。
1番や2番などはモロに私のことを指している。

CSSスプライトとは?

サイトの表示を早くするテクニックの一つに「CSSスプライト」というものがある。
これが何かを今回は説明しよう。

例えばこのブログをPCで表示させると、ページ最上部に「トップページ」、「お問い合わせ」、「仕事のご依頼」という3つのメニュー項目がある。
これらの文字は毛筆体フォントで表示させるため、画像として表示している。
スマホから閲覧している方はわからないと思うので、キャプチャ画像を貼り付けておきます。
ページのキャプチャ画像

これら3つのメニュー項目をそれぞれ以下のような画像として用意し、
トップページ
お問い合わせ
仕事のご依頼
これら3つの画像をページ上に並べて表示させたとしても、見た目のうえでは今と変わらないので特に問題はないように思われがちだ。

同時接続数によって発生する読み込み待ち時間

しかし実は、上記のやり方はあまりよくない。
なぜなら、画像を3つサーバーから読み込むということは、HTTPリクエストが3回発生することになる。

ブラウザには同時接続数というものがあり、例えば同時接続数が2の場合なら、とある2つのファイルの読み込みをしている間は別のファイルの読み込みは開始できないということになる。

つまりHTTPリクエストの数が多いと、待ち時間が多く発生しがちになる。

HTTPリクエストを減らすことが重要

上で説明したようにHTTPリクエストの数はページ表示の体感速度にけっこう影響してしまうので、上に挙げた3つの画像を以下のような1枚画像とし(1枚であることがわかりやすいように本来は透明の部分に水色をつけてあります)、
3枚の画像を1枚にまとめる

CSSファイル内では、

background-image : url(画像のパス);
background-position : **px **px;

のようにbackground-positionを使ってそれぞれを表示させるほうが良い。
同じ1枚の画像をbackground-positionをずらすことによって各箇所に適切な位置で表示させるわけだ。
この方法ならHTTPリクエストが1回で済む。
もともと複数に分けてあった画像を1枚にまとめただけなので、画像ファイルの合計容量もさほど大きくはならない。

実際にこのブログでは以下の画像を使用しており、いくつかの箇所の画像を1枚にまとめてCSSスプライトで各箇所に表示させている。
(1枚であることがわかりやすいように本来は透明の部分に水色をつけてあります)
各画像を1枚にまとめる

かかる読み込み時間を計測する方法

HTTPリクエストの数や時間がどのぐらいかかるかを確認したい場合は、Firefoxなら右クリックメニューの中の「要素を調査」、「ネットワーク」から確認したり、拡張機能の「Firebug」を使用することでも見ることができます。
Chromeの場合も右クリックメニューから「要素を検証」、「ネットワーク」と選択していけば見ることができます。
Firebugのネットワーク