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

Page loads ダッシュボードの柔軟性、機能、および使いやすさは、ITプロフェッショナルが問題のある箇所を迅速に特定し、特定のアプリケーションページで問題を経験している可能性のある従業員に焦点を当てることを可能にします。

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

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

• 調査を開始するには、上部の平均ページロード時間メトリックや、その隣にあるバックエンド、デバイス & アプリネットワーク、クライアントの各メトリックを評価してください。 これらのメトリックはデフォルトで、さまざまなページ間のすべてのナビゲーションを考慮したアプリケーションの全体的なパフォーマンスを示します。

  • バックエンドの時間が長いことは、サーバーがリクエストの処理に時間を要していることを示しています。 これが、効率の悪いサーバーサイドコード、不適切なサーバーハードウェア、またはリソース集約型の操作が原因であることがあります。 長いバックエンド時間の問題に対処するには、アプリケーション開発者がコードを最適化するか、サーバーハードウェアをアップグレードする必要があるかもしれません。 水平方向のメトリックスを使用して、 XMLHttpRequests (XHRs) のリソースタイミングを確認できます。 計算時間が長い XHR はサーバーコールが遅いことを示しており、それに応じて最適化できます。

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

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

• 次に、時間の経過とともにページのロード時間の変化を表示するタイムラインを使用して、最近のパフォーマンスの変更を巡回します。 このグラフでバックエンド、デバイス & アプリネットワーク、およびクライアントのメトリックをトグルし、それらの時間経過を観察できます。 下の従業員チャートを使って、ページの読み込み時間パフォーマンスに対する高使用量または低使用量の影響を特定します。

• 時間フィルタを調整して、特にパフォーマンスが悪い期間に焦点を当てます。 チャートのズーム機能を使用するか、右上隅のタイムフレームピッカーを使用して実行できます。

• 次に、重要なページとURLの内訳を評価します。 現代のSaaSアプリケーションでは、異なるページがさまざまなパフォーマンス特性を持っています。 このセクションは、あなたの環境で最も不満の原因となるページを強調しています。 内訳には、追加のコンテキストを提供するための5つの列が含まれています。 他と比較して、% フラストレーションページロードが非常に高いページを探します。

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

• 十分に悪い体験に寄与する他の次元を特定するために、残りの内訳 (デバイス、場所、組織、および技術) を確認します。 データをブラウザー、オペレーティングシステム、場所、または他のオプションでフィルターします。 ジオロケーションの構成についての詳細は、ジオロケーションの構成ドキュメントを参照してください。

• ウィジェットの右上隅のアクションメニューオプションを使用して、「調査」モジュールでページの読み込みが遅いことの調査を続けることができます。

ウォーターフォールメトリクスを使用してページの遅い読み込みを診断する

Webアプリケーションの詳細なトラブルシューティングには、ウォーターフォール分析メトリクスを使用してください。 これらのメトリックスは、パフォーマンスのボトルネックの正確な原因を特定し、エラーが発生しやすい要素を特定し、Webアプリケーション内のリソース集約型コンポーネントを強調するのに役立ちます。 ウォーターフォールメトリックスは、リソース分析タブのWebアプリケーショントラブルシューティングライブラリダッシュボードで利用できます。

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

Webリソースの新しいウォーターフォールメトリックスのリスト

Nexthink エクスペリエンス ブラウザー拡張機能は、Performance Resource Timing API を使用してこれらのメトリックを収集します。

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