サイトパフォーマンス計測ツールYSlowの評価項目まとめ

YSlowの使い方

▲インストールすると、Firefoxのステータスバー（最下部のバー）に、このようなボタンが表示されます。計測したいサイトを開いて、このYSlowボタンを押します。

▲上記の様な結果が表示されます。
（画像はウチのサイトで計測したもの）
円グラフの方は分かり易いですね。
左側が初めて訪問した人がダウンロードするファイルの総リクエスト数や容量。
右側がPC内にキャッシュを持った人がダウンロードするファイルの総リクエスト数や容量。

左右の測定結果画像はステータスバーYSlowボタンを押すことで切り替え表示されます。

YSlowはこれらサイトパフォーマンスに影響を与える項目を数値化し、サイト改善を手助けするツールです。

YSlow計測結果の意味1

一つ一つの項目について詳しく知りたい場合は
Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳)がお勧め。このページ含め14ページにわたって詳しく解説されています。
そして「サーバーの知識が殆ど無くても、PCやインターネットの知識が多少あるレベル」の人にも分かる様に書いてあるのが素晴らしいです。 

上記サイト内での難しいお話は、大抵がapacheが利用できるサーバー用のお話です。
（さくらのレンタルサーバーのライト～スタンダード～～ビジネスプロどれを選んでもapacheの設定を変更するのは無理っぽい。完全にサーバー管理者向けのお話）

YSlow計測結果の意味2

上から順に。
気になったもの・分かり難かったものだけ細かく解説入れています。

• Makefewer HTTP requests
  HTTPリクエストの数を減らそう
  
  • 1枚のページで沢山のファイル（CSS、JavaScriptだけでなく、画像も含まれる）を読み込んでいるとこの項目で怒られる。CSS、JavaScript、画像をバッサリ削るとゼロになる。
• Uses ContentDelivery Network（CDN）（分かり難かった）
  Content Delivery Networkを使用しましょう
  
  • CDNとは複数の場所に分散されたWebサーバ群でサーバーの負荷を分散させるもの。大企業向けの有料のサービス。個人ユーザーのWebページなら気にしない
• Addan Expires header
  Expiresヘッダーを追加しましょう
  
  • Expiresheaderとは、各ファイルに付いた「有効期限」の情報。PCに残っているネットキャッシュを見ると表示される「キャッシュの有効期限」がそれ。
    主にphp + .htaccessまたはApache + .htaccessで設定を行える。
• Gzipcomponents
  コンポーネントをgzipに圧縮しましょう
  
  • これも主にphp + .htaccessまたはApache + .htaccessで設定を行う。
  • （ちなみに先週、このサイトはcssとjsファイルのみGzipを行い、HTMLファイルのみにExpiresheaderを付加してみましたが、転送量が2/3になりました。）
• PutCSS at the top
  CSSは上に配置しましょう
  
  • CSSはページの上部、HEAD内に置きます。
    CSSをページの下の方に配置すると、一旦スタイルシート適用前の状態でブラウザの描画が行われ、CSS読み込み後再描画が行われます。
    またブラウザによっては、CSSファイルの読込みが終了するまで画面描画が始まりません。主にこれらのロスを防ぐ為のもの。
• PutJS at the bottom
  JavaScriptは下に配置しましょう
  
  • 逆にJavaScriptはHEAD内に書かないようにします。JSファイルの読み込みも同様に、なるべくページの下の方に配置します。
    重たいブログパーツを利用している方なら分かると思いますが、確かにJSファイルは読み込み終了するまで、その先のHTMLを呼んでくれませんよね。
• Avoid CSSexpressions
  CSSのExpression()は使用しない
  
  • Expression()とは昔のIE専用コードの一つ。今となっては必要なし。
• Make JS andCSS external
  JavaScriptとCSSは外部ファイルにする
• ReduceDNS lookups
  DNS Lookupsを減らしましょう
  
  • 通常、ホスト名をIPアドレスに変換するのに20-120ミリ秒かかる。ホストを増やすとここで時間がかかる。しかしホストを減らすとページに対するダウンロードの並列数が減り時間がかかる。さじ加減はサイト運営者次第。推奨は2～4らしい。
  • ブログパーツを一杯貼っているとこの項目はE～Fランクで当たり前（＾_＾;
• MinifyJS（分かり難かった）
  JavaScriptやCSSは圧縮しましょう
  
  • 上の項目のGzip圧縮と何が違うの・・・・？と思って自分のサイトをアレコレ触ってみて、HTML内部に書かれたスタイルシートやJavaScriptに余分な空白や改行がある場合にでる警告だと気が付いた。警告が出る・出ないの線引きが微妙な気がする。
• Avoid redirects
  リダイレクトを使わないようにしましょう
• Remove duplicate scripts
  JavaScriptやCSSの重複を気を付ける
• ConfigureEtags（分かり難かった）
  ETagsを正しく設定しましょう
  
  • Etagsってのはサーバー1台1台に割り振られたIDナンバーみたいなもの。
    サイトを複数のサーバーで運用している場合は、PCにキャッシュされたEtagsと現在接続されているコンポーネントのEtagsが合わず、おかしな事になるらしい。
    これもApache + .htaccessで設定する項目。一般ユーザーには難しい部分。
  • ブログパーツを沢山利用している場合も、気にしても仕方がない項目。
• Make AJAX cacheable
  AJAXをキャッシュ可能にしましょう
• Use GET for AJAX requests
  AJAXではGETメソッドでリクエストしましょう
• Reduce the number of DOM elements
  DOMエレメント数は最小限に抑えましょう
• AvoidHTTP 404 (Not Found) error（注意）
  HTTP 404 (Not Found) は避けましょう
  
  • ブログパーツのJSファイル内で404が発生している場合もあるので注意。
• Reduce cookie size
  クッキーのサイズは最小限に抑えましょう
• Use cookie-free domains
  スタティック画像にはクッキーは使わない
• Avoid AlphaImageLoader filter
  AlphaImageLoaderの使用は避けましょう
• Do not scale images in HTML
  画像はHTMLで大きさを変えず使用する
• Make favicon small and cacheable
  faviconを設置しましょう

あとがき

以前読んだ二十歳街道まっしぐらさんの記事の意味や、最近テンプレートをバージョンアップされた裏技ShopDDさんの記事の中身が、今更ながら理解できました。

先週は.cssファイルと.jsファイルのGzip圧縮を行い、HTML文書に（寿命2時間ほどの）Expiresヘッダーを付加した所で満足していたのですが、、、こうやって色々調べていくうちにcss sprite（各ページ共通の画像を一枚にまとめちゃうテクニック）も是非とも導入したくなりました。

jQueryにも手を出してみようか。。。と思いつつもそこまでJavascriptに詳しくないのでこれはずっと先のお楽しみに取っておく事に。