続々・PhantomJSで遊びながらHARをYSlowする

今回は元ネタあり

今回はWeb Performance Power Tool: HTTP Archive (HAR) - igvita.comを元に、HARします。はー。

HTTP Archive 1.2 (frozen) format that can be used by HTTP monitoring tools to export collected data. HAR 1.2 Spec | Software is hard

HARというのはHTTPのモニタリングデータの収集結果を表すファイルです。中身は所定のフォーマットに従って書かれた、ただのJSONファイルですね。Request・Responseなどなどが記録されています。

1. HARの生成

2. YSlowに.harを渡す

3. パフォーマンス解析の結果を得る

のような順序で進めます。

HARの生成

HARの生成については、phantomjsのexamplesに、netsniff.jsというものがあり、それを使えばすぐに生成できます。該当ファイルをローカルに取得します。

% wget https://raw.github.com/ariya/phantomjs/master/examples/netsniff.js

--2012-11-22 07:16:50--  https://raw.github.com/ariya/phantomjs/master/examples/netsniff.js
Resolving raw.github.com... 207.97.227.243
Connecting to raw.github.com|207.97.227.243|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 4007 (3.9K) [text/plain]
Saving to: ‘netsniff.js’

100%[================================================>] 4,007       --.-K/s   in 0s

2012-11-22 07:16:51 (1.87 GB/s) - ‘netsniff.js’ saved [4007/4007]

で、phantomjsで実行してみましょう。

% phantomjs netsniff.js http://aho.mu > ahomu.har

% ls -l ahomu.har
-rw-r--r--  1 ayumusato  staff  30486 11 22 07:17 ahomu.har

http://aho.muにアクセスして、ahomu.harを取得しています。そのHARを、今度はyslowに渡してみます。

YSlowに.harを渡す

yslowを叩きます。ここで指すyslowは、npmで取得できるコマンドライン用のyslowです。npm install -g yslowとかで入るでしょう。

% yslow --info basic --format plain ahomu.har
size: 63.1K (63163 bytes)
overall score: A (97)
url: http://aho.mu/
# of requests: 4
ruleset: ydefault
page load time: 1390

標準出力で取れました。Score A (97)です。やったね。

パフォーマンス解析の結果

つづいてhttp://havelog.ayumusato.comもいってみましょう。

% phantomjs netsniff.js http://havelog.ayumusato.com > havelog.har
% yslow --info basic --format plain havelog.har
size: 260.1K (260123 bytes)
overall score: A (90)
url: http://havelog.ayumusato.com/
# of requests: 9
ruleset: ydefault
page load time: 433

ちょっと点数下がりましたが、なんとかScore A (90)です。よしよし。

% yslow --help

  Usage: yslow [options] [file ...]

  Options:

    -h, --help               output usage information
    -V, --version            output the version number
    -i, --info         specify the information to display/log (basic|grade|stats|comps|all) [basic]
    -f, --format     specify the output results format (json|xml|plain) [json]
    -r, --ruleset   specify the YSlow performance ruleset to be used (ydefault|yslow1|yblog) [ydefault]
    -b, --beacon        specify an URL to log the results
    -d, --dict               include dictionary of results fields
    -v, --verbose            output beacon response information

ちなみにYslowはhelpからOptionsみるとこんな感じです。レポートをxmlやjsonでも吐けるので、他の機械的な解析処理にまわすことも容易です。

Gruntしてみたい

Gruntでやるとしたら、だいたいこんな感じでしょう。YSlowのnpmモジュールの取り扱いについては、Command Line (HAR) · marcelduran/yslow Wikiを参考にしています。

作り切っていませんが、あとは取得したデータを保存して別の処理にまわすなり何なりご自由に。d3.jsとかに回すと見た目にも楽しいんじゃないでしょうか。

改めて参考

元ネタに敬意を込めて。

• Web Performance Power Tool: HTTP Archive (HAR) - igvita.com

---