ページ読み込みメトリックの理解

平均ページロード時間は、Navigation Timing Level 2 仕様の onload イベントを使用して http://w3.org サイトで測定されます。 詳細については、以下の ナビゲーションタイミングAPI セクションを参照してください。

ナビゲーションイベントとは何ですか？

ナビゲーションイベントとは、URL の変更時にブラウザが新しいエントリで履歴を更新するためにトリガーされるウェブページの変更です。 ブラウザの履歴は、ユーザーが以前に訪れたページに戻ることを可能にする訪れたアドレスのリストです。

ダッシュボードには、2種類のナビゲーションの値が標準で報告されます:

• ハードナビゲーション は、ブラウザが全く新しいページを読み込むようにリクエストを送信する際に発生します。

• ソフトナビゲーション は、ブラウザが新しいページを読み込まない非同期ページロードの速度を測定することを可能にします。 それは、 シングルページアプリケーション (SPA) で非常に一般的です。 ソフトナビゲーションは、各アプリケーションごとに有効にする必要があります。 詳細については、Web アプリケーションの構成 のドキュメントを参照してください。

ハードナビゲーションとソフトナビゲーションの違い

ドキュメントがロードされると、ハードナビゲーションイベントが技術レベルでトリガーされます。 この動作はブラウザの開発者ツールのネットワークタブで確認できます。 ウェブリクエストのうちの1つは ドキュメント タイプである必要があります。 ソフトナビゲーションは、ドキュメント要求タイプをロードしないすべてのナビゲーションです。

Nexthinkはどのようにナビゲーションをページロードのメトリクスに変換しますか？

Nexthinkは2種類のナビゲーションイベント、ハードナビゲーションとソフトナビゲーションを特定し、それぞれの発生状況に基づいてページロードのメトリクスを計算します。

ハードナビゲーション

ハードナビゲーションは、通常URLが変わったときに、ブラウザーが新しいドキュメントをロードする際に発生します。 Nexthinkはこれらのナビゲーションのページロード時間を測定し、エンドユーザーにとってページがどれくらいの時間で準備されるかを理解するのに役立ちます。

Nexthinkモニタリング用にWebアプリケーションを構成する際に、ハードナビゲーションのページロード時間の計算方法を選択できるようになりました。 選択された方法は、Nexthinkがナビゲーションを完了と見なす時点を定義します。

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

• ブラウザータイミングAPI—システムのデフォルト。

• ページコンプレションタイム—現在、テクニカルプレビュー内で。

ハードナビゲーションの計算方法を変更すると、ページロード時間から導かれるすべてのメトリクスに影響します—例えば、DEXスコア、アラート、ライブダッシュボード、および履歴レポートなど。

ハードナビゲーションのページロードに対して、1つの計算方法のみを同時にアクティブ化できます。これは次のことを意味します：

• 選択されていない方法に切り替えた後、Nexthinkはそれを使用したデータを収集しません。

• Nexthinkは同期間について両方の方法を並べて表示しません。

• Nexthinkは、異なる方法で収集された以前のデータを遡って再計算しません。

必要に応じて、Nexthink Extensionを使用することで方法を切り替えることなくページ完了時間を確認できます。Nexthink Extensionを使用してページ完了時間を表示する

ブラウザータイミングAPI

次の図は、ページのアンロードからフルロードまでに発生するイベントや属性を示すことによって、ブラウザータイミングAPIがページロード時間をどのように測定するかを視覚化しています。

以下で示されるタイミング要素の合計は必ずしも全体のページロード時間に等しくない場合があります。他の要因、例えば同時に実行されるOSタスクなど、がページの読み込み時間に影響することがあります。

バックエンド時間 は、クライアントが要求を送り始めた時 (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 イベントは、処理が完了し、すべてのリソースが準備されているときにトリガーされます。

ページの完了時間

この技術プレビューは、評価およびフィードバックのためにお客様に無料で提供されています。本番環境で提供される際には、追加のコストやライセンスが必要になる場合があります。 そのため、技術プレビュー、ドキュメント、およびその更新は、限定された評価のためにだけ「現状のまま」または「利用可能な状態」で提供され、いかなる種類の保証もありません。

ページの完了時間 メソッドは、ブラウザの読み込みイベントを超えて計測を拡張します。 これは、ページが視覚的に完了したりユーザーの視点から利用可能になる時に影響を与える追加の活動をキャプチャします。 例には以下が含まれます:

• 非同期データフェッチ

• DOMの更新

• クライアント側のレンダリングと処理

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

したがって、手動の測定またはユーザーの評価がNexthinkによって報告されるハードナビゲーションのロード時間がデフォルトの計算方法よりも長いと示す組織にとって、ページの完了時間は有益です。

Webアプリケーションの設定でページの完了時間 メソッドに切り替えても、高いページ読み込み時間は改善されません。

ナビゲーション計算方法を変更すると、ロード時間に基づくすべての指標—DEX スコア、アラート、ライブダッシュボード、履歴レポート—に影響を与えます。

ハードナビゲーションのページロードに対して、同時に一つの計算方法のみを有効化できます。つまり：

• 切り替えた後、Nexthinkは選択されていない方法でデータを収集しません。

• Nexthinkは、同じ期間に2つの方法を並べて表示しません。

• Nexthinkは、異なる方法を使って過去に収集されたデータを遡及的に再計算しません。

代替案: Nexthink拡張機能を使用してページの完了時間を閲覧する。

Nexthink拡張機能から、Webアプリケーション設定でハードナビゲーションメソッドを切り替えずにページの完了時間を確認できます。

1. 興味のあるページ内で、ブラウザからNexthink拡張機能を開きます。

2. Powered by Nexthink バッジを5回クリックして、Nexthink拡張機能ポップアップを開きます。

3. ソフトナビゲーションの下に、ページの完了時間に相当するページ読み込み時間の値を確認します。

---

ソフトナビゲーション

ソフトナビゲーションは、次の一連の識別できるイベント (いくつかはオプションです) で構成されます:

1. ユーザーの操作またはソフトナビゲーションをトリガーするハードナビゲーション

2. ページのレンダリングの変更

3. バックエンドからの新しいリソースの要求

4. バックエンドが応答するまでの待機時間

5. バックエンドからのリソースを受け取る

6. 新しいリソースに基づいてクライアント側での処理

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

• クライアント時間は 1. & 2. & 6. の和として定義されます。

• ネットワーク時間は 3. & 5. の和です。

• バックエンド時間は 4. です。