• ログイン今すぐ開始

本書は、お客様のご参考のために原文の英語版を機械翻訳したものです。

英語版と齟齬がある場合、英語版の定めが優先するものとします。より詳しい情報については、本リンクをご参照ください。

問題を作成する

セッションの痕跡Webページのライフサイクルを探る

当社のブラウザ モニタリングセッション トレースUI は、ウェブページのライフ サイクル全体で、ロード イベントとインタラクション イベントの詳細なタイムラインを 10 分間にわたって提供します。セッション URL またはセッション トレース ID を選択したら、詳細なウォーターフォールの視覚化とヒート マップの概要を使用して、メトリックを調べ、以下に関連する問題を特定できます。

  • ページ読み込みのタイミング
  • 個々のアセットの読み込み
  • ユーザー インタラクション
  • AJAXリクエスト
  • コールバック
  • セッション中のエラーおよびその他のイベント

問題点と解決策の洗い出し

one.newrelic.com > ブラウザー > (アプリを選択) > セッション トレースに移動します。以下は、セッション トレースで探索できる豊富な情報の例です。

セッションの痕跡は、あなたが理解するのに役立ちます。

課題

これを行うには、セッション トレース データを使用します。

バックエンドの問題

リクエストが開始されてから、バックエンド アクティビティが終了して DOM の読み込みプロセスが開始されるまでの時間を確認します。

ページ読み込みタイミングの問題

次のような質問に答えるのに役立つデータを探索します。

  • ユーザーのページ読み込みエクスペリエンスはどうですか?
  • DOM 処理または AJAX 要求が完了するまでにどのくらいの時間がかかりますか?
  • あるページの読み込みが他のページより遅いのはなぜですか?
  • セッション中の個々のイベントのコンテキストは何ですか?

コア Web バイタル

最初の入力遅延と最大のコンテンツ ペイントのタイミング セグメントを調べて、Core Web Vitals スコアに影響するパフォーマンスの問題を特定します。

JavaScript イベント

JavaScriptとブラウザー イベントのシーケンスを調べて、次のことを理解してください。

  • どれが他のものより時間がかかりますか?
  • 各イベントはいつ発生しますか?

エラー

エラーをソートまたはフィルタリングして、出現するパターンを確認します。たとえば、以下に基づいてエラーが増加するかどうかを確認できます。

  • ブラウザの種類 (Google Chrome、Mozilla Firefox など)
  • 特定のデバイス タイプ (デスクトップ、タブレット、モバイル)

パフォーマンスをユーザー エクスペリエンスに、インタラクションをパフォーマンスに結び付けることで、ユーザー セッション内のすべてのイベントを表示する機能は、問題領域を特定し、解決策を特定するのに役立ちます。パーマリンクを作成して、この情報を他のユーザーと共有することもできます。

始めましょう

セッション トレース機能を使用するには、ブラウザの監視にPro または Pro+SPA エージェント タイプを使用していることを確認してください。アプリに複数の名前を使用している場合、セッション トレースは最も具体的なアプリケーションにのみレポートされます。

ブラウザ監視は、 Resource Timing APIをサポートするブラウザからのみトレースをランダムにキャプチャします。セッション トレースはランダムにサンプリングされ、1 時間あたり 90 の割合で保存されます。一度に最大 500 のトレースをページ表示できます。

セッショントレースの選択

one.newrelic.com > ブラウザー > (アプリを選択) > セッション トレース: URL またはセッション トレース ID で検索するか、任意の列を並べ替えてから、リンクをクリックしてインタラクティブなセッション トレースの詳細を使用します。

特定のセッション・トレースを選択するには

  1. one.newrelic.com > Browser > (ブラウザーアプリを選択) > Session tracesに移動します。
  2. インデックスを特定の URL またはセッション トレース ID に制限するには、検索ウィンドウを使用します。
  3. 他のパターンを探すには、任意の列の並べ替え順序を変更します。
  4. セッション トレース リンクをクリックし、詳細ページを使用して詳細情報にドリルダウンします。

より深い分析のために、 sessionsessionTraceIdlargestContentfulPaintなどの属性を照会することもできます。詳細については、ブラウザ モニタリング イベント データに関するドキュメントとデータ ディクショナリを参照してください。

セッション・セグメントの定義

New Relic で コピー/貼り付け方法を使用してデプロイされたアプリの場合、ブラウザーの監視には、ページ読み込みタイミング プロセスの一部として、ウェブ アプリとNetwork時間のキュー時間が含まれます。これは、ブラウザーの監視がサーバー側のエージェントに依存して、自動挿入によってアプリケーションの値をブラウザー エージェントに渡すためです。

ブラウザーの観点から、このバックエンド時間の内訳に関する詳細情報を表示できます。セッション トレースは、利用可能なネットワーク関連のすべてのイベントを報告するため、ブラウザーが DNS ルックアップやその他のネットワーク イベントにどのように時間を費やしているかをケースバイケースで確認できます。

各セグメントの測定値は、セグメントが終了したセッションの長さを示します。たとえば、 Page load6.9sの場合、これは、リクエストの開始から 6.9 秒後にページ読み込みイベントが完了したことを意味します。

次の表では、セッション トレースの各セグメントについて説明し、これらの属性の詳細についてはデータ ディクショナリへのリンクを示します。

セッション・セグメント

説明

バックエンド

リクエストが開始されてから、バックエンドのアクティビティが終了し、DOMのロードが開始されるまでの時間です。

DOM処理

リクエストが始まってからDOMの処理が終わるまでの時間です。

ページロード

リクエストが開始されてから、ページロードイベントが発生するまでの時間です。

AJAXを待つ

リクエストが開始されてから、AJAXアクティビティが終了するまでの時間です。

First interaction

要求が開始されてから、マウス クリックやスクロールなどの最初のユーザー アクティビティが記録されるまでの時間。

First input delay

Core Web Vitals: リクエストが開始されてから、ユーザー入力に対する最初のブラウザー応答が記録されるまでの時間。

最大のコンテンツペイント

Core Web Vitals: ビューポートに表示される最大のコンテンツ要素のレンダリング時間。

間隔

セッションの合計時間です。

JavaScriptの実行と再描画が遅い

セッショントレースは、実行速度が遅く、ブラウザのメインスレッド上で後続の呼び出しの実行をブロックしているJavaScriptコードのコールバックを特定するのに役立ちます。これらのコールバックは、ユーザーのアクションに応じてブラウザが迅速にページを再描画するために、迅速に実行する必要があります。

セッション トレースでは、33 ミリ秒を超えるコールバックが強調表示されます。立て続けに呼び出された場合 ( requestAnimationFrameループ内など)、コールバックが 33 ミリ秒を超えると、フレーム レートが 30 フレーム/秒未満に低下します。この速度は、ユーザーにとっては遅いように見えます。

Copyright © 2022 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.