cyano

ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。

たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。

 
44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。

このように、ユーザーが実際感じている体感速度を可視化することで、このWebに高速化が必要かや、どの程度のコストをかけて行うべきかを検討することが出来ます。

この記事では、Google Analyticsを使って、体感速度を記録する方法を紹介します。

まず、お使いのGoogle Analyticsアカウントでイベント機能を有効にする必要があります。方法はGoogle AnalyticsでEvent Trackingを有効にするをご覧ください。有効になるまで1週間程度かかります。

次に、time-tracker.jsをGoogle CodeのGoogle Analytics - Extending Event Trackingからダウンロードしてきます。なお、time-tracker.jsはApache2 licenseとなっています。

次に、time-tracker.jsをhead直後で読み込み、その直後に計時を始めるコードを記述します。コードとしては以下の通り。

<script type="text/javascript" src="time-tracker.js"></script>
<script type="text/javascript">
var timeTracker = new TimeTracker();
timeTracker._recordStartTime();
</script>

最後に、描画終了時に呼び出されるイベント（onloadなど）や、DOMの構築終了時に呼び出されるイベント（DOMContentLoadedなど）、体感速度として計測したいところに以下のようなイベント送出コードを埋め込みます。例示のコードではjQueryでwindow.onloadイベントにフックを入れ、そこで計時しています。

jQuery.event.add(window, "load", function(){
  try {
    var pageTracker = _gat._getTracker("UA-xxxxxx-x");
    timeTracker._recordEndTime();
    timeTracker._setHistogramBuckets([25, 50, 100, 500, 1000, 2000, 3000]);
    timeTracker._track(pageTracker);
  } catch(err) {}
});

全体のコードしては、_recordStartTime()を呼び出してから_recordEndTime()を呼び出すまで時間（headタグ直後のJavaScriptからwindow.onloadにフックしたコードが実行されるまでの時間）がGoogle Analytics上に表示されることになります。

Google Analytics上での体感速度の閲覧方法ですが、Google Analyticsでイベントトラッキングが有効になっている場合、[コンテンツ]の下に[イベントのトラッキング]というカテゴリが出来ており、ここで体感速度のグラフが閲覧できます。

以下はより詳しい解説です。

timeTracker._setHistogramBuckets()では、体感速度をどのような区切りで記録するかを指定します。例示コードでは25〜49ms、50〜99msなど6区間とその区間以外の計8区間で体感時間を記録する設定としています。

timeTracker._track()の第2引数にはGoogle Analytics上のイベントのカテゴリの名前を指定できます。省略するとGoogle Analytic上では「TimeTracker」カテゴリのイベントとして体感速度が表示されます。例えば「Load Time」カテゴリで記録したければtimeTracker._track(pageTracker, "Load Time");とします。第3引数にはラベルを指定できます。現状、そのイベントが起きたURLなどをドリルダウンしていくことが出来なさそうなので、第3引数にURLのパス部分を入れておくと、どのページが遅いかを取り出しやすくなるかと思います。

このようにGoogle Analyticsと少しのコードで簡単にユーザーの体感速度を可視化することができます。今まで実際のユーザーの体感速度をデータとして見ることは難しかったので、これを機会にサイトのパフォーマンス測定をしてみるとよいでしょう。

タグ: Analytics, jQuery, パフォーマンス, 体感速度

この投稿は 2009年2月25日 水曜日 8:37 AM に 未分類 カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。