YSlow2.0の使い方

YSlowとは

サイトの表示スピードをクライアントサイドでチェックできるYSlowの新バージョンの2.0がリリースされました。（4月30日）

Firefoxのプラグインとして簡単に使えます。Firefoxで、YSLOWのダウンロードサイトを開き、モジュールをダウンロード（Add-on）すれば簡単に利用できます。

ブラウザの右下に「YSlow x.xxxs」という表示が出ますので、これをダブルクリックすると詳細なツールを利用できるようになります。

サイトの体感速度をランク化したり、通常では分かりづらいキャッシュのかかり具合などを測定してくれます。

YSlow1.0からの変更点など

今回のバージョンアップでUIやYSlow自体のデザインが大きく変わっていますが、
大きなポイントはやはりGradeでのチェック項目の追加でしょうか。

追加項目

以下が新規に追加されたチェック項目です、見落としがちなところばかりですね。

• Avoid CSS expressions
  • CSS expressionsは避けよう。 マイクロソフトが「CSS expressionsはIE8ではサポートせず」とアナウンスしています
• Remove duplicate JavaScript and CSS
  • 重複したJavaScropt、CSSファイルは無しで。特にIEは2重のリクエストが発生します
• Use GET for AJAX requests
  • AjaxではGETメソッドでリクエストしよう。
    POSTだとキャッシュをかけにくい事に起因するかと思いますが、キャッシュを絶対にさせない場合はPOSTの方が望ましいかもしれません。
• Make AJAX cacheable
  • 普段使いのAjaxリクエスト先のAPIはキャッシュがかかるようにしよう
    上記と関連する項目ですが、Y!のブログでは「Ajaxリクエストで更新データを確実にFEEDするにはGETでクエリにタイムスタンプをつけて渡そうよ！」という解釈です。
• Reduce the number of DOM elements
  • DOMエレメント数（HTMLのタグのノード数）は最小限に切り詰めよう
    Y!のブログでは「Y!のページはDOM数は700以下にしている」そうです
• Avoid HTTP 404 (Not Found) error
  • 「ページが見つかりません」404エラーは避けよう
    Not Foundのリクエストはそれ自体がWebサーバに負担をかけます
• Reduce cookie size
  • クッキーの（文字列を含む）全体のサイズは最小限に
• Use cookie-free domains
  • スタティック画像などにはクッキーは付けないでおこう
    （マスタドメインにクッキーを付けるとこの辺は厳しいですね。スタティック画像は別ドメインで切り分けた方が無難なのでしょうか）
• Use cookie-free domains
  • スタティック画像はクッキー無しで。上記「Use cookie-free domains」に関連する項目です
• Do not scale images in HTML
  • IMGタグは画像の大きさをそのまま使おう。必要以上に大きな画像は避けよう
• Avoid AlphaImageLoader filter
  • AlphaImageLoaderはIEがフリーズするので避けよう（そうなんですね・・・）
• Make favicon small and cacheable
  • faviconを作ろう。小さくコンパクトにキャッシュをかけて。404エラーも防げます

ありんくトップページをチェック

ありんくのトップページをチェックしてみました。

クライアントの体感速度の状況

キャッシュやHTMLの構成など、総合的に判断されます。ありんくトップページはグレードがBとDの間を行ったり来たりしています。

コンポーネントのキャッシュ状況

expireヘッダなどを使ったキャッシュ状況や、gzipでの圧縮具合の概況を表示。おおよそキャッシュできているようです。

コンポーネントのダウンロード状況

Firebug本体にも同様の機能がありますが、こちらは更に詳細にチェックできます。

いかがでしょうか、非常に便利なツールですので、是非試してください。