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

平均ページ読み込み時間は、http://w3.org のナビゲーションタイミングレベル2仕様で定義されている onload イベントを使用して測定されます。 詳細な情報については、下記の Navigation timing API セクションを参照してください。

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

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

ダッシュボードは、2種類のナビゲーションについて「箱から出してすぐに」値を報告します:

• ハードナビゲーションは、ブラウザが新しいページをロードするためのリクエストを送信する場合に発生します。

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

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

ハードナビゲーションイベントは、ドキュメントがロードされたときに技術的レベルでトリガーされます。 この動作は、ブラウザ開発者ツールの ネットワーク タブを使用して識別できます。 ウェブリクエストの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イベントと属性

ページが完全に読み込まれる前にトリガーされる様々なonloadイベントがあります。 ブラウザはonloadイベントを発火し、ページ上で追加の機能やロジックを引き起こす可能性があります。 このようなイベントは、ページ読み込み時間を計算するプロセスでも使用されます:

domLoading 属性はプロセス全体の開始時間を提供します。

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

domContentLoadedEventStart と domContentLoadedEventEnd イベントはレンダーツリーの作成の開始と終了を示します。 プロセスはCSSオブジェクトモデルが準備できたときに始まります。

domComplete イベントは処理が完了し、すべてのリソースが準備できた時にトリガーされます。

上記のタイミング要素の合計が常に合計ページ読み込み時間と等しいわけではないことに注意してください。その理由は、同時OSタスクなどの他の要因がページの読み込み時間に影響を与える可能性があるからです。

ソフトナビゲーション

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

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

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

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

4. バックエンドの応答待ち時間

5. バックエンドからのリソース受信

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

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

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

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

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