YSlow!、使ってわかるあんなことこんなこと

先月発売された「Web Designing」2010年1月号の特集では、ただの紹介だけに留まっていたツールの簡単な解説でもしてみようかと思います。今回は「YSlow!」で次回は「PageSpeed」ってな感じでお届けします。

双方のツールを使ってトータルであれこれと解説したいところなので、このサイトで割と画像を使ってる「そうだ、京都、いってきた」的なページを参考ページとします。

では、そんな感じで始まり始まり。


yslow-000

まずは、YSlow!が使えるようにする

米Yahoo! Inc.さん謹製の「YSlow!」は、Firefoxのアドオンです。これ単体で動作するわけではなく、あらかじめ「Firebug」というアドオンが必要になりますので、こちらもあわせてインストールしましょう。インストールするとブラウザウィンドウの右下に「虫」のアイコンが出てきますので、それをクリックするとFirebugの画面を呼び出すことができます。

YSlow!を使ってWebサイトをチェックする

インストールが終わったら、チェックしたいWebサイトを開いてFirebugのウィンドウを表示します。ウィンドウ上部には「HTML」「CSS」「Script」…などと、Firebugの機能のタブが並んでいますが、その中に「YSlow!」ってのが表示されているはずですので、それをクリックします。

yslow-001

まずは、対象サイトをどのような項目(ルールセット)でチェックするかを決めましょう。初期状態では、「Small Site or Blog」「YSlow(V2)」「Classic(V1)」が登録されており、これは後からカスタマイズすることもできます。比較的小規模なWebサイトであれば、「Small Site or Blog」、より詳細にチェックしたければ「YSlow」を選択します。

ルールセットを決めたら、左下にある「Run Test」と書かれたオレンジというか黄色のボタンをクリックしてテストスタートです。

「Grade」タブで改善点を見つけ出す

テストが終わると自動的に結果表示のウィンドウに切り替わります。「Grade」タブが一番最初に出てきますので、まずはこの説明から。

grade

左上にドーンと出るのが総合評価、で、その下にはWebサイトの表示パフォーマンスに影響を及ぼす項目がずらりと並んで、それぞれ個別にAからFまでのランクが表示されます。個別の項目をクリックすれば、改善点が表示されるようになっています。

「Small Site or Blog」の場合は、「HTTPリクエストの数を減らしましょう」「Gzip圧縮をかけましょう」「CSSは上に置きましょう」「JavaScriptは下に置きましょう」「DNSの参照を減らしましょう」みたいな極めて初歩的な内容です。

それぞれの評価は良いに超したことはありませんが、必ずしもAになれば良いというわけではないですし、そこは「できること、できないこと」がありますので、あくまでも改善した方が良い点、どうすれば改善できるのか?という指針だと受け取った方が良いでしょう。

上の図だと「HTTPリクエストを減らすためには、4つの外部のJavaScriptがあるので、できればそれらをまとめちゃいましょう」みたいな感じです。うちの場合、これ以上はまとめることができませんが。

「Components」タブで転送データ量や有効期限のチェック

「Components」タブは、ページに含まれる構成要素をすべて表示します。それぞれの項目に表示された「+」ボタンをクリックすれば展開されます。個別のデータサイズなどは展開して確認しましょう。

components

ここではJavaScriptの内容を見てみましょう。
それぞれのスクリプトのデータサイズは、一番左の「SIZE」に表示されます。Gzip圧縮をかけて転送していれば、「GZIP」に圧縮後のデータサイズが表示されます。やってなければ、ここは空欄になります。

うちは、HTMLもJavaScriptもCSSもブラウザが対応していればGzipがかかるようにしてますので、転送データサイズはごらんの通り1/2〜1/3程度になっているというわけですね。クライアントさえ対応していれば、これで転送にかかる時間は大幅に削減できると。

components-2

このComponentsタブの右側には、個々のデータの有効期限や反応時間などが表示されます。有効期限を設定していなければ、ここは日付ではなく「no expires」という表示になります。GoogleさんのAnalyticsのコードは一週間先の有効期限が設定されてます。うちの場合は、WebサーバのApacheの方で「mod_expire」を使って、一部のデータを除き3ヶ月先の有効期限を設定しています。

参考程度にうちの設定でも(一部抜粋)。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/jpeg “access plus 3 months”
ExpiresByType image/png “access plus 3 months”
ExpiresByType image/gif “access plus 3 months”
ExpiresByType text/css “access plus 3 months”
ExpiresByType text/javascript “access plus 3 months”
ExpiresByType application/x-javascript “access plus 3 months”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
</ifModule>

あまり変更することのない画像やCSS、JavaScriptなどは有効期限を設定しておくことで、ブラウザのキャッシュにある間はいちいちリクエストされることもなく、基本的にはHTTPヘッダのやりとりだけで終わることになります。リロードしたときはイヤでもキャッシュに残ってますが、日を空けて再度閲覧したとしてもブラウザのキャッシュがクリアされてなければそっちが使われるって感じでしょうか。

いちいちデータをリクエストをしない分表示が速くなるということですから、数が多ければ多いほど効果的ってなわけです。

「Statistics」タブでキャッシュの有無による違いをチェック

「Statistics」タブに表示される内容は、初回閲覧時(キャッシュが空の状態)とキャッシュが有効な状態それぞれでのHTTPリクエストの数とデータサイズを確認できます。

statistics

この京都のページは画像もパラパラいれてますので、HTMLやCSS、JavaScriptなどをすべて合計すると、初回接続時には41回のHTTPリクエストと131.9Kの転送データ量になります。これがキャッシュが有効な状態で再度閲覧した場合は、先ほどの有効期限の設定の関係でCSSやJavaScript、画像はリクエストされず、HTMLと有効期限のないJavaScriptだけでよくなって、合計6回のリクエストと13.1Kの転送データで済むということがわかります。

有効期限の設定がされていない場合は、データの転送量こそ数値的には少なくなっているはずですが、HTTPリクエストの数そのものはほとんど変化がないんじゃないかと。リロードしたときはまぁすぐ表示されるけど、日を空けて表示したときはさてどうかな?ってことになるんじゃないでしょうか。

「Tools」タブには便利ツールが…

「Tools」タブには、いろいろな便利ツールが用意されています。

tools

JavaScriptのチェックツールやMinify化のための「All JS Minified」、逆に読みやすくする「All JS Beautified」、画像を最適化するための「All Smush.it™」などがありますので、それぞれを活用したいものです(※画像の最適化はPageSpeedの方がいいかなぁ…)。

とまぁ、こんな感じでチェックをしていくと…

今回は、まずはYSlow!の使い方というか見方的なものを紹介しました。ただツールを使って眺めるだけでは何も始まりません。ホスティング環境や制作環境によって「できること、できないこと」がありますが、はじき出されたテスト結果を参考にまずは試してみるのが一番ですね。

「Gzipがかけられないのなら、せめてMinify化だけでもやってみる」「逆にGzipかけるからMinify化はしない」とか選択肢はいろいろあります。CSS Spriteでリクエスト減らすのもいいですが、そんな手間のかかることしないでも有効期限を設定してキャッシュさせれば、HTTPヘッダのやりとりだけで済んだりもするわけです。

工数の問題とかいろいろありますから、とりあえずは試してみて総合的にどうした方が良いか判断することが必要でしょうか。

さて、次回は「PageSpeed」の使い方です。実はこっちはこっちでかなり便利な機能が用意されていたりするので、その辺を中心にお届けしたいと思います。

Tags: , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE