YSLOW 勉強 : 1: Minimize HTTP Requests

• YSlow for Firebug

内向きに話題になっていたYSLOWをインストールして試してみるという話。YSLOWはrules for high performance web sites（ウェブサイトを高速にするルール）に記載されている法則に則って、ウェブページの表示を遅くしている原因が何かを教えてくれるFirebugzの拡張プラグインです。

rules for high performance web sites のルールは全部で13個。その一つずつを、小刻みに勉強していこうという試みです。

一つ目は「1.Minimize HTTP Requests」。ユーザーの待ち時間の大半は画像やCSS、javascript、Flashなどのページの構成要素のダウンロードに費やされているから、これらの数を減らして HTTP request の数を減らしていこうということ。ページのリッチさを保ちつつ、HTTP requestを減らすアイデアが記されています。

1. イメージマップを利用して画像の点数を少なくする：ナビゲーションバーなど、統合できる画像を統合して、HTTP request を減らす
2. 「CSS Sprites」という手法を使う：いくつかの画像を一つの画像にまとめて、background-positionでずらしながら利用する。
3. インライン（imgタグ）で挿入している画像をCSSで表示するようにする：インライン上の画像は実際のページに組み込まれるため、HTML ドキュメントのサイズを増やしてしまう。だから（キャッシュされる）CSS上で呼び出す方が良い。
4. ファイルを統合する：JavascriptやCSSなどのファイルをひとつにまとめて HTTP request の数を少なくする。

ちなみに、memolog.orgのトップページの判定はD判定・・、Feed Flareの外部Javascriptがエントリーごとに入っているために、評価が下がっているようです。スタッツ用に埋め込んでいるけど（たぶん）トップページには必要なさそうなので、外してみよう。