jQueryMobile で構築したサイトの性能を測る

構築したサイトの性能測定で困ったことがあったので、そのメモです。

jQueryMobile で構築したサイトは基本的に ajax バリバリになっているかと思います。
そうでないサイトもあると思いますが。

現在関わっているプロジェクトが jQueryMobile を使用しているのですが、画面遷移は jQueryMobile の提供している $.mobile.changePage を使用しており、基本すべて ajax にてリクエストを出し、ページの内容を書き換える、というものになっています。
で、画面の性能を測定をスマフォで行うということになりました。

うーん。困った…。
どうやって時間をはかろう…。
最初は mod_pagespeed 使えば簡単簡単、と思っていたのですが、Add Instrumentation を見た感じだと、すべての html の と にスクリプトを埋め込む、となっており、これ ajax ではないサイトでしか性能測定できないように見える…。
（拙い英語力で読み解いたので間違いがあるかも…）

ということで、Add Instrumentation をヒントに自前で仕込むことにしました。
基本的には ajax でページを取得してくる、ということで、ajax リクエストを投げる前と ajax リクエストの success callback 終了後に時間を出力する方式でやってみました。

jQueryMobile サイトの入口となる唯一の html （head や body を持っているやつ）に以下を記述します。

window.denta_pagespeed_info = function () {
	var infomation = Array.prototype.slice.apply(arguments, [0]).join("|");
	if (location.host === "localhost") {
		console.log(infomation);
	} else {
		new Image().src = "/denta_pagespeed.php?speed=" + infomation;
	}
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
	var targetURL = originalOptions.url,
		_success = options.success,
		start = Number(new Date());

	options.success = function () {
		var active = $.mobile.urlHistory.getActive(),
			referer; //疑似

		if (active) {
			referer = active.url;
		}
		_success.apply(this, Array.prototype.slice.apply(arguments, [0]));
		window.denta_pagespeed_info((referer || "/"), targetURL, start, Number(new Date()));
	};
});

jQuery の $.ajaxPrefiter にてリクエストを捕まえることができるので、補足し、success の callback を置き換えます。
置き換えた success 関数の中でサーバに計測値を投げます。
投げているのは new Image().src = "/denta_pagespeed.php?speed=" + infomation; これなので、別のドメインにも投げることができます。

サーバ側ではそれを保存するだけ。
何か良いツールないかなー。