HTTP リクエストの数を減らすための具体的な方法と対応を考えてみる。

パッと思いつくのは、こんな感じ？

• 分散している JavaScript / CSS を一ファイルにまとめる
• 画像ファイルを減らす
• できるだけクライアントにキャッシュさせて、ファイル要求を減らす

JavaScript / CSS を一ファイルにまとめる

WordPress に各種プラグインを導入すると、どうしても JavaScript / CSS は複数読み込まざるをえない。
また、Prototype.js などのフレームワークを利用して JavaScript を作っている場合も同様だ。
メンテナンス性を求めると、これらをすべて一つにまとめてしまうのはちょっと難しいので、これはとりあえず手をつけないでおく。

しかし、どうしても１ファイルにまとめたければ、YSlow for Firebug の機能で、サイト内の JavaScript / CSS をすべてまとめてくれる機能があるため、これを利用するのも手だろう。
YSlow for Firebug のメニューから [Tools] – [ALL JS] or [ALL CSS] を選択すると、すべてを一ファイルにまとめて表示してくれる。

画像ファイルを減らす

サイトデザインの都合上、CSS で結構な数の背景画像ファイルを読み込んでいる。
著者ごとのタイトルイメージやら、小さなアイコンファイルやらで、全部で 30 にもなる。

で、これらをまとめる手法として CSS Sprites と呼ばれるテクニックがある。
要は、複数の画像ファイルを一つにまとめて background-position: で大きな画像ファイルの中から、必要な箇所を切り出してしまおうと言う手法だ。
最近、はてなブックマークでホッテントリ入りしていた記事「Googleの検索結果ページは画像を一つしか読み込んでいない (polog)」なんかも、実はこのテクニック。

これを一からやってると結構シチ面倒くさいのだが、Stoyan Stefanov氏が提供してくれている Web サービス CSS Sprites generator を使えば、簡単に実現できてしまう。

で、CSS Sprites generator を使って作成した画像に多少手を加えたのが、これとこれ。
CSS 中で30個あった背景画像ファイルを、4個にまで減らすことができた。

できるだけクライアントにキャッシュさせて、ファイル要求を減らす

この辺の対応は「Expiresヘッダーを追加しよう」や「ETagを正しく設定する!」とも絡んでくるので、次回にまわしたいと思う。