茄子です。前回は計測結果の詳しい調査方法を紹介しました ( https://techlab.q-co.jp/articles/96/ )
今回は独自の指標を計測する Custom Metrics (Custom Data)を紹介します。
Custom Metricsとは
SpeedCurveの計測データに、サイト独自のタイミングや収集対象で時間やサイズなどの指標を追加する機能です。以前はCustom Metricsのみでしたが現在は他の要素が追加されたため Custom Data という大きなくくりの一部が Custom Metrics となっています。
追加した指標は、Favoritesなどのグラフで元々提供されている他の指標と同様に扱うことが可能です。
特にブラウザに元々備わっている計測は、当然ではありますがページロードから読み込み完了までが基本的な計測対象であり、サイトごとのコンテンツの重要度の違いは考慮されていません。また、現代的なSPAや遅延ロード等の最適化が施されたページでは望ましい計測対象の指標が無いこともあります。
そういったケースで、自身のサイトにおける重要なコンテンツのロード後に計測される指標を作成し、記録することができます。また、規模の大きなサイトでは単にいくつかのチェックポイントとして追加するということも有効です。
解説
公式ドキュメント： https://support.speedcurve.com/docs/custom-metrics
Custom Metrics（ひいてはData）は、Performance API や Server-Timing Headerを用いて機能しています。より詳しく知りたい方はそちらも参考にしてください。
Custom Metricsの中にも種類があり、それぞれ用途で使い分けます。
・Timing：表示やロードにかかった時間
・Size：特定のエレメントのサイズやメモリ使用量など
・Numeric：汎用の数値型。サイト内で設置しているカウンターや、金額等
今回はTimingを測る指標を例として紹介します。
実装・設定
今回試すアプリケーションではReactを使っています。componentDidMountのタイミングを記録しています。その他、ヒーロー画像（動画）読み込み時や、主要なAPIのデータ取得前後なども良い候補です。performance.mark は、単にその時点に名前を付ける処理で、performance.measureで指定したものが実際に記録されます。 ( Performance API : https://developer.mozilla.org/ja/docs/Web/API/Performance )
第２引数のマークから第３引数のマークまでの時間が第１引数の名前で記録されます。
if (window.performance.mark) {
window.performance.mark('mark_componentDidMount');
window.performance.measure(
'mark_componentDidMount',
'domLoading',
'mark_componentDidMount'
);
}
mark_ という接頭辞が必要なわけではありませんが、コードの検索性のため付けています。
アプリへの反映が済んだら、SpeedCurveのSettings -> CUSTOM DATA -> EDIT CUSTOM DATA と進みます。
中段に METRICS がありますので ADD METRICS を押します。
選択肢が出るので、Timing Metrics -> User Timing API と選択します。
そうすると、↓の名前を入力する画面になります。Display Name はコードで付いている名前とは別に付けられる名前ですのでわかりやすいように入力してください。後から変えることも可能です。
確認
設定後に計測が実行された後、Favoritesからグラフ追加画面で、componentDidMountのデータが来ていれば成功です。（↓の画像は充分に回数を経ているため線になっていますが一回では点だけだと思います。）
終わりに
RUMではより多くのカスタムメトリクスが作成でき、最近では新たにGoogle Analytics的な Conversion, Dimension というのを設定できるようになっています。
次回はサードパーティースクリプトを分けて追跡する方法を解説します。