Page Speed を使ってみました。
http://code.google.com/speed/page-speed/index.html

こちらのツールですね。
説明は youtube に動画になっています。
英語ですが。(*゜▽゜)ノ
[youtube]GRm9bxu2jUA[/youtube]
英語が聞き取れなくても、
字幕が流れるので大丈夫です。
英語が読める人は、ですが。(*゜▽゜)ノ
難しい英語ではないので、
読めると思います。
使い方の動画もありました。
[youtube]S8pqNtkW4OQ[/youtube]
これも英語です。
こちらは字幕は無いですが。
早速ダウンロードしてみます。
画面右上の「 download 」をクリックすると、
どうやら、Google Chrome ではなくて、
Firefox のアドオンとしてあるようですね。
Firefox は、バージョン 3.5 以上です。
アップロードが必要な場合は、
Firefox のメニューからアップロードしてください。
Firefox を持っていない人は、ここからダウンロードして下さい。
http://mozilla.jp/firefox/
ということで、Firefox を起動します。
ベータ版と安定版ありますので、安定版を選びます。
Macは、PowerPC は対応してないみたいですね。
「Install Page Speed 1.6」ボタンを押します。
アドオンのインストール画面になるので、
インストールボタンを押して、インストールします。
インストールが完了したら、Firefoxを「再起動」します。

インストールしたら、
Page Speed は
有効状態になっているようです。
firebug アドオンも必要らしいので、インストールします。
ここからダウンロードできます。
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

最新版の1.5.3 をダウンロード・インストールします。
PageSpeed と同じ様にインストールします。

そして、Firefox を再起動します。
画面右下に見慣れないアイコンが表示されました。

クリックしてみると、Safari や IE に標準でついている
開発者向けのツールのようなものが表示されました。

そういえば、Mac 版 Chrome にもこの様な、
開発補助ツールついてましたね。n
Safari 版と UI がすごい似ているので
Safari の機能をつかっているのかなぁとも思いつつ、
たまに使っています。(*゜▽゜)ノ
Firebug の画面をよく見ると、
Page Speed というタグがありますね。
早速クリックしてみます。
「Analyze perfermance」というボタンがあります。
早速押してみます。
どのような分析されどの様に画面表示されるのか?
楽しみですね。

Performance タグを見てみると、
色々検査結果が表示されています。
やっぱり全部英語です。(*゜▽゜)ノ
最初にスコアが表示されています。
ここでは、100点中 83 点。

上から見てみると
・画像の大きさがちがうよ。
たぶん HTML の img タグで指定されているサイズと、
実際の画像サイズが異なるのだと思います。
意味が分からないメッセージに関しては、
そのメッセージをクリックすると、
詳細な説明ページに飛びます。

次に Resource タグを見てみます。
Safari でいう「構成ファイル一覧」でしょうか?
Safari の構成ファイル一覧よりも詳細なデータが出ますね。
ファイルタイプや、ファイルサイズ、ファイル転送サイズ
cssimages というのは、css で使っている画像ってことなのかな?
より分析がやりやすいですね。親切だと思います。

Export タグがあります。
JSON 形式などでエクスポート出来るようです。
http://www.showslow.com/ への
エクスポート機能もついています。
このサイトへデータを送ると、他のサイトとの比較ができます。
そして、ランク付けされて表示されます。
Page Speed Activity タグを見てみます。
Record Activity ボタンがあるので、
早速押して、記録してみます。
記録ボタンを押して、ブラウザの再読込ボタンを押します。

DNS 問い合わせ時間とか、
キャッシュへアクセスしているとか、
Javascript をパージしている時間とか、
実行している時間とか、
Webの各要素がロード出来るまでの時間だけでなく、
その内訳まで表示しています。
これはすごいですね。
ボトルネックポイントが良くわかります。
うれしい機能です。(*゜▽゜)ノ
早速自分のサイトでもやってみようと思います。
タグ: firefox, google, 応答速度分析
投稿日時 : 2010年04月13日 11時48分43秒
カテゴリー : web, 便利なツール
トラックバックURL :