page speedをつかってみた

先週あたりに公開されたPage Speed、早速インストールしてつかってみました。Page Speedは、ウェブページの解析ツール。画像やJava Scriptを自動的に圧縮してダウンロードしてくれたり、CSSの位置、効果的なヘッダ情報などをアドバイスしてくれます。YSlowのGoogle版ですね。でもYSlowより強力。

インストール

Page SpeedはFirefoxfirebug上で動作します。firebugここからPage Speedはここからダウンロード、インストールできます。
インストールしたらFirefoxを再起動。

こんな感じ

インストールできたら解析したいページを表示してFirebugをキック。タブ?にPage Speedってのがでてるのでそれをクリックすると、Analyze Performanceってなボタンがでてくるのでおもむろにクリック。

そうするとずらずらっと解析結果がでてきます。


こりゃすげえな

と思ったのは、画像を圧縮してくれること。上記画面例でいうとOpitmize Imagesというところをクリックすると、当該ウェブページで参照している画像ファイルの一覧と、その圧縮後の画像ファイルがずらずらっとでてきます。

どうやって圧縮しているのかな。多少は荒くしてあるのかも。上の方にちらっと書いてありますが、5割くらいは削減できるみたい。私が管理しているウェブのトップ画面の場合800Kbほどのサイズのうち8割ほどが画像。だいたいはブラウザキャッシュを参照しているので実際にはそれほどのトラヒックにはならないはずですが、それでも画像のサイズが半分になるならインパクトでかいですね。

さらにすごいのは、この圧縮後の画像ファイルとかJava Scriptとかが自動的にダウンロードされているところ。Linuxの場合は$HOME以下にpage-speed-imaegs、page-speed-javascriptというディレクトリができて、そこへ自動的にダウンロードされてきます。

どうやって判断してるんだ?

画像ファイルの重複もみつけてくれます。同一画像で、ファイル名が違う場合当然片方の画像ファイルのダウンロードは無駄だからファイル名とリンクを修正する。でもどうやって判断してるんだろう。ハッシュ値でも計算してるのかな

他にも

CSSをまとめさいとか、コンテンツ配信のホスト名を分散させなさいとかとかいろいろアドバイスしてくれます。このあたりはYSlowと同じかな。

ちなみに

Google先生のページを解析するとどうなるだろう。

当然のようにオールグリーン。さすがっす。ブラウザでソースをみると、スペースもコメントも一切なし。究極のトップページですな。

感謝してつかって性能向上に役立たせてもらいます。