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

ラボ

この手順は、New Relic を使用して Web アプリのトラブルシューティングを行う方法を説明するラボの一部です。

ラボの各手順は最後の手順に基づいているため、この手順を開始する前に、最後の手順 であるアプリケーションのエラーをデバッグするを完了していることを確認してください。

アプリケーションの JavaScript エラーを修正した後、あなたとあなたのチームは自信を持っています。ダウンタイムの準備ができて、ソーシャルメディアに向かいますが、Twitter をチェックすると、混乱している顧客が何人かいます。

ええとああ！あなたの顧客は幸せそうに見えません。New Relic ブラウザー監視を使用して、遅延の原因を発見する時が来ました。

重要

New Relic でデータを表示するには、この手順でブラウザーの監視を有効にする必要があります。

まだ行っていない場合は、ブラウザエージェントを使用してアプリをインストルメント化します。

アプリケーションのデバッグの遅さ

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

ここには、Page views with JavaScript errors、Core web vitals、User time on the site、Initial page load and route changes などを含む、 browserアプリケーションに関連するすべてのデータが表示されます。

largest contentful paint (LCP)に注目してください。

最大コンテンツフルペイント (LCP) は、Web ページのメインコンテンツが読み込まれる速度を表します。理想的には、コンテンツの読み込みに 1 ～ 2 秒以上かかることはありません。ここでは、サイトの読み込みに 5 秒以上かかっていることがわかります。ユーザーが不満を言うのも不思議ではありません。

しかし、この遅延の原因は何ですか?バックエンド？

下にスクロールして、 Front end vs. back endグラフに注目してください。

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

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

Front end (Window load + AJAX) (50%)をクリックします。

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

フロントエンドでの遅延の原因を絞り込むには、 Initial page load and route changeグラフを詳しく見てください。

Initial page load (Window load + AJAX)をクリックします。

グラフは、 Initial page load (Window load + AJAX)に 5 ～ 6 秒かかっていることを示しており、これは憂慮すべきことです。

詳細を表示するには、 Initial page load and route changeをクリックしてください。

これにより、 Page viewsに移動します。

ページをMost time-consumingで並べ替えます。

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

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

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