New Relic Browserでは、Webサイトを利用する実際のユーザーのブラウザからパフォーマンスデータを収集し、ページの表示速度、Core Web Vitals、JavaScriptエラーなどを可視化できます。Webサイトで発生しているパフォーマンス上の問題をユーザー体験の観点から把握し、原因調査や改善につなげることができます。実際にNew Relic Browserではどのような情報を確認できるのか、主な機能を紹介します。
New Relic Browserと仕組み
Browserで取得できる主な情報
New Relic Browserでは、実際のユーザーのブラウザから収集したデータをもとに、Webサイトの表示速度や操作性、JavaScriptエラー、通信状況など、ユーザー体験に関するさまざまな情報を確認できます。これらの情報を確認することで、Webサイトで発生しているパフォーマンス上の問題を把握し、原因の特定や改善に活用できます。代表的な項目を以下に記載します。
Core Web Vitals
Core Web Vitalsは、Webページにおけるユーザー体験を評価するための指標です。New Relic Browserでは、ページの読み込み性能を示すLCP、ユーザー操作に対する応答性を示すINP、ページ表示の視覚的な安定性を示すCLSを確認できます。これらの指標を確認することで、Webサイトの表示や操作に関するユーザー体験上の問題を把握し、改善につなげることができます。
JavaScript Errors
JavaScript Errorsでは、Webブラウザ上で発生したJavaScriptエラーを確認できます。New Relic BrowserのSummary画面では、JavaScriptエラーが発生したページビューを確認でき、詳細な調査が必要な場合はJS errors画面へドリルダウンできます。例えば、特定の画面操作でJavaScriptエラーが発生している場合、エラーの内容や発生箇所を確認することで、ユーザーが正常に操作できなかった原因の特定につなげることができます。
Ajax Requests
Ajax Requestsでは、Webブラウザからバックエンドや外部のHTTP/HTTPSエンドポイントに対して行われた非同期通信の状況を確認できます。New Relic BrowserのAJAX画面では、リクエストの応答時間やスループット、ステータスコードなどを確認できるため、レスポンスが遅いAPIやエラーとなっている通信の特定に活用できます。リクエストごとの応答時間、リクエスト数、処理時間に占める割合、HTTPステータスコードなどを確認できるため、「どの通信に時間がかかっているのか」「特定のAPIにアクセスが集中していないか」「通信エラーが発生していないか」といった観点でWebアプリケーションの問題を調査できます。
Session Replay
sesion Replayは、Webサイト上でユーザーがどのように操作したのかを記録し、後から再現できる機能です。ページ遷移やクリックなど、ユーザーが実際にどのような操作を行っていたのかを確認できるため、エラー発生時の状況把握や、ユーザーが使いづらさを感じるポイントの特定に活用できます。たとえばJavaScriptエラーが発生した場合、エラー情報だけでは「ユーザーがどのような操作をしてエラーに至ったのか」まで把握することは難しい場合があります。Session Replayを組み合わせることで、エラー発生前後のユーザー操作を確認し、問題の原因調査につなげることができます。
記録方法
プライバシーについて
ユーザーの操作を記録するとなると、「入力した個人情報まで記録されないの？」と心配になるかもしれません。Session Replayではプライバシー保護のため、デフォルト設定ではページ上のテキストやユーザー入力がNew Relicへ送信される前にブラウザ側でマスクされ、アスタリスク（*）に置き換えられます。そのため、まずはデフォルトのプライバシー設定を利用することをおすすめします。必要に応じてマスキングを解除したり記録範囲を変更したりする場合は、個人情報や機密情報が意図せず記録されないことを検証環境等で確認したうえで導入します。
留意事項
Session Replayを有効にしたものの、「リプレイが表示されない」「実際のWebサイトと見た目が違う」といったことがあります。このような場合、Webサイトの構成やBrowser Agentの設定などが影響している可能性があります。ここでは、Session Replayを利用する際に確認しておきたい主なポイントを紹介します。
Session Replayが表示されない
Session Replayを有効にしていても、必ずすべてのユーザー操作が記録されるわけではありません。Session Replayでは記録するセッションの割合を設定できるため、サンプリングレートが低い場合、確認したいセッションが記録対象になっていない可能性があります。Replayが見つからない場合は、まずSession Replayのサンプリングレートを確認します。必要に応じてサンプリングレートを一時的に引き上げ、対象のセッションが記録されるか確認します。
Replayの画面レイアウトが崩れて表示される
Session Replayは、Webサイトを動画として録画しているわけではありません。Browser AgentがDOMやCSSなどの情報を取得し、それらをもとにWebサイトの画面を再構築しています。CSSを別のドメインから読み込んでいるWebサイトでは、CORS（Cross-Origin Resource Sharing）の制約によってBrowser AgentがCSSを取得できず、リプレイ上でレイアウトやデザインが正しく再現されない場合があります。該当する場合は、CSSへのアクセスを許可するCORS設定や、crossorigin=”anonymous”の設定を確認します。 New Relic公式ドキュメントでは、対象のlink rel=”stylesheet”要素にcrossorigin=”anonymous”を追加する方法が案内されています。
iframe内が表示されない
iframeで表示するページが、同じWebサイト内のページか、別ドメインのページかによって、Session Replayで記録できる範囲が異なります。特に、別ドメインのページをiframeで表示している場合、Browser Agentが親ページ側にのみ配置されていると、iframe内の内容は記録されず、リプレイ上では空白として表示されます。別ドメインの場合、iframe内も記録するには、iframe側へのBrowser Agentの配置を検討する必要があります。
データ量が想定より多い
Session Replayのデータ量は、単純に「アクセス数 × 録画時間」で決まるわけではありません。ページのDOM構造の複雑さや、DOMがどれくらい頻繁に変化するかによってもデータ量が変化します。たとえば、DOMの更新が頻繁なページやインラインSVGを多く使用するページでは、データ量が増える可能性があります。インラインSVGを多く使用している箇所がないか確認します。HTMLの対象要素にnr-blockを指定したり、New RelicのBlock selectorsを設定したりすることで、キャプチャ対象から除外できます
導入にあたって確認しておくべきこと
New Relic Browserの導入にあたっては、「既存のWebサイトに影響はないか」「利用環境で正常にデータを収集できるか」「どのようなデータが収集されるのか」といった点が気になるところです。ここでは、利用するための前提条件、パフォーマンスへの影響、セキュリティの3つの観点から、導入前に確認しておきたいポイントを紹介します。
前提条件
1. JavaScriptが実行できる環境であること
Browser AgentはWebページ内でJavaScriptとして動作します。そのため、ブラウザでJavaScriptが実行可能やAgentスクリプトをHTMLへ埋め込み可能である必要があります。
2. New Relicへの通信が許可されていること
Browser Agentは収集したデータをNew Relicへ送信します。そのため利用者のブラウザからNew RelicへのHTTP/HTTPS通信が必要です。特に高度なBrowser Monitoring機能を利用する場合は HTTPS が推奨されています。
3. 広告ブロッカーやトラッキング防止の影響を受ける可能性がある
以下のような環境ではデータ収集が制限される場合があります。実際の利用者端末の一部では、計測データが欠損する可能性があります。
- AdBlock
- Brave Browser
- Firefoxの強化型トラッキング防止機能
- Disconnectリストを利用するブラウザ
4. サポート対象環境
公式サポート対象は以下です。多くの一般的なWebブラウザ環境で利用できます。
- Google Chrome（直近10バージョン）
- Microsoft Edge（直近10バージョン）
- Mozilla Firefox（直近10バージョン）
- Safari（直近10バージョン）
5. Content Security Policy (CSP) の確認
New Relic Browserでは、Webページ上でBrowser AgentのJavaScriptを実行し、収集したパフォーマンスデータをNew Relicへ送信します。そのため、WebサイトでContent Security Policy（CSP）を設定している場合、CSPによってBrowser AgentのJavaScript実行やNew Relicへのデータ送信がブロックされないことを確認する必要があります。
パフォーマンス影響
監視用のJavaScriptを埋め込むことで、Webサイトが重くならないの？と疑問に思う方もいるかもしれません。
New Relic公式ドキュメント「ブラウザのモニタリングとパフォーマンスへの影響」によると、Browser Agentによるパフォーマンスへの影響は非常に小さく、ユーザーが体感しにくいレベルに抑えられています。
ただし、実際のWebサイトでは利用しているJavaScriptやコンテンツ、ユーザー環境などが異なります。そのため、本番環境へ導入する前に、検証環境でBrowser Agentを導入し、ページ表示などへの影響がないことを確認しておくと安心です。
ユーザー体験への影響
New Relic公式ドキュメントでは、Browser Agentによるページ読み込み時の処理時間は、1ページあたり合計15ms未満とされています。また、一般的にユーザーは200ms未満のWebサイトのパフォーマンス低下を検出できないとしており、Browser Agentによる処理時間はそれを大きく下回っています。通常の利用においては、Browser Monitoringの導入によるユーザー体験への影響は非常に小さいと考えられます。
サーバへの負荷影響
Browser Monitoringの監視処理は、WebサーバやAPサーバ上ではなく、利用者のブラウザ上でJavaScriptとして実行されます。そのため、監視処理によってWebサーバやAPサーバのCPU・メモリ使用量が増加することは限定的で、アプリケーションサーバへの処理負荷を抑えながらユーザー体験を監視できます。
ネットワークへの影響
セキュリティについて
New Relic BrowserはWebサイトの利用状況やパフォーマンスを可視化するための監視ツールですが、導入時には「どのようなデータが収集されるのか」「個人情報は取得されないのか」が気になるポイントです。New Relic Browserは、Webサイトのパフォーマンスデータを収集・可視化することを目的とした機能です。標準では、監視対象のアプリケーションが利用・保存しているデータを収集するものではなく、明示的に設定しない限り、それらのデータは記録されません。
Browser Agentが収集するデータ
Browser Agentのデータ収集ポリシー
New Relic Browser Agentは、Webサイトのパフォーマンス分析を目的として設計されており、URLクエリパラメータや個人情報は収集・保持しない仕組みを採用しています。また、Cookieは認証用途ではなく、セッション追跡やパフォーマンス計測に利用されます。一方で、JavaScriptエラー収集ではエラーメッセージやスタックトレースが送信されるため、機密情報をエラーログに出力しない運用が重要です。
さいごに
New Relic Browserでは、Core Web VitalsやJavaScriptエラー、AJAX通信など、実際のユーザー体験に関わるさまざまな情報を可視化できます。Webサイトの状態を実ユーザーの視点から把握することで、問題の早期発見や原因調査、継続的なパフォーマンス改善に活用できます。本記事が、New Relic Browserを活用したWebサイト監視を検討する際の参考になれば幸いです。
SCSKはNew Relicのライセンス販売だけではなく、導入から導入後のサポートまで伴走的に導入支援を実施しています。くわしくは以下をご参照のほどよろしくお願いいたします。
