<< back to list

YSlow - 無料でWEBページの表示を速くしよう あとで読む

YSlow サンプルYSlowは、Firefoxを使用しているユーザーであれば最も手軽に、かつ無料で導入できるWEBページの表示パフォーマンス改善ツールです。13の項目についてチェックを行い、項目毎にA〜Fの評価を表示してくれると共に、改善案を提示してくれます。
Firebugをベースに使用しているため、YSlowを使うには先にFirebugをインストールしておく必要があります。

以下の記事は、Firefoxを使用していることが前提となります。
なお、Firefox自体のダウンロードはこちらからFirebugのダウンロードはこちらからどうぞ。

YSlowのインストール方法

YSlow ダウンロードページYSlow::Firefox Add-onsから、YSlowをインストールします。
YSlowはFirebugを必要としますので、Firebugをインストールしていない方は、先にFirebug::Firefox Add-onsから、Firebugをインストールしてください。

YSlowのインストールが完了すると、Firefoxを再起動するよう求められますので、一度Firefoxを再起動して、YSlowを使えるようにしてください。

YSlowの使い方

YSlow ボタン再起動が完了すると、Firefoxのウィンドウ右下に、右図のようなアイコンが表示されます。
このアイコンをクリックすると、Firebugに組み込まれたYSlowのウィンドウが表示されます。

YSlow 初期画面 YSlowのウィンドウが表示されると、左図のような画面が表示されます。赤枠で囲んである場所が2カ所ありますが、通常左の「Performance」をクリックします。
※Autorunにチェックを入れると、他のページを見た場合でも毎回解析がかかるため、ブラウザのレンダリング等が遅くなります。

YSlow 解析画面 「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)   このエントリーを含むはてなブックマーク Yahoo!ブックマークに登録 livedoor クリップに登録 del.icio.usに登録 Google Bookmarks に追加 この記事をBuzzurlに追加 2008.11.29 Sat 21:37

COMMENTS

name : email : url :  
captcha: simple_captcha.jpg(全て大文字のアルファベットです)
画像中の文字とおなじものを入力してください。
comment:
コメントには日本語を必ず入力してください。(スパム対策です)
COMMENT

TRACKBACKS

この記事へのトラックバックURL: http://www.red-mount.com/trackback/7_346ff22190e0a3f8f6454466667b59d695ba4824

<< back to list
 

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)
フィードメーター - RED-MOUNT.COM
あわせて読みたいブログパーツ