ユーザーの体感速度をGoogle Analyticsで可視化する

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

たとえば、このブログのある期間における体感速度のグラフは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上での体感速度の閲覧方法ですが、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と少しのコードで簡単にユーザーの体感速度を可視化することができます。今まで実際のユーザーの体感速度をデータとして見ることは難しかったので、これを機会にサイトのパフォーマンス測定をしてみるとよいでしょう。

2 thoughts on “ユーザーの体感速度をGoogle Analyticsで可視化する

  1. Pingback: イベントトラッキングの使い方、まとめ10+事例 | カグア!Google Analytics 活用塾:事例や使い方

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>