SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

MarkeZine Day(マーケジンデイ)は、マーケティング専門メディア「MarkeZine」が主催するイベントです。 「マーケティングの今を網羅する」をコンセプトに、拡張・複雑化している広告・マーケティング領域の最新情報を効率的にキャッチできる場所として企画・運営しています。

直近開催のイベントはこちら!

MarkeZine Day 2025 Retail

業界キーパーソンと探る注目キーワード大研究

コンバージョンを上げるための
サイト高速化施策ベスト3


CSSスプライトによるリクエスト数軽減

 YSlowを利用して色々な有名なサイトを閲覧してみると、驚く程の数のHTTPリクエストを発行していることが分かる。さらにはこのリクエストのほとんどがデザイン要素などに利用されている画像であることも分かるだろう。(特にデザイン性の高いサイトであればあるほど)

 たかが画像ではあるが、リクエストを発行するオーバーヘッドはかなり高く、1画面に100枚以上の画像に対するリクエストを行うことは、例え1リクエストに対するオーバーヘッドが0.01秒だとしても、100画像で1秒にもなる。つまり、画像1枚のページよりも、画像100枚のページは1秒近く遅くなる可能性がある、とも言える。(CDNの利用や回線の太さ等、様々な要因が絡むため一概には言えないが、あくまでも指標値として考えたい)

 特にこの画像に対するリクエストを軽減する技術のひとつが「CSSスプライト」と呼ばれる技術である。

ビズリーチの基本パーツ画像(CSSスプライト画像)
ビズリーチの基本パーツ画像(CSSスプライト画像)

 上記の画像がCSSスプライトを利用した画像の一例である。(画像はPNG8で作成してあるため背景が黒くなっているが、実際には透明色)

 この1枚画像をCSSで矩形指定することで、1枚の画像から指定したボタンの画像だけを切り出し、ボタンを表示するといったことが可能になる。

ビズリーチ求人一覧画面
ビズリーチ求人一覧画面

 上記の画面を見て分かるとおり、CSSスプライトで1枚の画像となったパーツが色んなところで利用されている。ビズリーチでは画質の違いやX方向/Y方向などのリピート画像、その他画面別の画像など、いくつかの観点でグルーピングしたそれぞれのCSSスプライト画像を使っているため、全ての画像が1枚の画像となっている訳ではないが、例えば上記の画面では5枚の画像によって、全てのデザインがレイアウトされている。

 一見CSSスプライトは運用負荷が増えるような懸念があるようにも思うが、あくまでも静的なデザイン要素となる画像のみスプライトすることをポリシーとして置けば、ほとんどCSSスプライト画像に手をいれることが無いため、非常に効果的な施策であると言える。

次のページ
Gzip圧縮による通信量軽減

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
業界キーパーソンと探る注目キーワード大研究連載記事一覧

もっと読む

この記事の著者

竹内 真(タケウチ シン)

WEBメディア特化型制作/開発会社、株式会社レイハウオリの代表取締役。
「High Performance HTML」など、技術がビジネスに直結するような自社ソリューションを開発する傍ら、自らもエンジニアとしてOSS「mobylet(Seasar ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2010/07/05 16:32 https://markezine.jp/article/detail/10087

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング