はじめに

　New Relicでユーザーが体験しているWebサイトのパフォーマンスを計測する際にBrowserの機能を活用できます。New Relicを使用すると、ユーザーが体験しているWebサイトのパフォーマンス（ページのロード時間、JavaScriptエラー、Ajaxリクエスト等）を計測し、それを視覚化することが可能です。またNew Relic　BrowserはUX改善やSEO施策の指標としてCore Web Vitals（CWV）を計測しています。
　さらに、New RelicとCWVを組み合わせることで、特定のページのアクセス数やロードに時間がかかっている原因を特定することが可能になります。例えば、Largest Contentful Paint（LCP）はページのメインコンテンツがどれだけ早く描画されるかを測定します。これとNew Relicのページビュー情報を組み合わせることで、どのページでコンテンツの描画に時間がかかっているのか、またそのページにどれだけアクセスしているのかを特定することが可能になります。このようにして、パフォーマンスの問題を的確に特定し、具体的な改善策を立てることができます。
　しかしCWVの計測にはweb vitalsのライブラリが使用されているため、ユーザーがChrome以外のブラウザ（Safari、Firefox）でアクセスした場合にはLCPが計測されません。メインコンテンツの読み込み時間が計測できないことでリアルタイムのユーザー体験を把握できなくなるため、LCPを計測できない場合でもメインコンテンツの描画に関連した指標が収集できるようにしたいです。

　今回はNew Relicのカスタム属性とperformance.now()のメソッドを使用して画像等のメインコンテンツが表示される時間を計測し、可視化する方法を紹介します。

New Relicを使用した画像の表示スピードの計測方法

New Relicのセットアップ

　Webサイトのパフォーマンス情報をNew Relicに送信するにはBrowserエージェントの設定が必要です。
こちらのドキュメントの手順に従ってインストールを実施してください。

画像読み込み時間の計測方法

　New RelicのBrowserエージェントを設定することでカスタム属性を送信するsetCustomAttributeやユーザーIDを送信するsetUserIdなどの各種BrowserAPIが使用できるようになります。計測対象の画像がロードされたタイミングでスクリプトを実行することで時間を計測しています。そして取得した時間をNew Relicのカスタム属性としてデータを転送します。また、送信したカスタム属性はPageViewとPageViewTimingのイベントの属性として登録されます。

Browserエージェントが導入されているページで下記2つのコードを追加します。

New Relicへカスタム属性を転送するjavascript

　    function imgLoaded() {
          const OnLoadTime = performance.now() / 1000;
          window.newrelic.setCustomAttribute('onLoadLargestContentfulPaint', OnLoadTime);
        }

ターゲットにする画像のHTML

<img src="main_img.png" onLoad={imgLoaded()}>

この方法であればどのブラウザでも画像の読み込みタイミングを計測することが可能です。また複数回スクリプトが実行された場合は最後に実行された計測値がNew Relic上に保存されています。

データの確認方法

　Query Your Data > Data explorer > EventsでPageViewイベントを選択して、Plotにカスタム属性として設定したfirstMeaningfulPaintが表示されていることとデータがNew Relicに送付されていることを確認します。

データの可視化とモニタリング

New Relicのダッシュボードの設定

　データを継続的に確認するためにダッシュボードの設定を行います。Data explorerで表示したチャートをカスタマイズしてダッシュボードに表示するため、Dimensionsでpageurlを選択します。これでページ毎の画像読み込みタイミングの平均値が確認できるようになります。
ダッシュボードにはチャートの右上にあるメニュー「add to dashboard」から追加できます。

　LCPの評価基準は、2.5秒以内であれば「GOOD」、4.0秒以上だと「POOR」と評価されます。Billboardのチャートを使用するとLCPの評価基準に合わせてWarning、Criticalを設定することでステータスを色で表現できます。

パフォーマンスのモニタリングとトラブルシューティング

　ダッシュボードに追加したチャートからアラートの設定が可能です。LCPの評価基準に合わせてアラートを設定することでWebサイトの変更等によってパフォーマンス劣化が発生した場合に検知、対処ができるようになります。

まとめ

　今回は、Webサイト上の画像表示スピードを計測する方法としてNew Relicの活用をご紹介しました。特定の画像の読み込み時間を計測し、そのデータをNew Relicのカスタム属性として送信することで、各種の分析が可能となります。

　カスタム属性は非常に柔軟なツールで、読み込み時間だけでなく、ユーザーIDやテナントIDなどの情報も連携可能です。これにより、画像の読み込み時間とユーザー情報を組み合わせることで、ユーザー体験の詳細な分析が可能となります。これにより、ユーザーの体験を改善するためのデータドリブンな意思決定が可能となります。
　今回は画像の読み込み時間に焦点を当てましたが、この手法はテキストや動画などのコンテンツに対しても適用できます。サイトのメインコンテンツに対してこの手法を試すことで、より深い理解と改善の機会が得られるでしょう。

　さらに、カスタム属性の利用はNew RelicのBrowserだけに限定されません。APMやMobileなどの他のツールでもカスタム属性を設定することが可能です。これにより、ユーザーやテナント毎の分析だけでなく、エラーやパフォーマンス劣化の調査にも活用できます。これはサイトの全体的なパフォーマンスを評価し、問題を特定して対策を立てるための重要なツールとなります。
　このように、New Relicとカスタム属性の活用により、深い分析と改善のための具体的なデータを得ることができます。ユーザー体験の向上とパフォーマンス最適化のために、ぜひ試してみてください。

Core Web Vitals

Custom属性

New Relic Browserとカスタム属性を使って画像の読み込み時間を計測してみた