ウェブページ表示速度計測ツール「Speed Tracer」Google Chromeエクステンション
あろーは。
Google発のウェブページの表示速度計測ツール「Speed Tracer」を使ってみたよっ
正確には、Google Chrome用のエクステンションだ。紹介ページはこちらだよん。
Speed Tracer - Google Web Toolkit - Google Code
前に「Page Speed」ってゆーFirefox向けツールとか、「YSlow」ってゆー、これまたFirefox向けのYahoo!発のツールとか出てるけど、それのChrome版ぽい感じかな。
インストール作業
だがその前に、色々と前準備が必要なんだぁ。
- Google ChromeのDev Channelバージョンが必要。ここからダウンロードしてインストールしてね。
- Google Chrome起動時に、オプション引数が必要。例えばWindowsなら、ショートカットを右クリックして「プロパティ」から「リンク先」の「...chrome.exe」の後に「 --enable-extension-timeline-api」と追記する。※間に半角スペースをきちんと入れること！
- で、いざGoogle Chromeを起動して、ここからダウンロードしてインストール。「インストール」をポチッとな。
Google Chromeに慣れてる人はいいけど、分からない人のために。左下にこんなメッセージが出ることがあるけど、これも「続行」でいーよっ
- そしたら、右上にこんな
アイコンが出来て以下のよーなメッセージが表示されるはず。Firefoxユーザーには驚きだろうけど、なんと、ブラウザの再起動は必要ないのだ。
で、インストール完了っ
早速使ってみよーかっ
さて、さっそく使ってみよう。
てけとーに、複雑そーなサイトをチョイスしたまえ。AJAXとか色々使ってる感じのページがいーかもねー。試しに、Googleマップを対象にしてみたよー。
やり方は、対象のページに移動する前に、右上にでけたアイコンをクリックして、Speed Tracerの窓を開く。んで、その後前のウィンドウに戻って対象ページをロードする。その後、計測を止めるために
ボタンをぽちっとする。
そしたら、Speed Tracerウィンドウがこんな感じになってるはずだ。
で、上のエリアのスライドバーやSluggishnessペインで表示範囲をうまーいこと選択する。
まずはSluggishnessから
個別のイベントを見ていこう。例えば、396ms時点のイベント。
大きく、以下の通りイベントが分かれているご様子。
- レイアウト(Layout)
- スタイルの再計算(Style Recalculation)
- スクリプト処理(Script Evaluation)
- HTML解析(Parse HTML)
- DOM処理(Dom Event)
- AJAX(XMLHttpRequest)
- JavaScriptのTimer?(Timer Fire)
- 描画処理?(Paint)
で、
- 赤アイコン
がCritical、わりと致命的なとこ。 - 橙アイコン
がWarning、要注意ぽいらし。 - 青アイコン
がInfo、なんか情報。 - 中身の数字は、その数なのだわさ。
例えばこのイベントの場合、レイアウトの変更が14回も起きていると警告されてます。あと、104.10sもかかってます、とゆー情報が表示されてます。
