cssスプライトや書き方でホームページ表示の高速化

スタイルシートの使い方一つでページの表示速度を早くする事ができます。

スタイルシートの書き方

スタイルシートのcssセレクタ(div{…})の書き方によってホームページの表示速度がかわります。

例えば、

div #header ul li{}

と書かれていた場合、
li→ul→#header→divと一番右から左へとさかのぼって
スタイルを適用するかどうかを決めていきます。

そのため、多くに適用されやすいセレクタを入れると、
ページ全体のそのセレクタを調べるので遅くなる原因になってしまいます。

極力idセレクタ、classセレクタ一つで設定する事が高速化の鍵です。

例えば、

li .first{}
↓
.li-first{}

すぐにでも変更できるのが、

div#header{}→#header{}

必要が無いセレクタはかかないようにする

cssスプライト

cssスプライトとは、複数の小さな画像を一つにまとめて画像のダウンロード回数を1回ですませるようにする方法です。

例えば、

スプライト化していないcss

一枚一枚画像を読み込ませて表示させた場合

.wp{ background-image:url(img/wplogo_s.gif);}
.php{ background-image:url(img/phplogo_s.gif);}
.jquery{ background-image:url(img/jqlogo_s.gif);}
.free{background-image:url(img/freelogo_s.gif);}
.book{background-image:url(img/booklogo_s.gif);}
.apache{background-image:url(img/apachelogo_s.gif);}
.web{background-image:url(img/weblogo_s.gif);}

7回のダウンロード、合計7.625KBの容量、かかった時間が5.94s

スプライト化したcss

一枚の画像にまとめて読み込ませて、cssで表示させたい部分だけ表示させた場合

まずは、7つの画像を一つにまとめた画像を作ります。

一枚の画像にしてくれるサイト(外部サイト)
※cssスプライトする画像データ（.gif.jpg.png）に合わせて一枚画像に変更します。

li{background:url(img/css-splite.gif) no-repeat top left;}
.wp{background-position: 0 -450px!important;}
.php{background-position: 0 -300px!important;}
.jquery{background-position: 0 -225px!important;}
.free{background-position: 0 -150px!important;}
.book{background-position: 0 -75px!important;}
.apache{background-position: 0 0;}
.web{background-position: 0 -375px!important;}

1回のダウンロード、容量も4.41KB かかった時間が5.10s
画像のダウンロード回数が減り、画像容量が軽くなるため0.84秒早くなりました。
※ちなみに結合したデータが重すぎると、逆に遅くなることがあるので、場合にもよります。