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

動機

• 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にビルトインされてることも知った。今度使おうと思う。