# ページロードメトリックの理解 平均ページロード時間は、Navigation Timing Level 2 仕様の *onload* イベントを使用して サイトで測定されます。 詳細については、以下の [ナビゲーションタイミングAPI](#navigation-timing-api) セクションを参照してください。 ## ナビゲーションイベントとは何ですか？ ナビゲーションイベントとは、URL の変更時にブラウザが新しいエントリで履歴を更新するためにトリガーされるウェブページの変更です。 ブラウザの履歴は、ユーザーが以前に訪れたページに戻ることを可能にする訪れたアドレスのリストです。 ダッシュボードには、2種類のナビゲーションの値が標準で報告されます: * **ハードナビゲーション** は、ブラウザが全く新しいページを読み込むようにリクエストを送信する際に発生します。 * **ソフトナビゲーション** は、ブラウザが新しいページを読み込まない非同期ページロードの速度を測定することを可能にします。 それは、 シングルページアプリケーション (SPA) で非常に一般的です。 ソフトナビゲーションは、各アプリケーションごとに有効にする必要があります。 詳細については、[Web アプリケーションの構成](/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications.md) のドキュメントを参照してください。
## ハードナビゲーションとソフトナビゲーションの違い ドキュメントがロードされると、ハードナビゲーションイベントが技術レベルでトリガーされます。 この動作はブラウザの開発者ツールの**ネットワーク**タブで確認できます。 ウェブリクエストのうちの1つは **ドキュメント** タイプである必要があります。 ソフトナビゲーションは、ドキュメント要求タイプをロードしないすべてのナビゲーションです。
## Nexthinkはどのようにナビゲーションをページロードのメトリクスに変換しますか？ Nexthinkは2種類のナビゲーションイベント、**ハードナビゲーション**と**ソフトナビゲーション**を特定し、それぞれの発生状況に基づいてページロードのメトリクスを計算します。 ### ハードナビゲーション ハードナビゲーションは、通常URLが変わったときに、ブラウザーが新しいドキュメントをロードする際に発生します。 Nexthinkはこれらのナビゲーションのページロード時間を測定し、エンドユーザーにとってページがどれくらいの時間で準備されるかを理解するのに役立ちます。 Nexthinkモニタリング用にWebアプリケーションを構成する際に、**ハードナビゲーション**のページロード時間の計算方法を選択できるようになりました。 選択された方法は、Nexthinkがナビゲーションを完了と見なす時点を定義します。 Nexthinkは現在、2つの計算方法をサポートしています： * **ブラウザータイミングAPI**—システムのデフォルト。 * **ページコンプレションタイム**—現在、**テクニカルプレビュー**内で。 ハードナビゲーションの計算方法を変更すると、ページロード時間から導かれるすべてのメトリクスに影響します—例えば、DEXスコア、アラート、ライブダッシュボード、および履歴レポートなど。 {% hint style="warning" %} ハードナビゲーションのページロードに対して、1つの計算方法のみを同時にアクティブ化できます。これは次のことを意味します： * Nexthink は、切り替え後は選択解除された方法を使用してデータを収集しません。 * Nexthinkは同期間について両方の方法を並べて表示しません。 * Nexthinkは、異なる方法で収集された以前のデータを遡って再計算しません。 必要に応じて、Nexthink Extensionを使用することで方法を切り替えることなく**ページ完了時間**を確認できます。[Nexthink Extensionを使用してページ完了時間を表示する](#alternative-using-nexthink-extension-to-view-the-page-completion-time) {% endhint %} #### ブラウザータイミングAPI 次の図は、ページのアンロードからフルロードまでに発生するイベントや属性を示すことによって、**ブラウザータイミングAPI**がページロード時間をどのように測定するかを視覚化しています。 {% hint style="info" %} 以下で示されるタイミング要素の合計は必ずしも全体のページロード時間に等しくない場合があります。他の要因、例えば同時に実行されるOSタスクなど、がページの読み込み時間に影響することがあります。 {% endhint %}
**バックエンド時間** は、クライアントが要求を送り始めた時 (`requestStart`) から応答を受け取り始めた時 (`responseStart`) までの時間です。 **ネットワーク時間** は次の時間の合計です: * `redirectStart` と `redirectEnd` * `domainLookupStart` と `connectEnd` * `responseStart` と `responseEnd` **クライアント時間** は `unloadEventEnd` と `loadEventEnd` の間の時間からバックエンドとネットワーク時間を引いたものです。
リソースタイミングイベントの概要 **アンロードイベント**\ ユーザーがページからナビゲートしたり、ページが再読み込みされたときにトリガーされます。 **リダイレクト**\ HTTP リダイレクトを追従するのに要する時間 **DNS**\ ドメイン名を解決するのに要する時間 **TCP**\ ブラウザとウェブサーバー間でのソケット接続を確立するのに要する時間 **SSL**\ ブラウザとウェブサーバー間でのセキュアソケット接続を確立するのに要する時間 **リクエスト**\ ドキュメント応答の最初のバイトを待つのに要する時間 **応答**\ ドキュメント応答のダウンロードに要する時間 **処理**\ ブラウザがDOMを処理して構築するのに要する時間 **ロード**\ DOMをロードするのに要する時間、DOM処理を含む **転送されたバイト数**\ HTTP応答サイズ
DOM イベントと属性の概要 ページが完全にロードされる前にはさまざまなオンロードイベントがトリガーされます。 ブラウザはオンロードイベントを発火し、ページ上で追加の機能やロジックをトリガーできます。 そうしたイベントはページロード時間を計算する過程でも使用されます: `domLoading` 属性はプロセス全体の開始時刻を示します。 `domInteractive` イベントは、ブラウザがHTMLの解析を完了し、DOM を構築したときにトリガーされます。 `domContentLoadedEventStart` と `domContentLoadedEventEnd` イベントは、レンダーツリー作成の開始と終了時刻を示します。 プロセスはCSSオブジェクトモデルが準備されたときに開始します。 `domComplete` イベントは、処理が完了し、すべてのリソースが準備されているときにトリガーされます。
#### ページの完了時間 {% hint style="warning" %} この技術プレビューは、評価およびフィードバックのためにお客様に無料で提供されています。本番環境で提供される際には、追加のコストやライセンスが必要になる場合があります。\ そのため、技術プレビュー、ドキュメント、およびその更新は、限定された評価のためにだけ「現状のまま」または「利用可能な状態」で提供され、いかなる種類の保証もありません。 {% endhint %} **ページの完了時間** メソッドは、ブラウザの読み込みイベントを超えて計測を拡張します。 これは、ページが視覚的に完了したりユーザーの視点から利用可能になる時に影響を与える追加の活動をキャプチャします。 例には以下が含まれます: * 非同期データフェッチ * DOMの更新 * クライアント側のレンダリングと処理 **ページの完了時間** メソッドは**ブラウザタイミングAPI**よりも多くのアクティビティを考慮するため、報告されるページの読み込み時間はデフォルトの方法よりも長くなる場合があります。 したがって、手動測定やユーザーの認識により、デフォルトの計算方法を使用して Nexthink が報告する値よりもハードナビゲーションの読み込み時間が長いと示唆される組織にとって、**ページ完了時間**は有用です。 Webアプリケーションの設定で**ページの完了時間** メソッドに切り替えても、高いページ読み込み時間は改善されません。 {% hint style="warning" %} ナビゲーション計算方法を変更すると、ロード時間に基づくすべての指標—DEX スコア、アラート、ライブダッシュボード、履歴レポート—に影響を与えます。 ハードナビゲーションのページロードに対して、同時に一つの計算方法のみを有効化できます。つまり： * Nexthink は、切り替え後は選択解除された方法を使用してデータを収集しません。 * Nexthinkは、同じ期間に2つの方法を並べて表示しません。 * Nexthinkは、異なる方法を使って過去に収集されたデータを遡及的に再計算しません。 {% endhint %}
代替案: Nexthink拡張機能を使用してページの完了時間を閲覧する。 Nexthink Extension では、Web アプリケーション設定で **ハードナビゲーション** の方法を切り替えることなく、**ページ完了時間**を表示できます。 1. 興味のあるページ内で、ブラウザからNexthink拡張機能を開きます。 2. **Powered by Nexthink** バッジを5回クリックして、**Nexthink拡張機能**ポップアップを開きます。 3. **ソフトナビゲーション** の下では、**ページ読み込み時間**の値が **ページ完了時間** と同等であることを確認できます。
*** ### ソフトナビゲーション ソフトナビゲーションは、次の一連の識別できるイベント (いくつかはオプションです) で構成されます: 1. ユーザーの操作および/またはハードナビゲーションがソフトナビゲーションを引き起こします。 2. ページのレンダリングの変更。 3. バックエンドからの新しいリソースのリクエスト。 4. バックエンドの応答を待機。 5. バックエンドからのリソースの受信。 6. 新しいリソースに基づいてクライアントサイドで処理を行います。 上記の情報は、タイムラインでバックエンド、ネットワーク、およびクライアントに適用されます。 * **クライアント**時間は **1.** & **2.** & **6.** の和として定義されます。 * **ネットワーク**時間は **3.** & **5.** の和です。 * **バックエンド**時間は **4.** です。 #### **ソフトナビゲーションの完了** ソフトナビゲーションは、次の場合に完了したと見なされます: * バックエンドサービスへのバックグラウンドリクエストなど、関連するネットワークアクティビティが存在しない場合。 * 短い安定化期間中に、関連するクライアント側のレンダリングや DOM の変更が発生しない場合。 ユーザーの操作によって追加のネットワークリクエストやクライアント側レンダリングの変更が発生し、アプリケーションが安定した状態に到達するまで完了が遅れることがあります。 {% hint style="info" %} ソフトナビゲーションの**ページ完了時間**メトリックは、[Nexthink 拡張機能を使用することにより確認できます。](#alternative-using-nexthink-extension-to-view-the-page-completion-time) {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.nexthink.com/platform/ja/user-guide/applications/monitoring-applications/monitoring-web-applications/performance/page-loads/understanding-the-page-loads-metric.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.