CSSスプライトによるリクエスト数軽減
YSlowを利用して色々な有名なサイトを閲覧してみると、驚く程の数のHTTPリクエストを発行していることが分かる。さらにはこのリクエストのほとんどがデザイン要素などに利用されている画像であることも分かるだろう。(特にデザイン性の高いサイトであればあるほど)
たかが画像ではあるが、リクエストを発行するオーバーヘッドはかなり高く、1画面に100枚以上の画像に対するリクエストを行うことは、例え1リクエストに対するオーバーヘッドが0.01秒だとしても、100画像で1秒にもなる。つまり、画像1枚のページよりも、画像100枚のページは1秒近く遅くなる可能性がある、とも言える。(CDNの利用や回線の太さ等、様々な要因が絡むため一概には言えないが、あくまでも指標値として考えたい)
特にこの画像に対するリクエストを軽減する技術のひとつが「CSSスプライト」と呼ばれる技術である。

上記の画像がCSSスプライトを利用した画像の一例である。(画像はPNG8で作成してあるため背景が黒くなっているが、実際には透明色)
この1枚画像をCSSで矩形指定することで、1枚の画像から指定したボタンの画像だけを切り出し、ボタンを表示するといったことが可能になる。

上記の画面を見て分かるとおり、CSSスプライトで1枚の画像となったパーツが色んなところで利用されている。ビズリーチでは画質の違いやX方向/Y方向などのリピート画像、その他画面別の画像など、いくつかの観点でグルーピングしたそれぞれのCSSスプライト画像を使っているため、全ての画像が1枚の画像となっている訳ではないが、例えば上記の画面では5枚の画像によって、全てのデザインがレイアウトされている。
一見CSSスプライトは運用負荷が増えるような懸念があるようにも思うが、あくまでも静的なデザイン要素となる画像のみスプライトすることをポリシーとして置けば、ほとんどCSSスプライト画像に手をいれることが無いため、非常に効果的な施策であると言える。