動機

Webサイトのどこかが遅いとか、分かりやすいデータを出力したい。
監視ツールからも指標として採用できる値が取得したい。

とにかくExampleが優秀

やりたいことは大したことも無いし、Exampleのツギハギだけで目的は達成できそう。

まずは起動

それぞれの環境にバイナリもあるし、導入もすぐ出来ると。
自分はMacから。

このコードを使って、サイト自体のスピードを測ってみる

$ phantomjs loadspeed.js http://www.yahoo.co.jp
Page title is Yahoo! JAPAN
Loading time 836 msec

こいつ動くぞっ

ページの要素に踏み込む

このnetsniff.jsはHARフォーマットのログを出力できるらしい。この中から今回必要な情報のみTSVで出したかったので以下のように修正

    page.open(page.address, function (status) {
        var har;
        if (status !== 'success') {
            console.log('FAIL to load the address');
            phantom.exit(1);
        } else {
            page.endTime = new Date();
            page.title = page.evaluate(function () {
                return document.title;
            });
            har = createHAR(page.address, page.title, page.startTime, page.resources);
            // ###ここから###
            har.log.entries.forEach(function(item) {
                console.log(item.time + "\t" + item.response.content.size + "\t" + item.request.url);
            });
            // ###ここまで###
            //console.log(JSON.stringify(har, undefined, 4)); // コメントアウトしただけ
            phantom.exit();
        }
    });

早速実行してみると...

$ phantomjs netsniff.js http://www.yahoo.co.jp
187 140535  http://www.yahoo.co.jp/
152 163993  http://www.yahoo.co.jp/javascript/fp_base_bd_ga_6.0.35.js
52  5866    http://k.yimg.jp/images/top/sp2/clr/141224/1.css
72  2928    http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png
96  4715    http://lpt.c.yimg.jp/im_siggY7XRJ7NJI0t3mxoqSKGfLQ---x120-y120/amd/20150305-00000041-jijp-000-view.jpg
197 34275   http://s.yjtag.jp/tag.js#site=2wzBV9u
116 8400    http://k.yimg.jp/images/top/sp2/cmn/pic_all-141205.png
69  331 http://k.yimg.jp/images/top/sp2/clr/141224/1.png
71  188 http://k.yimg.jp/images/top/sp2/uhd/homepage_bg-120123.png
70  1314    http://k.yimg.jp/c/icon/s/bsc/2.0/bookstore20.gif
70  253 http://k.yimg.jp/c/icon/s/bsc/2.0/movies20.gif
70  403 http://k.yimg.jp/c/icon/s/bsc/2.0/fortune20.gif
109 406 http://k.yimg.jp/c/icon/s/bsc/2.0/loco20.gif
91  2707    http://k.yimg.jp/images/evt/social-action/disasterPromo/201502volunteer.jpg
111 5551    http://k.yimg.jp/images/top/sp2/cb/2015/0305_lohaco.png
113 5073    http://k.yimg.jp/images/streaming/free/spotlight/1503/05_01.jpg
112 5397    http://k.yimg.jp/images/video-topics/rec/1503/05_e06.jpg
129 6497    http://k.yimg.jp/images/gyao/ytopimg/20150302/026.jpg
148 4116    http://k.yimg.jp/images/gyao/ytopimg/20150225/005_s.jpg
150 4358    http://k.yimg.jp/images/gyao/ytopimg/20150304/004_s.jpg
133 3129    http://k.yimg.jp/images/gyao/ytopimg/20150302/045_s.jpg
134 4511    http://k.yimg.jp/images/gyao/ytopimg/20150302/033_s.jpg
134 434 http://k.yimg.jp/images/weather/general/transparent_s/moon_clouds_af.gif
148 343 http://k.yimg.jp/images/weather/general/transparent_s/clouds.gif
159 4587    http://k.yimg.jp/images/premium/contents/bnr/2015/0224_shp/50x50.jpg

"時間(タブ)サイズ(タブ)URL"と欲しい情報が取れるようになった。

最後に

以前Webサイトのスクリーンショットを撮る場面でPhantomJSというモノは知っていたが実際に使うのは今回が初めてだったのだけど、これは便利ねぇ

Travis CIにビルトインされてることも知った。今度使おうと思う。

PhantomJSでWebサイトの表示スピードを測る話

動機

とにかくExampleが優秀

まずは起動

ページの要素に踏み込む

最後に