当社のブラウザ モニタリングセッション トレースUI は、ウェブページのライフ サイクル全体で、ロード イベントとインタラクション イベントの詳細なタイムラインを 10 分間にわたって提供します。セッション URL またはセッション トレース ID を選択したら、詳細なウォーターフォールの視覚化とヒート マップの概要を使用して、メトリックを調べ、以下に関連する問題を特定できます。
- ページ読み込みのタイミング
- 個々のアセットの読み込み
- ユーザー インタラクション
- AJAXリクエスト
- コールバック
- セッション中のエラーおよびその他のイベント
問題点と解決策の洗い出し
one.newrelic.com > ブラウザー > (アプリを選択) > セッション トレースに移動します。以下は、セッション トレースで探索できる豊富な情報の例です。
セッションの痕跡は、あなたが理解するのに役立ちます。
課題 | これを行うには、セッション トレース データを使用します。 |
---|---|
バックエンドの問題 | リクエストが開始されてから、バックエンド アクティビティが終了して DOM の読み込みプロセスが開始されるまでの時間を確認します。 |
ページ読み込みタイミングの問題 | 次のような質問に答えるのに役立つデータを探索します。
|
コア Web バイタル | 最初の入力遅延と最大のコンテンツ ペイントのタイミング セグメントを調べて、Core Web Vitals スコアに影響するパフォーマンスの問題を特定します。 |
JavaScript イベント | JavaScriptとブラウザー イベントのシーケンスを調べて、次のことを理解してください。
|
エラー | エラーをソートまたはフィルタリングして、出現するパターンを確認します。たとえば、以下に基づいてエラーが増加するかどうかを確認できます。
|
パフォーマンスをユーザー エクスペリエンスに、インタラクションをパフォーマンスに結び付けることで、ユーザー セッション内のすべてのイベントを表示する機能は、問題領域を特定し、解決策を特定するのに役立ちます。パーマリンクを作成して、この情報を他のユーザーと共有することもできます。
始めましょう
セッション トレース機能を使用するには、ブラウザの監視にPro または Pro+SPA エージェント タイプを使用していることを確認してください。アプリに複数の名前を使用している場合、セッション トレースは最も具体的なアプリケーションにのみレポートされます。
ブラウザ監視は、 Resource Timing APIをサポートするブラウザからのみトレースをランダムにキャプチャします。セッション トレースはランダムにサンプリングされ、1 時間あたり 90 の割合で保存されます。一度に最大 500 のトレースをページ表示できます。
セッショントレースの選択
one.newrelic.com >All capabilities > Browser > (アプリを選択) > Session traces: URL またはセッション トレース ID で検索するか、任意の列を並べ替えて、リンクをクリックして対話型セッション トレースの詳細を使用します。
特定のセッション・トレースを選択するには
- one.newrelic.com >All capabilities > Browser > (ブラウザ アプリを選択) > Session tracesに移動します。
- インデックスを特定の URL またはセッション トレース ID に制限するには、検索ウィンドウを使用します。
- 他のパターンを探すには、任意の列の並べ替え順序を変更します。
- セッション トレース リンクをクリックし、詳細ページを使用して詳細情報にドリルダウンします。
より深い分析のために、 session
、 sessionTraceId
、 largestContentfulPaint
などの属性を照会することもできます。詳細については、ブラウザ モニタリング イベント データに関するドキュメントとデータ ディクショナリを参照してください。
セッション・セグメントの定義
New Relic で コピー/貼り付け方法を使用してデプロイされたアプリの場合、ブラウザーの監視には、ページ読み込みタイミング プロセスの一部として、ウェブ アプリとNetwork
時間のキュー時間が含まれます。これは、ブラウザーの監視がサーバー側のエージェントに依存して、自動挿入によってアプリケーションの値をブラウザー エージェントに渡すためです。
ブラウザーの観点から、このバックエンド時間の内訳に関する詳細情報を表示できます。セッション トレースは、利用可能なネットワーク関連のすべてのイベントを報告するため、ブラウザーが DNS ルックアップやその他のネットワーク イベントにどのように時間を費やしているかをケースバイケースで確認できます。
各セグメントの測定値は、セグメントが終了したセッションの長さを示します。たとえば、 Page load
が6.9s
の場合、これは、リクエストの開始から 6.9 秒後にページ読み込みイベントが完了したことを意味します。
次の表では、セッション トレースの各セグメントについて説明し、これらの属性の詳細についてはデータ ディクショナリへのリンクを示します。
セッション・セグメント | 説明 |
---|---|
リクエストが開始されてから、バックエンドのアクティビティが終了し、DOMのロードが開始されるまでの時間です。 | |
リクエストが始まってからDOMの処理が終わるまでの時間です。 | |
リクエストが開始されてから、ページロードイベントが発生するまでの時間です。 | |
リクエストが開始されてから、AJAXアクティビティが終了するまでの時間です。 | |
要求が開始されてから、マウス クリックやスクロールなどの最初のユーザー アクティビティが記録されるまでの時間。 | |
Core Web Vitals: リクエストが開始されてから、ユーザー入力に対する最初のブラウザー応答が記録されるまでの時間。 | |
Core Web Vitals: ビューポートに表示される最大のコンテンツ要素のレンダリング時間。 | |
セッションの合計時間です。 |
JavaScriptの実行と再描画が遅い
セッショントレースは、実行速度が遅く、ブラウザのメインスレッド上で後続の呼び出しの実行をブロックしているJavaScriptコードのコールバックを特定するのに役立ちます。これらのコールバックは、ユーザーのアクションに応じてブラウザが迅速にページを再描画するために、迅速に実行する必要があります。
セッション トレースでは、33 ミリ秒を超えるコールバックが強調表示されます。立て続けに呼び出された場合 ( requestAnimationFrame
ループ内など)、コールバックが 33 ミリ秒を超えると、フレーム レートが 30 フレーム/秒未満に低下します。この速度は、ユーザーにとっては遅いように見えます。