YSlow - 無料でWEBページの表示を速くしよう
YSlowは、Firefoxを使用しているユーザーであれば最も手軽に、かつ無料で導入できるWEBページの表示パフォーマンス改善ツールです。13の項目についてチェックを行い、項目毎にA〜Fの評価を表示してくれると共に、改善案を提示してくれます。
Firebugをベースに使用しているため、YSlowを使うには先にFirebugをインストールしておく必要があります。
以下の記事は、Firefoxを使用していることが前提となります。
なお、Firefox自体のダウンロードはこちらから、Firebugのダウンロードはこちらからどうぞ。
YSlowのインストール方法
YSlow::Firefox Add-onsから、YSlowをインストールします。
YSlowはFirebugを必要としますので、Firebugをインストールしていない方は、先にFirebug::Firefox Add-onsから、Firebugをインストールしてください。
YSlowのインストールが完了すると、Firefoxを再起動するよう求められますので、一度Firefoxを再起動して、YSlowを使えるようにしてください。
YSlowの使い方
再起動が完了すると、Firefoxのウィンドウ右下に、右図のようなアイコンが表示されます。
このアイコンをクリックすると、Firebugに組み込まれたYSlowのウィンドウが表示されます。
YSlowのウィンドウが表示されると、左図のような画面が表示されます。赤枠で囲んである場所が2カ所ありますが、通常左の「Performance」をクリックします。
※Autorunにチェックを入れると、他のページを見た場合でも毎回解析がかかるため、ブラウザのレンダリング等が遅くなります。
「Performance」にチェックを入れると、右図のような画面が表示されます。上部の灰色バー部分にページ全体としての評価が、その下1〜13の部分は、個別の項目毎にチェックを行い、A〜Fの6段階で評価を行った結果を表示してくれます。
また、それぞれの項目の右側にある、三角のボタンをクリックすることで、項目毎の改善ポイントを表示してくれます。
余談ですが、今回プリントスクリーンを撮った際にあまり高い評価が出なかったのですが、項目別の改善ポイントを見ると、ほぼ全てがGoogleAdsenceとAmazonアフィリエイトが出力しているJavaScriptやImage、CSSでした。YSlowの評価を上げようとするとGoogleAdsenceとAmazonアフィリエイトの両方をサイトから取り払う必要が出てくるので、無理に評価を上げる努力をしなくても、自分の権限でできる範囲内で改善していけば良いのではないかと思います。
尤も、GoogleAdsenceとAmazonアフィリエイトからは収益が全く出ていないので、消しても構わないのですが……。せめてサーバーの維持費くらいは収益出て欲しい所 :-(
YSlowのチェック項目一覧
YSlowは、13の項目についてチェックを行い、項目毎にA〜Fの評価を表示してくれると共に、改善案を提示してくれます。以下が、チェック項目ごとのチェック内容と改善のためのポイントです。
| チェック項目 | チェック内容 | ポイント |
|---|---|---|
| 1. Make fewer HTTP requests | HTTPリクエストの数が多すぎないかどうか | CSSファイルやJSファイル、画像ファイルなどをまとめ、リクエスト数を減らします |
| 2.Use a CDN |
CDN(コンテンツ・デリバリー・ネットワーク)を使っているかどうか | 個人でやっているサービスでは難しいですが、例えばアメリカからのアクセスが多い場合は、アメリカにサーバーを置くことでレスポンスの向上が見込めます |
| 3.Add an Expires header |
HTTPレスポンスヘッダにExpiresが指定されているかどうか
|
mod_expireを利用してHTTPレスポンスヘッダにExpires(コンテンツの有効期限)を追加することで、ブラウザーが短期間に同じデータを何度も読みに行かなくなります |
| 4.Gzip components |
コンテンツがGzip圧縮されているかどうか | テキストデータはGzip圧縮して送信した方が、データ量が減るため高速にページを表示できるようになります |
| 5.Put CSS at the top |
スタイルシートをヘッダ内で指定しているかどうか | ブラウザがページを描画する際に、CSSがコンテンツよりも先に読み込まれていれば、描画時間を短縮することができます |
| 6.Put JS at the bottom |
JavaScriptをbodyタグの終了直前で読み込んでいるか | ページ読み込み完了時に動作させるJavaScriptは、bodyタグの終了直前に読み込ませる事で、body.onloadを使う時とほとんど同じ動作をさせることができます |
| 7.Avoid CSS expressions |
CSS内でexpression関数を使っていないか | IEのCSS用拡張であるexpressionは、当然ですがIEでしか使えません。JavaScriptやサーバーサイドで処理できないか検討しましょう |
| 8.Make JS and CSS external |
JavaScript及びCSSファイルを外部読み込みしているか | 動的なページの場合、JSやCSSを外部ファイルに分離するとキャッシュが効くため、表示にかかる時間を短縮させることができます |
| 9.Reduce DNS lookups |
DNSルックアップの数が多すぎないかどうか | ホスト名の逆引きにも、それなりのコストが発生するため、不必要に多くのドメインに対し通信させない方が表示時間を短縮できます |
| 10.Minify JS |
JavaScriptのファイルサイズ削減を行っているかどうか | YUI Compressorなど、JavaScriptの最適化ツールを使用してJavaScriptのファイルサイズを削減することで、通信時間の削減と実行速度の向上を見込めます |
| 11.Avoid redirects |
リダイレクトしていないかどうか | ある意味当然ですが、リダイレクトさせると、その分リクエスト数が増えるので表示時間が遅くなります |
| 12.Remove duplicate scripts |
同じスクリプトを複数回書いていないかどうか | 同じスクリプトは関数としてまとめるなど、適切なコードリファクタリングを行いましょう |
| 13.Configure Etags | ETagsの設定を間違えていないかどうか | 適切なETagsの設定をするか、よくわからなければ無効にしてしまいましょう(Expiresヘッダをきちんと指定すれば、ETagsは設定しなくても良いみたいです) |
各チェック項目の詳細な説明と改善方法については、次の記事で。
Firefox, Add-on, WEB開発, YSlow, Firebug, パフォーマンス改善 |
comments(0) |
trackbacks(0)
2008.11.29 Sat 21:37
TRACKBACKS
この記事へのトラックバックURL: http://www.red-mount.com/trackback/7_346ff22190e0a3f8f6454466667b59d695ba4824
ABOUT ME
tak (Takahito Sezutsu)
コメント、トラックバックはお気軽に!
COMMENTS
-
Beanstalk - WEBで管理可能なフリーのSubversionサーバー
→LILAC (08.14) -
CSS Nite in Ginza Vol.29に行ってきました。
→Betsy (05.14) -
「オリジナルの項目が見つからなかったので、エイリアス“********”は開けません。」と出て、Finderで外付けHDDが開けない時は
→poo (04.19) -
MacのSkypeでログイン時プルダウンメニューに表示されるSkype名を消す方法
→tak (06.22) -
「オリジナルの項目が見つからなかったので、エイリアス“********”は開けません。」と出て、Finderで外付けHDDが開けない時は
→tak (06.22) -
「オリジナルの項目が見つからなかったので、エイリアス“********”は開けません。」と出て、Finderで外付けHDDが開けない時は
→ko (06.22) -
MacのSkypeでログイン時プルダウンメニューに表示されるSkype名を消す方法
→Mac (05.06) -
MacのSkypeでログイン時プルダウンメニューに表示されるSkype名を消す方法
→tak (03.11) -
MacのSkypeでログイン時プルダウンメニューに表示されるSkype名を消す方法
→tama (03.11) -
Mac版ATOK定額制(体験版)を1週間使ってみた
→tak (09.19)
COMMENTS