WEBサイト軽量化のテクニック「CSS Sprite」

WEBページの読み込みスピードがSEOに絡んでくるということで、WEBサイトの軽量化の対策があれやこれやと話題に上がっていますね。

今日はその中の1つ「CSS Sprite」を紹介します。

詳しくはこちらを参照
http://www.designwalker.com/2008/02/css-sprite.html

簡単に言うとロゴやグローバルメニュー、ボタン的なものをすべて１枚の画像に納めて、CSSで制御するという方法です。

今まではスライスした画像を1つ1つimageタグなりCSSの背景なりにブラウザに読み込んでもらって表示するという形式でしたが、CSS Spriteを駆使するとすべてが1つの画像として読み込んでもらえるので表示速度がアップするという流れです。

ブログなどCSSライクのWEBサイトにはうってつけの手法です。

ただブラウザによっては印刷した時におかしな表示になったりするので、結局印刷用のCSSを用意したり２重の労が発生したり…。

色々な手法と比較すると一長一短かもしれませんが、適用したWEBサイトがウェブマスターツールなどでどんな効果となるかチェックしてみたいです。