デロイトとGoogleの調査(PDF)によって、ウェブサイトへのアクセス数や滞在時間はページの読み込み速度に大きな影響を受けることが判明しています。すぐにでもサイトの改善に取りくみたいものですが、コードの変更の効果を知るためには実際のユーザーの読み込み速度にどれくらい影響を与えたのかを計測する必要があります。「Boomerang」は、そうしたユーザーの読み込み速度を計測して収集できるオープンソースのライブラリということで、実際に使って試してみました。

OSS Boomerang Index

https://akamai.github.io/boomerang/oss/index.html



akamai/boomerang: End user oriented web performance testing and beaconing

https://github.com/akamai/boomerang

Boomerangを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。

パッケージマネージャを利用した Node.js のインストール | Node.js

https://nodejs.org/ja/download/package-manager

今回はDebianを利用するため、下記のコードでNode.jsをインストールしました。

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - &&\
apt-get install -y nodejs

また、Gitがインストールされていない場合はGitのダウンロードページから手元の環境にあった方法でインストールしておきます。今回はDebianを利用するため下記のコードを実行しました。

apt-get install git -y

さっそくBoomerangをセットアップしていきます。まずは下記のコードでリポジトリをクローンします。

git clone https://github.com/akamai/boomerang.git
cd boomerang

下記のコードで必要なライブラリをインポート。

npm install

「plugins」ディレクトリ内の「zzz-last-plugin.js」を開き、下記のように「BOOMR.init」という初期化コードを記入します。ここで設定できる内容については、Boomerangのドキュメントに記載してあります。特に大切な設定が「beacon_url」で、ここで設定したURLにデータが送信されます。



Boomerangのビルドにはgruntを利用するので下記のコードでCLIをインストールします。

npm install -g grunt-cli

そして下記のコードを実行し、Beemerangをビルドします。

grunt clean build

WindowsやWSLでビルドしようとすると下記のようにエラーが出て失敗してしまいました。



しかしDebian上でビルドしてみると成功しました。



ビルドが完了すると下記の通り「build」フォルダ内にファイルが生成されているので、「boomerang-[バージョン番号].min.js」をコピーし、自分のサーバーでホスティングします。



ウェブサイト側では、ページに下記のコードを挿入すればOK。「ここにBoomerangのjsファイルへのURLを挿入」と書いてある部分については、上の手順で配置したjsファイルのURLに書き換えてください。

<script>(function(){if(window.BOOMR&&(window.BOOMR.version||window.BOOMR.snippetExecuted)){return}window.BOOMR=window.BOOMR||{};window.BOOMR.snippetStart=(new Date).getTime();window.BOOMR.snippetExecuted=true;window.BOOMR.snippetVersion=14;window.BOOMR.url="ここにBoomerangのjsファイルへのURLを挿入";var e=document.currentScript||document.getElementsByTagName("script")[0],a=e.parentNode,s=false,t=3e3;function n(){if(s){return}var e=document.createElement("script");e.id="boomr-scr-as";e.src=window.BOOMR.url;e.async=true;a.appendChild(e);s=true}function o(e){s=true;var t,o=document,n,i,d,r=window;window.BOOMR.snippetMethod=e?"if":"i";n=function(e,t){var n=o.createElement("script");n.id=t||"boomr-if-as";n.src=window.BOOMR.url;BOOMR_lstart=(new Date).getTime();e=e||o.body;e.appendChild(n)};if(!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./)){window.BOOMR.snippetMethod="s";n(a,"boomr-async");return}i=document.createElement("IFRAME");i.src="about:blank";i.title="";i.role="presentation";i.loading="eager";d=(i.frameElement||i).style;d.width=0;d.height=0;d.border=0;d.display="none";a.appendChild(i);try{r=i.contentWindow;o=r.document.open()}catch(e){t=document.domain;i.src="javascript:var d=document.open();d.domain='"+t+"';void 0;";r=i.contentWindow;o=r.document.open()}if(t){o._boomrl=function(){this.domain=t;n()};o.write("<bo"+"dy onload='document._boomrl();'>")}else{r._boomrl=function(){n()};if(r.addEventListener){r.addEventListener("load",r._boomrl,false)}else if(r.attachEvent){r.attachEvent("onload",r._boomrl)}}o.close()}var i=document.createElement("link");if(i.relList&&typeof i.relList.supports==="function"&&i.relList.supports("preload")&&"as"in i){window.BOOMR.snippetMethod="p";i.href=window.BOOMR.url;i.rel="preload";i.as="script";i.addEventListener("load",n);i.addEventListener("error",function(){o(true)});setTimeout(function(){if(!s){o(true)}},t);BOOMR_lstart=(new Date).getTime();a.appendChild(i)}else{o(false)}function d(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(window.addEventListener){window.addEventListener("load",d,false)}else if(window.attachEvent){window.attachEvent("onload",d)}})();</script>

ページを読み込んで「Ctrl + Shift + i」を押して開発者ツールを開き、Consoleに「BOOMR」と入力するとさまざまなデータが記録されているのが確認できます。



こうしたデータが最初に設定したURLに送信されるわけです。大量のパラメーターが送信されており、さまざまなデータが取得できるようになっています。この中の「t_done」パラメーターがサイトの読み込み完了までの時間を表しています。



データはForm Dataの形式で送信されるため、サーバーにスクリプトを用意して適切にパースして保存するか、生のログデータとして保存しておいて後からパースするなどの方法でデータを取得できるわけです。送信されるデータの詳細についてはBoomerangのドキュメントに記載されています。

プラグイン形式で送信するデータを追加することも可能です。標準で用意されているプラグインはドキュメントのプラグインのページで確認でき、Googleアナリティクスの情報をインポートするプラグインやページ内の全てのクリックを追跡するプラグインなどが利用可能となっています。