Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ゼロから学ぶ「CSS Sprite」

Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 CSS Spriteとは、ページ内で使用する複数の画像をひとまとめにして、CSS(Cascading Style Sheets)側の記述で表示を調整し、HTTPリクエスト数の軽減を計るテクニックのことを言います。この記事では、CSSが具体的にはどのような物か、またYahoo! Japanではどのように利用しているのかを説明します。

目次

概要

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

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

利点
  • 画像のリクエスト数を減らすことができる
  • 画像の容量を軽減できる
欠点
  • Sprite画像の作成や構築に時間がかかる
  • 画像を追加するときに、再度Sprite画像を調整する必要がある
  • CSSへの記述が多少複雑になる
  • Alt属性が使用できなくなる

 更新作業で画像を何か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によるマークアップは不都合なくできる方向けとします。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 岡部 和昌(ヤフー株式会社)(オカベ カズマサ)

    ヤフー株式会社 R&D統括本部 制作本部 ウェブデベロップメント部 所属。 1983年生まれ、埼玉県出身。大学で応用化学を学んだ後2006年にヤフー株式会社初のデザイナー新卒採用にて入社。同社では、Yahoo! JAPANトップページ、My Yahoo!などでマークアップの主担当。 ペー...

バックナンバー

連載:Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5