> For the complete documentation index, see [llms.txt](https://docs.nexthink.com/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nexthink.com/platform/ja/user-guide/applications/monitoring-applications/monitoring-web-applications/performance/page-loads/understanding-the-page-loads-metric.md).

# Page loadsメトリックについて

平均ページ読み込み時間は、[http://w3.org](http://w3.org/) Web サイトの Navigation Timing Level 2 仕様で定義されている *onload* イベントを使用して測定されます。詳細については、以下の [Navigation timing API](#navigation-timing-api) セクションを参照してください。

## ナビゲーションイベントとは何ですか？ <a href="#what-is-considered-a-navigation-event" id="what-is-considered-a-navigation-event"></a>

ナビゲーションイベントとは、URL が変更され、ブラウザが履歴に新しいエントリを追加したときに Web ページ上でトリガーされる変更です。ブラウザ履歴は、ユーザーが以前にアクセスしたページに戻ることを可能にする、アクセス済みアドレスの一覧です。

ダッシュボードでは、標準で次の2種類のナビゲーションの値をレポートします：

* **ハードナビゲーション**は、ブラウザが完全に新しいページを読み込むリクエストを送信するときに発生します。
* **ソフトナビゲーション**では、ブラウザが新しいページを読み込まない場合の非同期ページ読み込みの速度を測定できます。これはシングルページアプリケーション（SPA）で非常に一般的です。ソフトナビゲーションは、アプリケーションごとに有効にする必要があります。詳細については、[Web アプリケーションの構成](/platform/ja/user-guide/applications/setting-up-and-managing-applications/configuring-applications/configuring-web-applications.md)ドキュメンテーションを参照してください。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-3dff7d2dfbbda8db873e24fba9786af4cc3d6444%2Fnxinv-1636451460.png?alt=media" alt=""><figcaption></figcaption></figure>

## ハードナビゲーションとソフトナビゲーションの違い <a href="#the-difference-between-hard-and-soft-navigations" id="the-difference-between-hard-and-soft-navigations"></a>

ハードナビゲーションイベントは、ドキュメントが読み込まれたときに技術的なレベルでトリガーされます。この動作は、ブラウザの開発者ツールの **Network** タブで確認できます。 Web リクエストのいずれかが **document** タイプである必要があります。ソフトナビゲーションは、ブラウザが document リクエストタイプを読み込まないその他すべてのナビゲーションです。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-9ad345cb2254c56448ed7ca3eaa7d2485b0f3788%2Fappexp-1633934815.png?alt=media" alt=""><figcaption></figcaption></figure>

## Nexthink はナビゲーションをどのようにページ読み込みメトリクスに変換しますか？ <a href="#how-nexthink-translates-navigations-into-page-loads-metrics" id="how-nexthink-translates-navigations-into-page-loads-metrics"></a>

Nexthink は、**ハードナビゲーション**と**ソフトナビゲーション**という2種類のナビゲーションイベントを識別し、それぞれの発生方法に基づいてページ読み込みメトリクスを算出します。

### ハードナビゲーション <a href="#hard-navigations" id="hard-navigations"></a>

ハードナビゲーションは、通常 URL が変更されたときに、ブラウザが新しいドキュメントを読み込む際に発生します。 Nexthink はこれらのナビゲーションのページ読み込み時間を測定し、ページがエンドユーザーにとって使用可能になるまでにかかる時間を把握できるようにします。

Nexthink 監視用に Web アプリケーションを構成する際、**ハードナビゲーション**のページ読み込み時間を Nexthink がどのように算出するかを選択できるようになりました。選択した方法によって、Nexthink がナビゲーションの完了と見なす時点が定義されます。

Nexthink は現在、次の2つの算出方法をサポートしています：

* **ブラウザタイミング API** — システムデフォルト。
* **ページ完了時間** — 現在、**テクニカルプレビュー**として提供中。

ハードナビゲーションの算出方法を変更すると、DEX スコア、アラート、ライブダッシュボード、履歴レポートなど、ページ読み込み時間から派生するすべてのメトリクスに影響します。

{% hint style="warning" %}
ハードナビゲーションのページ読み込みでは、一度に有効化できる算出方法は1つだけです。つまり：

* 切り替え後、Nexthink は選択解除された方法を使用してデータを収集しません。
* Nexthink は、同じ期間について両方の方法を並べて表示しません。
* Nexthink は、以前に収集されたデータを別の方法で遡って再計算しません。

必要に応じて、方法を切り替えずに [Nexthink Extension を使用して](#alternative-using-nexthink-extension-to-view-the-page-completion-time)、**ページ完了時間**を確認できます。
{% endhint %}

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-de798339a56f5934d02fde20fb0672d790c81b7f%2Fimage%20(1118).png?alt=media" alt=""><figcaption></figcaption></figure>

#### ブラウザタイミング API

次の図は、ページのアンロードから完全な読み込みまでに発生するイベントと属性を示し、**ブラウザタイミング API** がページ読み込み時間をどのように測定するかを可視化しています。

{% hint style="info" %}
以下に示すタイミング要素の合計は、同時に実行される OS タスクなどの他の要因がページの読み込み時間に影響する可能性があるため、必ずしも合計ページ読み込み時間と等しくなりません。
{% endhint %}

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-acc0e75119f0d760fce4e24e54e926d5d4117c93%2Fappexp_1633595898.png?alt=media" alt=""><figcaption></figcaption></figure>

**バックエンド時間**は、クライアントがリクエストの送信を開始する `requestStart` から、クライアントがレスポンスの受信を開始する `responseStart` までの時間です。

**ネットワーク時間**は、次の時間の合計です：

* `redirectStart` と `redirectEnd`。
* `domainLookupStart` と `connectEnd`
* `responseStart` と `responseEnd`

**クライアント時間**は、`unloadEventEnd` から `loadEventEnd` までの時間からバックエンド時間とネットワーク時間を差し引いた時間です。

<details>

<summary>リソースタイミングイベント</summary>

**アンロードイベント**\
アンロードイベントは、ユーザーがページを離れるとき、またはページが再読み込みされるときにトリガーされます。

**リダイレクト**\
HTTP リダイレクトに従うまでにかかる時間

**DNS**\
ドメイン名の解決にかかる時間

**TCP**\
ブラウザと Web サーバー間のソケット接続の確立にかかる時間

**SSL**\
ブラウザと Web サーバー間のセキュアなソケット接続の確立にかかる時間

**リクエスト**\
ドキュメントレスポンスの最初のバイトを待機する時間

**レスポンス**\
ドキュメントレスポンスのダウンロードにかかる時間

**処理**\
ブラウザが DOM を処理して構築するのにかかる時間

**読み込み**\
DOM の処理を含む、DOM の読み込みにかかる時間

**転送されたバイト数**\
HTTP レスポンスサイズ

</details>

<details>

<summary>DOM イベントと属性</summary>

ページが完全に読み込まれる前にトリガーされるさまざまな onload イベントがあります。ブラウザは onload イベントを発火し、ページ上で追加の関数やロジックをトリガーできます。このようなイベントは、ページ読み込み時間の算出プロセスでも使用されます：

`domLoading` 属性は、プロセス全体の開始時刻を示します。

ブラウザがHTMLの解析を完了し、DOMを構築すると、`domInteractive` イベントがトリガーされます。

`domContentLoadedEventStart` イベントと `domContentLoadedEventEnd` イベントは、レンダーツリー作成の開始時刻と終了時刻を示します。このプロセスは、CSS オブジェクトモデルの準備が整った時点で開始されます。

処理が完了し、すべてのリソースの準備が整うと、`domComplete` イベントがトリガーされます。

</details>

#### ページ完了時間

{% hint style="warning" %}
このテクニカルプレビューは、お客様による評価およびフィードバックのために無償で提供されています。一般提供時には、プレビューの機能に追加料金および／またはライセンスが必要となる場合があります。\
したがって、このテクニカルプレビュー、ドキュメント、および更新は、限定的な評価目的でのみ、「現状有姿」かつ「提供可能な範囲」で提供され、いかなる種類の保証もありません。
{% endhint %}

**ページ完了時間**方式では、ブラウザの読み込みイベントを超えて測定範囲を拡張します。ユーザーの観点でページが視覚的に完成した、または使用可能になった時点に影響する追加のアクティビティを取得します。例：

* 非同期データ取得
* DOM の更新
* クライアント側のレンダリングと処理

**ページ完了時間**方式は**ブラウザタイミング API**よりも多くのアクティビティを考慮するため、レポートされるページ読み込み時間はデフォルト方式よりも長くなる場合があります。

したがって、手動測定またはユーザーの認識により、ハードナビゲーションの読み込み時間がデフォルトの算出方法を使用して Nexthink がレポートする値より長いと示唆される組織にとって、**ページ完了時間**は有用です。

Web アプリケーション構成で**ページ完了時間**方式に切り替えても、長いページ読み込み時間は改善されません。

{% hint style="warning" %}
ハードナビゲーションの算出方法を変更すると、DEX スコア、アラート、ライブダッシュボード、履歴レポートなど、ページ読み込み時間から派生するすべてのメトリクスに影響します。

ハードナビゲーションのページ読み込みでは、一度に有効化できる算出方法は1つだけです。つまり：

* 切り替え後、Nexthink は選択解除された方法を使用してデータを収集しません。
* Nexthink は、同じ期間について両方の方法を並べて表示しません。
* Nexthink は、以前に収集されたデータを別の方法で遡って再計算しません。
  {% endhint %}

<details>

<summary>代替方法：Nexthink Extension を使用して <strong>ページ完了時間</strong>を表示する</summary>

Nexthink Extension では、Web アプリケーション構成の**ハードナビゲーション**方式を切り替えずに、**ページ完了時間**を確認できます。

1. 対象のページで、ブラウザから Nexthink Extension を開きます。
2. **Powered by Nexthink** バッジを5回クリックして、**Nexthink extension** ポップアップを開きます。
3. **Soft Navigation** の下にある、**ページ完了時間**と同等の **Page load time** 値を確認します。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-eec1419f38ecebcffcd1a679fa77d7aff3e9b2a9%2Fimage%20(1116).png?alt=media" alt=""><figcaption></figcaption></figure>

</details>

***

### ソフトナビゲーション <a href="#soft-navigations" id="soft-navigations"></a>

ソフトナビゲーションは、次の個別イベントのシーケンスで構成されます（一部は任意です）：

1. ユーザーの操作および／またはハードナビゲーションにより、ソフトナビゲーションがトリガーされます。
2. ページのレンダリングの変更。
3. バックエンドからの新しいリソースのリクエスト。
4. バックエンドからの応答の待機時間。
5. バックエンドからのリソースの受信。
6. 新しいリソースに基づくクライアント側での処理。

上記の情報は、タイムライン上で次のようにバックエンド、ネットワーク、クライアントに適用されます：

* **クライアント**時間は、**1.**、**2.**、**6.** の合計として定義されます
* **ネットワーク**時間は、**3.** と **5.** の合計です
* **バックエンド**時間は **4.** です

#### **ソフトナビゲーションの完了**

ソフトナビゲーションは、次の場合に完了と見なされます：

* バックエンドサービスへのバックグラウンドリクエストなど、関連するネットワークアクティビティがない。
* 短い安定化期間中に、関連するクライアント側のレンダリングや DOM の変更がない。

ユーザー操作によって追加のネットワークリクエストやクライアント側のレンダリング変更がトリガーされる場合があり、アプリケーションが安定した状態に達するまで完了が遅延することがあります。

{% hint style="info" %}
ソフトナビゲーションの**ページ完了時間**メトリクスは、[Nexthink Extension を使用して](#alternative-using-nexthink-extension-to-view-the-page-completion-time)確認できます。
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
