ページロードの指標を理解する

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

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

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

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

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

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

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

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

Nexthink がナビゲーションをページロードメトリクスに翻訳する方法

ハードナビゲーション

従業員の数は、最低1回のページロード操作を実行したものを表します。 これは、ユーザーが上の平均ページロード時間ウィジェットと視覚的相関を簡単に描けるように、そのタイムラインにマッピングされます。 この数は、集中時間に基づく概要 ダッシュボードの数とは異なる場合があります。 ブラウザタブに集中していても、ナビゲーションイベントをトリガーするようなアクションを実行しない場合があります。 たとえば、テキストを読んだりスクロールしたりすることは通常、ナビゲーションをトリガーしません。

タイムラインでは、データは以下のカテゴリに応じて内訳されています:

• バックエンドは、バックエンドでの推定応答時間です。 その精度はアプリケーションのパフォーマンスに依存します。

• ネットワークは、ポテンシャルなリダイレクト、DNS ルックアップ、TCP 接続、および応答時間に要する時間に対応するネットワーク応答時間値です。

• クライアントとは、クライアント応答時間値を指し、バックエンドとネットワーク時間の和を引いた全ページロード時間に等しい: クライアント時間 = 全ページロード時間 - (バックエンド時間 + ネットワーク時間)。

データの内訳はバックエンド、ネットワーク、クライアントごとに分類され、さらに調査するパネルでスローページロードの検索をフォローアップできます。

ナビゲーションタイミングAPI

ページロード時間がどのように測定され、計算されるかを完全に理解するために、ナビゲーションタイミングAPIを見て、古いページがアンロードされ新しいページがロードされるまでのイベントと属性を分解していきます。 イベントとプロセスに関与する属性の定義については、次のイラストと定義を参照してください。

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

上記のタイミング要素の合計は常に総ページ負荷時間と一致するとは限りませんが、OSの同時実行タスク等の他の要因がページのロード時間に影響を与える可能性があるためです。

ソフトナビゲーション

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

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

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

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

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

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

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

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

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

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

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