ラボ パート 4: アプリケーションのフロントエンドの速度低下をデバッグする

New Relic ホームページから Browser に移動し、 Relicstaurants アプリケーションを選択します。

ここには、ブラウザ アプリケーションに関連するすべてのデータが表示されます。これには、 JavaScript エラーのあるページ ビュー、 主要なウェブ バイタル、 サイトでのユーザー時間、 最初のページの読み込みとルートの変更などがあります。

下にスクロールして、 Front end vs. back end[フロント エンドとバック エンドの] グラフを確認します。

Back end (time to first byte) (50%) をクリックしてグラフをフィルタリングし、バックエンドの読み込みにかかる時間を確認します。

このグラフは、最悪の場合、バックエンドがリクエストを処理するのに最大 140 ミリ秒かかったことを示しています。これは、フロントエンドが遅延を引き起こしているということですか?

Front end (Window load + AJAX) (50%)[フロント エンド (ウィンドウ ロード + AJAX) (50%)]をクリックします。

そこで問題です！グラフは、遅延がフロントエンドで発生していることを示しています。

フロント エンドでのデラットの原因を絞り込むには、 Initial page load and route change[初期ページ ロードとルート変更] グラフを詳しく見てください。

Initial page load (Window load + AJAX)[初期ページの読み込み (ウィンドウの読み込み + AJAX)]をクリックします。

グラフは 、Initial page load (Window load + AJAX)[最初のページの読み込み (ウィンドウの読み込み + AJAX)] に 5 ～ 6 秒かかっていることを示しており、これは驚くべきことです。

詳細を表示するには 、Initial page load and route change[最初のページの読み込みとルートの変更] をクリックします。

これにより、 Page views[ページ ビュー]が表示されます。

最も時間がかかるでページを並べ替えます。

最初のページの読み込みに約 90% の時間がかかっていることに注意してください。

それをクリックして詳細を表示します。

このページには、 Page view breakdown[ページ ビューの内訳]、 Median initial page load time[初期ページ読み込み時間の中央値]、およびその他の重要な詳細が表示されます。Page view breakdown[ページビューの内訳] グラフは、ページに時間がかかっている理由と場所を絞り込むのに役立つため、ここでは特に重要です。このグラフをよく見ると、 Page rendering[ページのレンダリングに] 5000 ミリ秒もかかっていることがわかります。

左側のナビゲーションから Session traces に移動し、それらを Page loadの降順で並べ替えます。

ここでは、 Page load[ページの読み込み] 時間順に並べ替えられたセッション トレースが表示されます。

リストから、最初のものをクリックします。

これにより、 Session traces[セッション トレースの] 詳細ページが表示されます。

ここに、その特定のセッションの完全なトレースが表示されます。このページには、 Backend、 Dom Processing、 Page Load、およびその他のトレース関連情報も表示されます。

Page load[ページの読み込みに] 予想よりも時間がかかっていることに注意してください。負荷の詳細なタイムラインが必要です。ポインターを左右にスクロールして、タイムラインを調整します。

トレースをスクロールしてタイム ウィンドウを移動し、このセッション中の個々のイベントの詳細を確認します。

特定のイベントに 5 秒以上かかっていることに注意してください。

イベントをクリックすると詳細が表示されます。

イメージですのでご了承ください。特に、読み込みに 5 ～ 6 秒かかり、遅延の原因となっているのはアプリケーションの背景画像です。