ページロードの遅延のトラブルシュート

ページの読み込み ダッシュボードの柔軟性、機能、使いやすさにより、IT専門家は問題箇所を迅速に特定し、特定のアプリケーションページに問題を抱えている可能性のある従業員に焦点を当てることができます。

パフォーマンスのしきい値を確認し、フィルターを設定して、ページ読み込みが遅い場合のトラブルシューティングを行います。 各アプリケーションごとにしきい値を個別に設定するか、デフォルトの設定を使用できます。 詳細については、閾値 のドキュメンテーションを参照してください。

ページの読み込みが遅い場合のトラブルシューティングには、さまざまなアプローチがあります。

• 調査を始めるには、最初に 平均ページ読み込み時間 指標を評価し、その隣にある バックエンド、デバイスとアプリのネットワーク、クライアント の指標も確認します。 これらの指標は、デフォルトで、異なるページでのすべてのナビゲーションを考慮したアプリケーションの全体的なパフォーマンスを示します。

  • バックエンド時間が長いことは、サーバーがリクエストを処理するのに長時間かかっていることを示しています。 これは、非効率なサーバー側のコード、不十分なserver hardware、またはリソース集約型の操作が原因である可能性があります。 バックエンド時間が長い問題を解決するために、アプリケーションの開発者はコードを最適化するか、サーバーのhardwareをアップグレードする必要があるかもしれません。 XMLHttpRequests (XHR) のリソースタイミングを調査するには、ウォーターフォールメトリクスを使用します。 計算時間が長いXHRは、サーバーコールが遅いことを示しており、適宜最適化できます。

  • ネットワーク時間が長い場合、ネットワークの混雑、遅いインターネット接続、大きなファイルサイズ、またはサーバーとクライアントの地理的距離などの問題を示している可能性があります。 これらの問題を隔離するには、国、エンティティ、場所の種類、ISP、アダプタの種類、および最大リソース別にネットワーク時間を調べることができます。

  • クライアント時間が長いことは、ページ要素のレンダリングの遅さ、JavaScript処理の過剰、CSSスタイルの非効率性、またはデバイス/OSが他のタスクを処理していることを示す可能性があります。 これらの問題を解決するために、アプリケーションの開発者は、HTTPリクエストの数を減らしたり、CSSおよびJavaScriptファイルを最小化したり、ブラウザキャッシュを利用したりしてクライアント側のコードを最適化する必要があるかもしれません。

• 次に、時間の経過に伴うページの読み込み時間を示すタイムラインを使用して、パフォーマンスの最近の変化を探します。 このチャートでは、バックエンド、デバイスとアプリのネットワーク、クライアントの指標を切り替えて、これらがどのように進化したかを観察できます。 下の従業員チャートを使用して、利用の多寡がページの読み込み時間パフォーマンスに与える影響を特定します。

• 時間フィルターを調整して特にパフォーマンスが悪かった期間に焦点を当てます。 これはチャートのズーム機能を使用するか、右上隅の時間枠セレクターを使用して行えます。

• その後、主要ページとURLの内訳を評価できます。 異なるページは、モダンSaaSアプリケーションで異なるパフォーマンス特性を持っています。 このセクションでは、環境で最もフラストレーションを引き起こすページを強調表示します。 内訳には追加のコンテキストを提供する5つの列が含まれています。 他のページと比較して、フラストレーションの多いページの読み込み率が特に高いページを探します。

• これらのページをクリックすると、ダッシュボードにフィルターが適用されます。 ページ上部のグラフがそれに応じて更新されます。 次に、上記の手順を使用してバックエンド、ネットワーク、クライアントの問題によるページの遅さを特定します。

• 他の次元が大きな悪影響を及ぼしているかを特定するために、残りの内訳 (デバイス、場所、組織、技術) を確認します。 データをブラウザ、OS、場所、その他のオプションでフィルターします。 地理位置情報の設定に関する詳細については、地理位置情報の設定 ドキュメントを参照してください。

• 遅いページの読み込みに関する調査は、ウィジェットの右上隅にあるアクションメニューオプションを使用して、調査モジュールでフォローアップできます。

ページの読み込みが遅い場合を診断するためのウォーターフォール指標

webアプリケーションの詳細なトラブルシューティングには、ウォーターフォール分析指標を使用します。 これらの指標は、パフォーマンスのボトルネックの正確な発生源を特定し、エラーを起こしやすい要素を識別し、webアプリケーション内のリソース集約型のコンポーネントを強調表示します。 ウォーターフォール指標は、webアプリケーショントラブルシューティング ライブラリダッシュボードの リソース分析 タブで利用できます。

詳細については、webアプリケーション高度なトラブルシューティング ドキュメントを参照してください。

webリソースの新しいウォーターフォール指標の一覧

Nexthink アプリケーション エクスペリエンスのブラウザ拡張機能は、パフォーマンスリソースタイミング API を使用してこれらのメトリックを収集します。

名前	NQL Syntax	説明
ナビゲーション中の最長のリソース (名前、タイプ、サイズ、期間)	•longest_resource_url •longest_resource_type •longest_resource_load_time •longest_resource_size	最長のリソース は、webページをレンダリングするために必要なすべての要素の中で最も長い読み込み時間を経験したリソースを指します。 特定のリソースが他のリソースと比べて著しく長い時間をかけて読み込まれる場合、それはウェブアプリケーションの全体的な読み込み速度に影響している可能性があります。
ナビゲーション中の最大のリソース (名前、タイプ、サイズ、期間)	•largest_resource_url •largest_resource_type •largest_resource_load_time •largest_resource_size	最大のリソース は、webページを読み込む際に完全に読み込まれるのに最大のファイルサイズを持っていたリソースを指します。 ユーザーのブラウザが大きなリソースをダウンロードしてレンダリングする必要がある場合、それは待ち時間の増加とページ読み込み時間の遅延を引き起こす可能性があります。 大きなリソースを分析することは、それらのサイズを最適化または圧縮して減らす機会を特定するのに役立ちます。
連絡されたドメインの数	domains_contacted	連絡されたドメインの数 は、画像、スクリプト、スタイルシート、フォント、その他のリソースが取得されるさまざまなユニークなドメイン名の数を示します。 これらのドメインには、アプリケーション自体のドメインおよび分析スクリプト、広告、コンテンツ配信ネットワーク（CDN）などのサードパーティのリソース用のドメインが含まれる可能性があります。 連絡された各ユニークなドメインは、ブラウザがリソースを取得する必要のある別々のサーバーを表し、これが全体的なページ読み込み時間に影響を与える可能性があります。
リソースの数	number_of_resources	リソースの数 は、ナビゲーションイベント中に読み込まれた画像、スクリプト、スタイルシート、またはその他のファイルの総数を示します。 webページにリソースが多いほど、ブラウザで読み込んでレンダリングするのに時間がかかる可能性があります。 リソースの数を分析することで、webアプリケーションのパフォーマンスを最適化する機会を特定できます。 たとえば、CSSやJavaScriptファイルの最小化や結合、画像の圧縮、またはキャッシング技術の使用を検討して、サーバーへのリクエストの数を減らすことができます。
大きなリソースの数	number_of_large_resources	大きなリソースの数 は、ナビゲーションイベント中に100KB以上のリソース（画像、スクリプト、スタイルシート、その他のファイル）の数を示します。 ユーザーのブラウザが大きなリソースをダウンロードしてレンダリングする必要がある場合、それは待ち時間の増加とページ読み込み時間の遅延を引き起こす可能性があります。 大きなリソースを分析することは、それらのサイズを最適化または圧縮して減らす機会を特定するのに役立ちます。
リソースエラーの数	number_of_resource_errors	リソースエラーの数 は、ナビゲーションイベント中にロードに失敗したまたはエラーに遭遇したリソース（画像、スクリプト、スタイルシート、その他のファイル）の数を示します。 リソースエラーは、webアプリケーションに欠けているファイルまたはアセットがあることを示している可能性があります。 これにより、リンク切れ、画像のないリンク、または機能しないスクリプトが発生する可能性があります。