Speed Index を Zabbix + Puppeteer で監視する

Speed Index は、WEBページの読み込みパフォーマンスの指標です。この値が小さいほど、ユーザーはWEBページが早く表示されると感じます。WEBページのパフォーマンス指標は、load（ページを構成するすべてのオブジェクトがダウンロードされるまでの時間）がよく使われていますが、「loadが早い = WEBページが早く表示される」ということではありません。そこで今回は、この Speed Index を Zabbix + Puppeteer で監視する設定手順をまとめてみました。

Speed Index とは

Speed Index とは、ファーストビュー（WEBページを開いてスクロールしないで見られる範囲のこと）がどのくらいの速さで表示されるかを示す値です。Speed Index の一番の特徴は、ファーストビューの表示が完了するまでの進捗率を考慮していることです。

例えば、次の２つの WEBページのファーストビューの表示完了は、どちらも３秒ですが、ページAの方は１秒で80%の部分が表示されているのに対して、ページBは1秒で20%しか表示されていません。

WEBページ訪れたユーザーは、ページAの方が早く表示されると感じるでしょう。Speed Index も表示が完了までの進捗率を考慮しているので、Speed Index の値はページAの方が小さくなります。

トレースデータの取得スクリプト作成

まずはじめに puppeteer を使って Speed Index の計算の元になるトレースデータを取得するためのスクリプトを作成します。

適当な場所に puppeteer をインストールします。インストール方法は「ヘッドレスChrome + Puppeteer のインストールと使い方メモ（CentOS）」をご参照ください。

（puppeteer をインストールするため、ディレクトリのパーミッションを一時的に 757 にしています）

トレースデータ取得用の Node.js スクリプトを作成します。Speed Index の計算には描画中のスクリーンショットが必要になりますので、9行目の tracing.start のところで「screenshots: true」を指定します。

sudo vi /usr/local/puppeteer_app/trace.js

const puppeteer = require('puppeteer');

var url = process.argv[2];
var path = process.argv[3];

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox']});
  const page = await browser.newPage();
  await page.tracing.start({path: path, screenshots: true});
  await page.goto(url);
  await page.tracing.stop();
  await browser.close();
})();

参考資料：class-tracing | Puppeteer の API ドキュメント

puppeteer も含めスクリプトのオーナーを zabbix に変更しておきます。（ディレクトリのパーミッションも 755 に戻します）

余談ですがここで取得したトレースデータは、Chrome デベロッパーツールの「Parformance」で読み込んで、内容を確認することができます。

Speed Index の取得スクリプト作成

続いて Speed Index の取得スクリプトを作成しますので、Speed Index を計算するためのモジュール Speedline をインストールします。

参考資料：Speed Index | Tools for Web Developers

トレースデータを保存するディレクトリを作成し、オーナーを zabbix に変更しておきます。

スクリプトを置く場所は、Zabbixサーバー設定ファイルの ExternalScripts パラメーターで確認してください。Zabbixサーバをパッケージからインストールしている場合は「/usr/lib/zabbix/externalscripts」になっていると思います。

以上をふまえて Speed Index の取得スクリプトを作成します。

sudo vi /usr/lib/zabbix/externalscripts/get_speed_index.sh

#!/bin/sh
export PATH="/usr/local/bin:/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/sbin"
export LANG=C

# ターゲットのURL
URL=$1

# トレースデータの保存先
HASH=`echo $URL | openssl md5 | awk '{print $2}'`
TRACE_PATH="/usr/lib/zabbix/trace_datas/trace-${HASH}.json"

# トレースデータを取得
node /usr/local/puppeteer_app/trace.js $URL $TRACE_PATH

# Speed Index の計算と値の切り出し
speedline $TRACE_PATH | grep -e '^Speed Index:' | cut -f2 -d':'

exit 0

オーナーを zabbix に変更して、実行権限を付けます。

確認のため zabbix ユーザーでスクリプトを実行します。Speed Index の値が表示されればOKです。

Speed Index 監視テンプレートの作成

続いて、Zabbix の管理画面でテンプレートを作成します。このテンプレートのアイテムに先ほど作成した、Speed Index の取得スクリプトを登録します。

テンプレート名など、各種の名称は任意です。ご自身が分かりやすい名称を設定してください。

テンプレートの作成

[設定]→[テンプレート]→[テンプレートの作成]をクリックします

[テンプレート]タブを選択　適当なテンプレート名とグループを入力または選択し、下の方にある「追加」ボタンをクリックしてテンプレートを作成します。

　↓

アイテムの作成

作成したテンプレートにアイテムを追加します。

[設定]→[テンプレート]　「My Template Speed Index」行の「アイテム」をクリックします。

「アイテムの作成」をクリックします。

下記を設定し「追加」をクリックします。Speed Index を監視する URL は、ユーザーマクロ「{$URL}」で指定します。

---(設定箇所)---------------------------
名前：Web Speed Index
タイプ：外部チェック
キー：get_speed_index.sh[{$URL}]
データ型：数値（浮動小数）
更新間隔(秒)：300
------------------------------

ホストの作成とテンプレートの適用

今回は、確認用にSpeed Index 監視テンプレートを適用するだけのホストを作成していますが、すでに作成済みのホストに、テンプレートとユーザーマクロ「{$URL}」を追加しても構いません。

[設定]→[ホスト]→[ホストの作成]　をクリックします。

「ホスト」タブを選択し、適当なホスト名とグループ名を入力します。監視先の URL はユーザーマクロで指定するので、IPアドレスはそのままでOKです。

続いて「テンプレート」タブを選択し、「新規テンプレートをリンク」枠の「選択」をクリックします。

先ほど作成した「My Template Speed Index」テンプレートにチェックを入れて「選択」ボタンをクリックします。

「新規テンプレートをリンク」枠の「追加」をクリックします。

「テンプレートとのリンク」枠に「My Template Speed Index」が表示されればOKです。

最後にユーザーマクロを設定します。「マクロ」タブをクリックし、マクロに「{$URL}」、値に Speed Index を監視する URL 入力して「追加」ボタンをクリックします。

以上でホストにテンプレートが適用されました。しばらく待って Speed Index の値が取得できていればOKです。

[監視データ]→[概要]　グループ「Speed Index」、タイプ「データ」を選択

ページのトレースと Speed Index の計算をしているため、処理に時間がかかります。「Timeout while executing a shell script.」エラーが発生する場合は、タイムアウト値を調整してみてください。（単位は秒です）
sudo vi /etc/zabbix/zabbix_server.conf

おわりに

Node.js のスキルが乏しいため(^^;) 処理を Node.js と シェルスクリプトに分けてしまいましたが、Node.js にまとめてしまった方がスッキリすると思います。