エンドユーザーエクスペリエンスは、テクノロジースタック全体により異なります。顧客の苦情や問題の原因を速やかに理解する必要があります。
- 問題は、インフラストラクチャやアプリケーション、最終的にそれを利用するブラウザに起因するか?
- 問題のあるインターネットブラウザや、CPUやメモリに障害のある自社のデータセンターの問題か、またはそれ以外か?
- ウェブサイトでカスタマーエクスペリエンスに重点を置いた場所を優先できるように、コアウェブバイタル(CWV)スコアを監視および改善するにはどうすればよいですか?
ヒント
本ドキュメントでは、弊社のブラウザ監視ソリューションがお客様のビジネスにとって重要である理由について詳しく説明しています。先にスキップしたい場合は、New Relicアカウントにサインアップしてください。(永久無料です。)ブラウザモニタリングエージェントをインストールしたら、データの処理を開始できます。
RUM(リアルユーザーモニタリング)を超える
多くのウェブサイトでは、初期ページの読み込み後に動的コンテンツが読み込まれるため、複雑なJavaScriptコードに対するエラーレポートの必要性が高まっています。プラットフォームでのブラウザモニタリングにより、リアルユーザーモニタリング(RUM)を行います。RUMでは、さまざまなウェブブラウザやデバイス、オペレーティングシステム、ネットワークからサイトに移動する際の、エンドユーザーの速度とパフォーマンスを測定します。
ブラウザモニタリングを使用することで、アプリでのエンドユーザーエクスペリエンスに関する実用的データが得られます。
ただし、New RelicのBrowserモニタリングでは、最初のページロードだけではなく、ページ全体のライフサイクルデータも測定されます。たとえば、Browser UIには次のものが表示されます。
- ページ閲覧の人気やユーザー満足度(Apdex)スコアなどの詳細なパフォーマンスデータ
- 非同期や動的表示やインタラクティブページのコンテンツ表示の速度を測定する認識されたパフォーマンスデータ
- エラーを引き起こすエンドユーザーの手順を示すためのJavaScriptエラー分析やスタックトレース、命令行の可視化
- ウェブページのライフサイクル全体での負荷やインタラクションイベントの詳細なタイムラインとヒートマップのあるセッションパフォーマンス
- ウェブページのタイミングやエンドポイント、特定の場所での問題を示すAJAXリクエスト
- シングルページアプリケーション(SPA)アーキテクチャによるアプリケーションのハッシュベースのルート変更
こうしたツール(他にもあります)を使用して、チームはエンドユーザーのページのロード体験を最適化し、バグをなくし、フルスタックでのトラブルシューティングを迅速に行えるようになります。
ユーザーの認識を検証
実際のユーザーデータから、実際のページのパフォーマンスについての知見が得られますが、サイトのパフォーマンスについてのユーザーの認識も検討する必要があります。ページでは多くの異なる方法でコンテンツをロードでき、ユーザーはそのコンテンツとのインタラクションをいつ行うかを制御します。これは、ユーザー中心のパフォーマンスメトリクスが、Browserモニタリングエージェントの標準ウィンドウオンロードのページロードタイム以外で発生するためです。
ブラウザモニタリングの概要ページには、最大視覚コンテンツの表示時間(LCP)、初回入力までの遅延時間(FID)、累積レイアウトシフト数(CLS)など、重要なコアウェブバイタルが含まれています。このPageViewTiming
イベントを使用して、その他のイベントに依存しない、よりリアルタイムの配信メカニズムを実現することもできます。
このデータは、視覚と反応の両方の視点から、サイトのユーザー体験がどのようなものかを理解するのに役立ちます。
インタラクティブアプリのパフォーマンスを改善
シングルページアプリケーション(SPA)モニタリングは、Browserのインタラクションでのルート変更や最初のページのロード、同期および非同期のアクティビティを自動的に追跡します。当社のBrowserエージェントとSPA APIを使用して、ブラウザ内で実行されるほぼすべてのものをモニターすることもできます。
開発者の場合、SPAモニタリングを使用して次のことを行えます。
- 読み込みや反応が早く、非常にインタラクティブなアプリケーションを作成します。
- リアルユーザーが体験しているスループットやパフォーマンスを監視します。
- ページ読み込みに関連した問題をトラブルシューティング・解決します。
- データのクエリと可視化を行い、ビジネスの決定を支援する。
- 優れたアプリケーションを迅速に市場に投入します。
フロントエンドの問題とバックエンドの問題を関連付ける
当社のプラットフォームを使用して、メトリクスやイベント、ログ、トレースなど、必要なあらゆる種類のデータのインストゥルメントを行えます。これにより、スタック全体でのエンドユーザーエクスペリエンスについての実行可能なデータが見つかります。例:
データの種類 | コメント |
---|---|
場所やドメイン | 特定の地理的な場所やエンドユーザーの特定の種類のアクティビティに重点を置くよう、Browserモニタリングを制限します。特定のドメインをモニターまたはブロックすることもできます。 |
インタラクションのトレンド | 比較チャート機能を使用して、実際のユーザー(Browser)インタラクションと、Syntheticsモニターに表示される傾向との間のページロードタイムを直接比較します。 |
ディストリビューティッド(分散)トレーシング | ディストリビューティッド(分散)トレーシングによるバックエンドサービスを通じて、ウェブブラウザからレイテンシを隔離します。UIを使用して、ブラウザのアクティビティやネットワークに費やした時間、バックエンドのアクティビティなど、すべてのトランザクションでの接続を表示できます。 |
ブラウザタイプ | 次のものを含む、使用するあらゆる種類のブラウザで区分されたアプリにより、エンドユーザーエクスペリエンスを詳しく調べます:
|
Browserモニタリングを開始する
以下の基本的な手順に従うと、New RelicでBrowserモニタリングをすぐに実行できるようになります。
- Browserモニタリングについての互換性の詳細と基本的な要件をご確認ください。
- Browserエージェントをインストールします。
- one.newrelic.com > Explorer > Browserアプリケーションに移動します。エクスプローラーを使用して、すべてのエンティティ、つまり、アプリケーションやホストから任意の要素のカスタムグループまで、そのレポートデータを特定できるすべてのエンティティにアクセスします。
- Browser summaryページで概要データを表示してから、ページロードタイミングの詳細とその他のUIデータにドリルダウンします。
- 主要なパフォーマンスデータのアラートを設定するか、インテリジェンスの応用ソリューションを使用して、アラートノイズを減らし、インシデントを関連付け、自動的に異常を検出します。
- デフォルトデータのクエリと視覚化(または自身のデータのカスタマイズ)を行ってから、ビジネスについてデータから分かることを分析します。
- 独自のチャートとダッシュボードをカスタマイズし共有します。