Hatena::ブログ(Diary)

鳥さんの独り言 RSSフィード Twitter

2009年12月30日

[][]ウェブページ表示速度計測ツール「Speed Tracer」Google Chromeエクステンション

f:id:diveintounlimit:20091231002326p:image:rightあろーは。

Google発のウェブページの表示速度計測ツール「Speed Tracer」を使ってみたよっ

正確には、Google Chrome用のエクステンションだ。紹介ページはこちらだよん。
Speed Tracer - Google Web Toolkit - Google Code

前に「Page Speed」ってゆーFirefox向けツールとか、「YSlow」ってゆー、これまたFirefox向けのYahoo!発のツールとか出てるけど、それのChrome版ぽい感じかな。

インストール作業


だがその前に、色々と前準備が必要なんだぁ。

  1. Google ChromeのDev Channelバージョンが必要。ここからダウンロードしてインストールしてね。
  2. Google Chrome起動時に、オプション引数が必要。例えばWindowsなら、ショートカットを右クリックして「プロパティ」から「リンク先」の「...chrome.exe」の後に「 --enable-extension-timeline-api」と追記する。※間に半角スペースをきちんと入れること!
    f:id:diveintounlimit:20091231022546p:image
  3. で、いざGoogle Chromeを起動して、ここからダウンロードしてインストール。「インストール」をポチッとな。
    f:id:diveintounlimit:20091231003127p:image
    Google Chromeに慣れてる人はいいけど、分からない人のために。左下にこんなメッセージが出ることがあるけど、これも「続行」でいーよっ
    f:id:diveintounlimit:20091231003125p:image
  4. そしたら、右上にこんなf:id:diveintounlimit:20091230232944p:imageアイコンが出来て以下のよーなメッセージが表示されるはず。Firefoxユーザーには驚きだろうけど、なんと、ブラウザの再起動は必要ないのだ。
    f:id:diveintounlimit:20091231003126p:image

で、インストール完了っ

早速使ってみよーかっ


さて、さっそく使ってみよう。

てけとーに、複雑そーなサイトをチョイスしたまえ。AJAXとか色々使ってる感じのページがいーかもねー。試しに、Googleマップを対象にしてみたよー。

やり方は、対象のページに移動する前に、右上にでけたf:id:diveintounlimit:20091230232944p:imageアイコンをクリックして、Speed Tracerの窓を開く。んで、その後前のウィンドウに戻って対象ページをロードする。その後、計測を止めるためにf:id:diveintounlimit:20091230233741p:imageボタンをぽちっとする。

そしたら、Speed Tracerウィンドウがこんな感じになってるはずだ。
f:id:diveintounlimit:20091230233743p:image
で、上のエリアのスライドバーやSluggishnessペインで表示範囲をうまーいこと選択する。

まずはSluggishnessから

個別のイベントを見ていこう。例えば、396ms時点のイベント。
f:id:diveintounlimit:20091230233744p:image
大きく、以下の通りイベントが分かれているご様子。

で、

  • 赤アイコンf:id:diveintounlimit:20091230233746p:imageがCritical、わりと致命的なとこ。
  • 橙アイコンf:id:diveintounlimit:20091230233747p:imageがWarning、要注意ぽいらし。
  • 青アイコンf:id:diveintounlimit:20091230233748p:imageがInfo、なんか情報。
  • 中身の数字は、その数なのだわさ。

例えばこのイベントの場合、レイアウトの変更が14回も起きていると警告されてます。あと、104.10sもかかってます、とゆー情報が表示されてます。

次にNetwork

次に、上のエリアから「Network」をチョイス。ちょっち分かりにくいけど。
f:id:diveintounlimit:20091230233745p:image

左側に、ファイル名がずらっと並んで、右側にそのロードタイムがズラっと並んでる。
f:id:diveintounlimit:20091231001240p:image
HTML、JS、CSSファイルは分かりやすいよーに、アイコンも付けてくれてるよっ

で、またてけとーにCritical出てるやつを開いてみる。
f:id:diveintounlimit:20091231001241p:image
不要なHTTPヘッダー吐いてるから、消しすべし!と言ってます。あと、キャッシュタイムをもーちょい長くした方が良いよとか言ってます。その他、ファイルは圧縮転送したほうが良いよとかもアドバイスしてくれるみたい。

総評


なんつーか。細かすぎ。ガリガリ最適化してくならまだしも、ふつーここまで要らないよね、とゆー感じがするデスヨ。

でわでわ。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証