オライリーの本「ハイパフォーマンスWebサイト」を読みました。副題は「高速サイトを実現する14のルール」。ブラウザ表示のパフォーマンスを高速化するための方法が具体的に書かれていました。

CSSで出来ることについては、以下の点が書かれていました。

1. CSSスプライトを利用する
2. CSSはlinkタグを使用してhead内に置く
3. CSS expressionの使用を控える
4. CSSファイルは外部ファイル化する
5. CSSのソースコードを縮小化する

CSSスプライト

複数の画像を1つの画像に結合して、CSSのpositionプロパティで表示位置をずらす方法です。読み込む画像は1つなので、HTTPリクエストの数が減り、別の画像を使った場合に比べて57％高速になるのだそうです。

CSSスプライトのソースはSmashing Magazineに数多く掲載されています。→The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Smashing Magazine

この方法を使う場合、画像の座標を調べてCSSに記述するのが手間どりそうです(-_-)そこで便利そうなのが「CSS Sprite Generator」。複数の画像をまとめてzip圧縮してアップすると、結合して1つになった画像とCSSを書き出してくれます。

ちょこっと試してみました^^

---

---

#container li {
   background: url(csg-4affd33884973.png) no-repeat top left;
}
.sprite-chifffon_frog { background-position: 0 0; } 
.sprite-chifffon_kinoko { background-position: 0 -105px; } 
.sprite-chifffon_malon { background-position: 0 -210px; } 

画像の並べ方（縦並び、横並び）、画像と画像の間隔、背景を透明にするかどうかといったような細かい設定ができます。ちなみに、このジェネレーターで生成された画像のサイズは12kbで、FireworksでPNG32形式で保存し直したら8kbになりました。

---

CSSの記述場所や記述方法

他のルールで「スクリプトは最後に置く」というものがありましたが、CSSについては先頭に置くのがルールだそうです。CSSを最後に置いてしまうと、HTMLを上から読んでいくときに、逐次的にCSSを読み込んでいかないと「からっぽの白い画面」現象が起きるそうです。

また、動的にCSSを書き換えるCSS expressionは、ウィンドウのリサイズやスクロール、マウスの移動などのイベントごとにCSSを読みにいってしまい、最悪IEがフリーズしたりするそうです…。なのでCSS expressionは使用を控えましょう、とのことです。

あとは、CSSファイルを外部ファイル化したり、なるべく@importで参照するファイル数を減らしたり、CSS内のタブやスペースを削除したりカラーコードを#000000を#000にしたりする、ということが書かれていました。

ブラウザのレスポンスの評価は、Yahoo!が出しているFirefoxアドオン「YSlow」というツールがあります。日本語版もあるみたいです。

---

関連タグ：CSS html