ゼロから学ぶ「CSS Sprite」

概要

　CSS Sprite（シーエスエススプライトと読みます）とは、ページ内で使用する複数の画像をひとまとめにして、CSS（Cascading Style Sheets）側の記述で表示を調整して、HTTPリクエスト数の軽減を計るテクニックのことをいいます。この手法を用いれば、主にimg要素のリクエスト数を軽減できます。フロントエンド側でページ表示速度の高速化を計るには、CSS Spriteを導入することが比較的容易で、効果も高いと考えられます。

　利点や欠点は次のとおりです。

　更新作業で画像を何か1つ追加するだけでもSprite画像全体を調整する必要があります。

　「HTTPリクエスト数の軽減」と「更新のしやすさ」のバランスを考え、どのように画像を管理するかを検討することも大事になってきます。画像はまとめればまとめるほど、更新・運用などの保守作業が複雑になってしまうからです。

　そのためYahoo! JAPANトップページではいくつかのCSS Sprite画像（以下、Sprite画像）に分けて作成し、更新を行っています。また毎回読み込まない画像やカラーテーマごとの画像などは別のSprite画像として用意するとよいです。

　また、img要素ならalt属性を用いて説明文を記載していると思うのですが、Yahoo! JAPANトップページでは、音声ブラウザで読み上げてもらいたいものに対して、title属性を代わりに用いています。

　ちなみにYahoo! JAPANトップページでは過去に、複数あった画像をまとめてCSS Spriteの最適化を行いました。速度の計測にはFirefoxのアドオンであるYSlowを用いて、ほぼ同時間帯にてhttp://www.yahoo.co.jpとは異なる開発環境にて確認しています。厳密な比較テストではありませんので、あくまで参考値としてご覧ください。

　この結果、画像のリクエスト数を19ほど減らすことに成功し、CSS Sprite最適化前は平均0.53秒だったのに対し、最適化後は0.46秒と微量ながらも0.07秒ほど向上しました。

　Yahoo! JAPANトップページは1日で2億近くのPVがあるので、0.07秒×2億の時間が浮いた計算になり、19リクエスト×2億のリクエスト数が軽減されたことにもなります（実際にはキャッシュなどもあるので、このままの値ではありません）。このように軽減されるリクエスト数が小さな差だとしても、PVが多いページほどその恩恵を受けることができます。このことからCSS Spriteを最適化するだけでも表示速度が向上し、リクエスト数が軽減されることが分かります。

　では、具体的にはどのような物なのか、順を追って説明していきます。前提として、通常のHTMLとCSSによるマークアップは不都合なくできる方向けとします。