YSlowでパフォーマンスを検証する

YSlowのインストール

YSlowへアクセスします。「Availability」という項目に、アドオンやエクステンションなどの拡張機能として利用できるブラウザが並んでいますので、お好みのブラウザへYSlowを追加(もしくはコマンドラインからの利用も可)。

計測開始

インストールが完了したらYSlowを起動。英語なので分かりづらいですが、”Rulesets”から計測タイプを選択します(一般的な計測は「Classic (V1)」、小規模サイトやブログの計測は「Small Site or Blog」、全ての項目を計測する場合は「YSlow (v2)」を選択)。チェックボックスにチェックを入れたら、オレンジ色の「Run Test」ボタンを押して計測開始です。

計測結果

計測結果はご覧の通り。画像の左上あたりの「Grade」という項目が計測の総合評価で、その下のAとかFとかっていうのが計測した項目、その右側の英文が計測した結果の概要コメント。各項目は、A(低)→F(高)という具合に重要度が高くなります。ちなみに以下は「YSlow (v2)」の計測結果画面。

これは「Classic (v1)」の計測結果。v2と比較すると計測項目が若干少ないです。

これは「Small Site or Blog」の計測結果。こちらはv1とは異なる項目があったりします。

各項目の内容

各項目の内容は以下の通り。元が英文なので訳しながらまとめてみました。解釈についてはおおよそ合っていると思われますが…間違いがあったらすみません。

Make fewer HTTP requests

HTTPリクエスト回数を減らしましょう。画像/CSS/Javascriptなどファイル数が多ければそれだけリクエスト回数は増えます。複数のCSSやJavascriptは一つにまとめるとか、画像はCSSスプライトを使うとか、他にもキャッシュを有効活用する、など回数を減らす工夫が必要です。

Use a Content Delivery Network (CDN)

コンテンツデリバリーネットワーク(CDN)を使いましょう、ってことなんですがこれは規模によりますね。

Avoid empty src or href

src=””やhref=””のような空白は避けましょう。これ、実はSafari・Chrome・Firefox3以前、IE8以下などはリクエストが発生するそうです。なので、無駄なHTTPリクエストは発生させないよう空の値をsrcやhrefには使わないように注意です。

Add Expires headers

ページの画像・CSS/JavaScript・Flashを読み込むためにはHTTPリクエストが必要になりますが、これらに有効期限を付与してブラウザやプロキシにキャッシュさせることで、2回目以降は不要なHTTPリクエストを回避することができます。

Compress components with gzip

CSS/JavascriptファイルなどはGZIPで圧縮しましょう。サイズが小さくなることで通信量の減少・読み込み時間の短縮が期待できます。

Put CSS at top

CSSファイルはHEAD要素に配置しましょう。ページを表示させるには、まずCSSファイルのダウンロードが必要になります。読み込みを快適にするためにもCSSはHEAD要素に置きましょう。

Put JavaScript at bottom

Javascriptは他のファイルとのパラレルダウンロード(並列してダウンロードすること)が行えないので、後回しにできるJavascriptは下部(</body>直前など)に配置し、ページの読み込みを早く行わせるようにしましょう。

Avoid CSS expressions

CSSのプロパティを動的に指定するIE独自の機能「CSS expression」は、サーバー負荷やセキュリティ面から使用は避けましょう(IE8以降は対応しません)。

Make JavaScript and CSS external

JavascriptとCSSファイルはページ内に記述すると毎回ダウンロードが必要になるので、外部ファイル化してキャッシュさせたほうがパフォーマンスは向上します。…の、はずなんですが、YahooのTOPページってhead内に直書きなんですよね。これってナゼなんでしょう?

Reduce DNS lookups

ドメイン名があるとそれに対応するIPアドレスを調べる「DNSルックアップ」が発生します。この間(一般的に20~120ミリ秒)、ブラウザは他のダウンロードが出来なくなるので極力減らしたほうがいいようです。該当する状況は、サイト内で他ドメインのコンテンツをインポートした状況ですが、広告やGoogle Analyticsなどはどうしようもありませんね。

Minify JavaScript and CSS

JavascriptとCSSは縮小化(minify)しましょう。コードの余計な空白や改行の削除、複数ファイルの連結などでファイルサイズを縮小させるとダウンロードに掛かる時間も小さくなります。オンラインで行うなら、Google Closure CompilerYUI Compressor、ウェブ上でも行うものには、Online YUI CompressorUglifyJSがminifyするのに有名です。

Avoid URL redirects

URLリダイレクトは避けよう、という項目。当たり前ですが、URLリダイレクトは”元ページ”と”転送ページ”の2回の通信が発生するのでページが表示されるまでが遅くなります。

Remove duplicate JavaScript and CSS

JavascriptやCSSファイルは重複しないようにしましょう。

Configure entity tags (ETags)

Etag(エンティティタグ)を最適に設定ましょう。ETagとは、サーバーにあるファイルとブラウザのキャッシュが一致しているかを判断するための文字列で、通常は「サーバ内の固有番号(inode)/更新時刻/サイズ」で構成されます。ETagを使わない、もしくは更新最終時刻やサイズで確認する設定があります。複数サーバーでの運用の場合はiNodeの値が異なるので設定に注意する必要があります。

Make AJAX cacheable

Ajaxもキャッシュできるものがあればしましょう。

Use GET for AJAX requests

XML HTTPリクエストオブジェクトを使用する際、POSTを使うとヘッダとデータが別々に送信されるので2回の通信が発生しますが、GETの場合はヘッダとデータを一緒に送信するので効率的らしいです。ただ、GETメソッドで送信する場合はIEのURLの最大値2083文字以内にする必要アリ(GETでパラメータを送信する際は、URLにパラメータを記載する)。

Reduce the number of DOM elements

DOM要素を減らすことで読み込み時間が減ってパフォーマンスが向上します。

Avoid HTTP 404 (Not Found) error

リクエストしたファイルが存在しないことは避けましょう。404エラー「見つかりません」はユーザーによって操作性も低く無駄な通信となります。「もしかして・・・」などの有用なエラーメッセージもありますが、それでもサーバーにとっては無駄な通信になります。

Reduce cookie size

サーバーとブラウザ間で通信をやりとりする中にクッキー情報が含まれるので、クッキーのサイズを小さくすることで応答時間を最小限に抑えることができます。

Use cookie-free domains

画像をリクエストする時にクッキーを送っても、そのクッキーは使われないので無意味だそうです。なので、画像をはじめとする静的コンポーネントは、クッキーを使わないようにリクエストするべきなんですね。例えば、サブドメインを作成したり別ドメインを用意し、そこに静的コンポーネントを配置してクッキーを使わずにリクエストにしましょう。

Avoid AlphaImageLoader filter

透過PNG画像の問題解消のために実装されているIEの独自フィルター機能がありますが、画像をダウンロードしている間はレンダリングがブロックされてブラウザが停止します。また、メモリも食うので使用は避けましょう。

Do not scale images in HTML

表示させる画像よりも大きい画像を用いて幅と高さの数値で調整するのは通信量が無駄に肥大化するのでやめましょう。

Make favicon small and cacheable

多くのブラウザがアクセスのたびにファビコンをリクエストするので、最小サイズのファビコンを作成してそれをキャッシュさせることで通信が無駄に発生しません。

各項目は、「コンテンツ」「CSS」「画像」「Javascript」「サーバー」系統ごとに分けて確認することも可能です。

ページの構成要素

「コンポーネント」タブをクリックすると、ページを構成する各要素のデータサイズなどが確認できます。

キャッシュの比較

「Statistics」タブをクリックすると、キャッシュが空の状態で閲覧した場合とキャッシュが有効な状態で閲覧した場合の比較が確認できます。左がキャッシュがない状態、右がキャッシュがある状態です。

詳細は次回に

今回は簡単にYSlowを使う流れだけをご紹介しましたが、次は実際にパフォーマンスを改善する流れをご紹介します。