ブラウザ・モニタリングのセッション・トレースは、ウェブページの全ライフサイクルにおけるロードおよびインタラクション・イベントの詳細なタイムラインを10分間にわたって提供します。ページのロードタイミング、個々のアセットのロード、ユーザーのインタラクション、AJAXリクエスト、コールバック、エラー、その他のイベントがインタラクティブなタイムラインに表示され、詳細なウォーターフォールの視覚化、ヒートマップの概要、そのセッションに関連するハイライトされたメトリクスと問題が含まれます。
問題点と解決策の洗い出し
セッションの痕跡は、あなたが理解するのに役立ちます。
- ユーザーが のページロードをどのように体験したか 、DOM ロードにかかる時間、AJAX リクエストが完了するまでの待ち時間、ユーザーのページとのインタラクションなど。
- New Relicのメトリクスがエンドユーザーの体験をどのように反映しているか
- JavaScript とブラウザのイベントのうち、他よりも時間がかかるものと、それぞれのイベントが発生するタイミングの順序を教えてください。
- ボトルネックの発生箇所とその原因について
- セッション中の個々のイベントのコンテキストを提供することで、あるページの読み込みが他のページよりも遅くなることがある理由
パフォーマンスをユーザーエクスペリエンスに、インタラクションをパフォーマンスに結びつけることで、ユーザーのセッションにおけるすべてのイベントを詳細かつ直感的に可視化することができ、問題点をピンポイントで指摘し、解決策を容易に見出すことができます。
要件
ブラウザのセッショントレース機能を使用するには、以下の条件を満たしている必要があります。
- ProまたはPro+SPAのエージェントタイプが必要です。
- お客様の エージェントのバージョン は、ブラウザモニタリングに対応している必要があります。
- 1つのアプリに複数の名前を使っている場合 、セッショントレースは 最も特定のアプリケーション にのみ報告されます。
Browser randomlyは、 Resource Timing API をサポートしているブラウザからのみトレースをキャプチャします。
セッショントレースの選択
Session traces インデックスには、選択されたアプリのタイムピッカーの選択に基づいた最新のトレースが一覧表示されます。セッショントレースはランダムにサンプリングされ、90/時間の割合で保存されます。
一度に最大500個のトレースをページングすることができます。さらに、リストを以下のような属性でソートしたり、検索したりすることができます。
- クエリ文字列パラメータを削除したフルURL
- ブラウザの種類
- 日付/時刻で開始
- ページロード時間
one.newrelic.com > ブラウザ> （アプリを選択）> セッショントレース: ブラウザのインデックスからセッショントレースを選択できます。
特定のセッション・トレースを選択するには
- one.newrelic.com にアクセスし、「ブラウザ」> （アプリを選択）> セッション トレース.
- 別の日付や時間帯のセッショントレースを探すには、 time picker を使用します。
- 特定のタイプのトレースにインデックスを限定するには、検索ウィンドウを使用します。
- 詳細情報を見るには、セッショントレースのリンクを選択します。
セッショントレースの詳細表示
セッショントレース 詳細ページでは、トレースに関するサマリー情報、タイミングの詳細を示すヒートマップ、および探索可能なイベントのウォーターフォールが提供されます。色分けされた凡例は、ウェブページのライフサイクルにおけるページロードイベントを示しています。
コピー／ペースト方式で 配置されたアプリの場合 、ブラウザのモニタリングには、 ページロードタイミングプロセスの一部として、ウェブアプリとキューの時間がネットワーク時間に含まれます 。これは、ブラウザが、アプリケーションの値をオートインジェクションによってブラウザエージェントに渡すために、サーバサイドエージェントに依存しているためです。
この"バックエンド" の時間の内訳について、ブラウザの視点から詳細な情報を見ることができます。セッショントレースでは、利用可能なすべてのネットワーク関連イベントがレポートされるため、ブラウザがDNSルックアップやその他のネットワークイベントにどのように時間を費やしているかをケースバイケースで確認することができます。
one.newrelic.com > ブラウザ> (アプリを選択)> セッショントレース> (トレースを選択): ブラウザのセッショントレースの詳細を使用して、エンドユーザーのウェブページセッション中のイベントを調べ、問題を特定します。
セッショントレースを表示するには、イベントスタックを垂直方向にスクロールしてウォーターフォールチャートを表示したり、個々のイベントを選択してその詳細を表示したりします。
以下を行う場合... | 操作... |
|---|---|
このセッショントレースのWebページを見る | トレースのリンクを選択します。 |
特定の時間にジャンプ | ヒートマップ上の時間指標やイベントを選択します。 |
個別イベントの詳細を見る | ウォーターフォールチャートで任意のイベントを選択します。そこから、必要に応じて View full details を選択します。 |
セッショントレースの場所を変更する | ヒートマップをクリックするか、ウォーターフォールチャートを縦にスクロールしてください。 |
全体のトレースの拡大・縮小 | ヒートマップの下にあるプラス またはマイナス のアイコンを選択してください。 |
セッショントレース情報の共有 | パーマリンク を作成して、フォーム、チケット、メールなどに貼り付けます。 |
セッション・セグメントの定義
重要なセッショントレースの測定値は、 Session traces ページの右上隅に表示されます。最初の4つの測定値は、セグメントが終了したセッションの時間を表しています。例えば、 Page Load is 0.202s とすると、リクエスト開始から0.202秒後にページロードイベントが完了したことを意味します。
セッション・セグメント | 説明 |
|---|---|
バックエンド | リクエストが開始されてから、バックエンドのアクティビティが終了し、DOMのロードが開始されるまでの時間です。 |
DOM処理 | リクエストが始まってからDOMの処理が終わるまでの時間です。 |
ページロード | リクエストが開始されてから、ページロードイベントが発生するまでの時間です。 |
AJAXを待つ | リクエストが開始されてから、AJAXアクティビティが終了するまでの時間です。 |
First interaction | リクエストが開始されてから、マウスのクリックやスクロールなどの最初のユーザーアクティビティが記録されるまでの時間。 |
期間 | セッションの合計時間です。 |
JavaScriptの実行と再描画が遅い
セッショントレースは、実行速度が遅く、ブラウザのメインスレッド上で後続の呼び出しの実行をブロックしているJavaScriptコードのコールバックを特定するのに役立ちます。これらのコールバックは、ユーザーのアクションに応じてブラウザが迅速にページを再描画するために、迅速に実行する必要があります。
セッショントレースでは、33ms以上のコールバックがハイライトされます。 requestAnimationFrame のループの中などで連続して呼び出されると、33ms以上のコールバックはフレームレートを毎秒30フレーム以下にしてしまいます。この速度はユーザーには遅いと感じられます。