Speed Index を Zabbix + Puppeteer で監視する

Speed Index を Zabbix + Puppeteer で監視する
あぱーブログ
2018年2月28日  カテゴリー:Linux Zabbix  タグ: , , ,
Pocket
LINEで送る

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

Speed Index とは

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

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

2つのWEBページのファーストビュー

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

参考資料:Speed Index - WebPagetest Documentation

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

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

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

sudo mkdir /usr/local/puppeteer_app
sudo chmod 757 /usr/local/puppeteer_app
cd /usr/local/puppeteer_app/
npm i --save puppeteer

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

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

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

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

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

sudo chown -R zabbix /usr/local/puppeteer_app/
sudo chmod 755 /usr/local/puppeteer_app/

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

Chrome デベロッパーツールの「Parformance」画面

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

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

sudo npm install -g speedline

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

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

sudo mkdir /usr/lib/zabbix/trace_datas
sudo chown zabbix /usr/lib/zabbix/trace_datas/

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

sudo grep ExternalScripts /etc/zabbix/zabbix_server.conf
(略)
ExternalScripts=/usr/lib/zabbix/externalscripts

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

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

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

sudo chown zabbix /usr/lib/zabbix/externalscripts/get_speed_index.sh
sudo chmod 700 /usr/lib/zabbix/externalscripts/get_speed_index.sh

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

sudo -u zabbix /usr/lib/zabbix/externalscripts/get_speed_index.sh https://www.google.co.jp/
370.3 ← Speed Index の値

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

Timeout=4
 ↓
Timeout=15

おわりに

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

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です