Google先生がこんなことを断言してらっしゃるので、Page Speed Onlineを利用してみたのですが、このブログのスコアが100点中37点(!?)という結果になってしまったので、ちょっと改善しまっかいなという事で早速導入しました “Page Speed for Google Chrome”
こいつは Firefox とChrome のエクステンションとして Google code から配布されているのですが Chrome をメインブラウザーとして使っているので、今回は Chrome エクステンションをインストールしました！
基本的なステップはこちらを見て頂けばわかるのですが、下記簡単に3ステップに分けました。
1.初期設定
Google Lab から Page Speed Online は卒業したのですが、このエクステンションはまだ実験的な取り組みらしく(2011.10.22 現在) 設定をゴニョゴニョしてあげる必要があります。
- 設定画面へのアクセス：「about:flags」とアドレスバーに入力してアクセスします。
- 試験運用版の拡張機能 APIの有効化：「試験運用版の拡張機能 API」とう項目の「有効にする」をクリックします。
- Chromeの再起動：画面下部にある「今すぐ再起動」をクリックしてブラウザーを再起動します。
※開いているタブは再起動後も残ってます。(当方Chrome ver.14.0.835.202 です)
ライトユーザーが見ることが少ない画面なので、警告など注意を促すメッセージがでかでかと書いておりますが、恐らくこの記事をお読みの方はリテラシー高めだと思いますので、そこらへんは自己責任でお願いします。
2.ダウンロード
設定が完了して再起動すると、先ほどの設定画面を閉じてこちらからエクステンションファイルをダウンロードします。
(http://code.google.com/intl/ja/speed/page-speed/docs/using_chrome.html からでも落とせます。)
ダウンロードが完了すると、「インストールしますか？」的な事を聞かれるので「インストール」をクリックすると完了です。
ここらへんは通常のエクステンションのインストールと同じですね！
3.動作テスト
そして、無事インストールも済んだ所でどこから使うんじゃいな？という事で、こちらはデベロッパーツール内から使用します。
デベロッパーツールはサブメニューの「表示→開発/管理」の中にあります。(Macの場合)
この中のデベロッパーツールをクリックすると画面下部 (設定によっては別ウィンドウ) にデベロッパーツールが表示されます。
それで、この中の一番右のツールに “Page Speed” という項目が追加されていたらインストール成功です。
早速使ってみましょう！！
「Run Page Speed」をクリックするとページがリフレッシュされて解析がスタートします。
はい！解析されました！
若干(かなり？) Page Speed Onlineに比べると誤差がありますが、スコアが出ます。
またスピードアップの為の方法などもサジェストしてくれますので、サイト制作の際に役に立ちそうです。
てか、今後はjQueryなどブラウザ側の処理が増えるサイト作りが多くなってくると思うので、パフォーマンスチェックは必須ですよね！僕も日々精進中です・・
この記事がお役に立てれば幸いです。