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

平均ページロード時間は、http://w3.org ウェブサイトのナビゲーションタイミングレベル2仕様で定義された onload イベントを使用して測定されます。 詳細については、以下のナビゲーションタイミング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. です。