Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

リソース読み込み時間の測定

サイトのネットワーク パフォーマンスを測定するには、[Network] パネルを使用します。

[Network] パネルでは、タイミングの詳細データ、HTTP リクエストとレスポンスのヘッダー、Cookie など、ページでの各ネットワーク操作についての情報が記録されます。

TL;DR

  • [Network] パネルを使って、ネットワーク アクティビティを記録、分析します。
  • リソースの読み込み情報を集約した状態で、またはリソースごとに個別に表示します。
  • フィルタをかけ、並べ替えてリソースの表示方法を変えます。
  • ネットワークの記録を保存、コピー、クリアします。
  • ニーズに合わせて [Network] パネルをカスタマイズします。

[Network] パネルの概要

[Network] パネルは以下の 5 つのペインで構成されます。

  1. Controls。 これらのオプションを使って、[Network] パネルの外観と機能を管理します。
  2. Filters。 これらのオプションを使って、[Requests Table] にどのリソースを表示するか管理します。 使い方: 複数のフィルタを同時に選択するには、Cmd(Mac)または Ctrl (Window/Linux)を押しながらフィルタをクリックします。
  3. Overview。 このグラフは、リソースが取得された時点のタイムラインを示します。 複数のバーが縦に積み重なっている場合、それらのリソースが同時に取得されたことを表します。
  4. Requests Table。 この表には、取得されたリソースがすべて一覧されます。 デフォルトでは、この表は時系列に並べ替えられ、先頭が最初に取得されたリソースになります。 リソースの名前をクリックすると、詳細情報が表示されます。 使い方: 表の見出しのいずれか([Timeline] 以外)を右クリックすると、情報の列を追加または削除できます。
  5. Summary。 このペインでは、リクエストの総数、データ転送量、読み込み時間がひと目でわかります。

[network] パネルのペイン

[Requests Table] には、以下の列がデフォルトで表示されます。 列の追加と削除が可能です。

  • Name。 リソースの名前。
  • Status。 HTTP ステータス コード。
  • Type。 リクエストされたリソースの MIME タイプ。
  • Initiator。 リクエストを開始したオブジェクトまたはプロセス。 以下の値のいずれかになります。
  • Parser。 リクエストを開始したのは Chrome の HTML パーサー。
  • Redirect。 リクエストを開始した HTTP リダイレクト。
  • Script。 リクエストを開始したのはスクリプト。
  • Other。 リクエストを開始したのは上記以外のプロセスまたは操作。ユーザーがリンクを使ってページを移動した場合や、アドレスバーに URL を入力した場合などです。
  • Size。 サーバーから配信されたときのレスポンス ヘッダーとレスポンス本文の合計サイズ(通常は、数百バイト)。
  • Time。 リクエスト開始からレスポンスの最終バイトを受け取るまでにかかった合計時間。
  • Timeline。 [Timeline] 列には、すべてのネットワーク リクエストの流れが目に見える形で表示されます。 この列見出しをクリックすると、追加の並べ替えフィールドのメニューが表示されます。

ネットワーク アクティビティの記録

[Network] パネルが開くと、デフォルトでは、DevTools によってすべてのネットワーク アクティビティが記録されます。 記録するには、パネルが開いているときにページを再読み込みするか、現在読み込んでいるページでネットワーク アクティビティを待機します。

記録 ボタンを見れば、DevTools によって記録が行われているかどうかを判断できます。 ボタンが赤の場合(記録ボタン オン {:.inline})、DevTools は記録中です。 ボタンが灰色の場合(記録ボタン オフ)、DevTools は記録を行っていません。 記録を開始または終了するには、このボタンをクリックするか、キーボード ショートカット Cmd/Ctrl+e を押します。

記録中のスクリーンショットの取得

[Network] パネルでは、ページ読み込み中にスクリーンショットを取得できます。 この機能を Filmstrip と呼びます。

Filmstrip を有効にするには、カメラアイコンをクリックします。 アイコンが灰色の場合、Filmstrip は無効になっています(Filmstrip
無効 {:.inline})。 アイコンが青の場合、Filmstrip は有効になっています(Filmstrip 有効)。

スクリーンショットを取得するには、ページを再読み込みします。 スクリーンショットは Overview ペインに表示されます。

Filmstrip を使用した記録

スクリーンショットにカーソルを合わせると、フレームが取得された時点を示す黄色の縦線が [Timeline] に表示されます。

[Timeline] 上の Filmstrip のオーバーレイ

スクリーンショットをダブルクリックすると、スクリーンショットが拡大表示されます。 スクリーンショットの拡大表示中は、キーボードの左矢印キーと右矢印キーを使用してスクリーンショット間を移動します。

Filmstrip の拡大されたスクリーンショット

DOMContentLoaded イベントと load イベントの情報の表示

[Network] パネルには 2 つのイベントがハイライト表示されます。 DOMContentLoaded およびloadです。

DOMContentLoaded は、ページの最初のマークアップが解析されたときに発生します。 このイベントは、[Network] パネルの以下の 2 か所に表示されます。

  1. [Overview] ペインの青い縦線がこのイベントを表します。
  2. [Summary] ペインにこのイベントの正確な時間が表示されます。

[Network] パネルの DOMContentLoaded イベント

load は、ページが完全に読み込まれたときに発生します。 このイベントは、以下の 3 か所に表示されます。

  1. [Overview] ペインの赤い縦線がこのイベントを表します。
  2. [Requests Table] の赤い縦線もこのイベントを表します。
  3. [Summary] ペインにこのイベントの正確な時間が表示されます。

[Network] パネルの load イベント

1 つのリソースの詳細を表示

リソース名([Requests Table][Name] 列にある)をクリックすると、そのリソースに関する詳細情報が表示されます。

利用できるタブは、選択したリソースの種類によって異なりますが、最も一般的なタブは以下の 4 つです。

  • Headers。 リソースに関連付けられた HTTP ヘッダー。
  • Preview。 JSON、イメージ、テキストの各リソースのプレビュー。
  • Response。 HTTP レスポンス データ(存在する場合)。
  • Timing。 リソースのリクエスト ライフサイクルの詳細。

1 つのリソースの詳細表示

ネットワークのタイミングの表示

[Timing] タブをクリックすると、1 つのリソースのリクエスト ライフサイクルが詳しく表示されます。

ライフサイクルは、以下のカテゴリにかかった時間を示します。

  • キューイング
  • ストール
  • (該当する場合):DNS 参照、初期接続、SSL ハンドシェイク
  • リクエスト送信
  • 待機(最初のバイトを受け取るまでの時間(TTFB))
  • コンテンツのダウンロード

[Timing] タブ

[Timeline] グラフ内のリソースにマウスカーソルを合わせても、同じ情報が表示されます。

タイムライン内の 1 つのリソースのタイミング データ

関連ガイド:

HTTP ヘッダーの表示

[Headers] をクリックすると、そのリソースのヘッダーが表示されます。

[Headers] タブには、リソースのリクエスト URL、HTTP メソッド、レスポンスのステータス コードが表示されます。 また、HTTP レスポンスとリクエスト ヘッダーとその値、クエリ文字列パラメータも一覧表示されます。

1 つのリソースの HTTP ヘッダー

各セクションの横にある view source または view parsed リンクをクリックすると、レスポンス ヘッダー、リクエスト ヘッダー、またはクエリ文字列パラメータをソース形式か解析後の形式で表示できます。

ヘッダーのソースの表示

また、クエリ文字列パラメータ セクションの隣にある view URL encoded または view decoded リンクをクリックすると、文字列パラメータを URL にエンコードまたはデコードされた形式で表示できます。

URL エンコードの表示

リソースのプレビュー

[Preview] タブをクリックすると、そのリソースのプレビューが表示されます。 [Preview] タブは、選択したリソースの種類によって、有益な情報を表示する場合もあれば、そうでない場合もあります。

イメージリソースのプレビュー

HTTP レスポンス コンテンツの表示

[Response] タブをクリックすると、リソースの HTTP レスポンスのコンテンツが書式設定なしで表示されます。 [Response] タブは、選択したリソースの種類によって、有益な情報を表示する場合もあれば、そうでない場合もあります。

JSON リソースのレスポンス データ

[Cookies] タブをクリックすると、リソースの HTTP リクエストとレスポンスのヘッダーで送信される Cookie の表が表示されます。 このタブは、Cookie が送信される場合のみ利用できます。

以下に、表内の各列について説明します。

  • Name。 Cookie の名前。
  • Value。 Cookie の値。
  • Domain。 Cookie が所属するドメイン。
  • Path。 Cookie の送信元 URL パス。
  • Expires / Max-Age。 Cookie の expires プロパティまたは max-age プロパティの値。
  • Size。 Cookie のサイズ(バイト単位)。
  • HTTP。 Cookie はブラウザが HTTP リクエストで設定し、JavaScript からはアクセスできないことを示します。
  • Secure。 この属性が存在する場合、セキュリティ保護された接続経由で Cookie を送信する必要があることを示します。

リソースの Cookie

WebSocket フレームの表示

[Frames] タブをクリックすると、WebSocket 接続情報が表示されます。 このタブは、選択したリソースが WebSocket 接続を開始した場合にのみ表示されます。

WebSocket の [Frames] タブ

[Frames] タブの表に含まれる各列について説明します。

  • Data。 メッセージ ペイロード。 メッセージが書式なしテキストの場合、ここに表示されます。 バイナリ オペコードの場合、このフィールドにはオペコードの名前とコードが表示されます。 サポートされるオペコードは以下のとおりです。
  • 継続フレーム
  • バイナリ フレーム
  • 接続クローズ フレーム
  • ping フレーム
  • pong フレーム
  • Length。 メッセージ ペイロードの長さ(バイト単位)。
  • Time。 メッセージが作成された時点のタイムスタンプ。

以下のように、メッセージは種類に応じて色分けされます。

  • 発信テキスト メッセージは薄い緑。
  • 着信テキスト メッセージは白。
  • WebSocket オペコードは薄い黄色。
  • エラーは薄い赤。

現在の実装についての注意事項:

  • 新しいメッセージの到着後に [Frames] 表を更新するには、左側のリソース名をクリックします。
  • [Frames] 表に保持されるのは、最新の 100 件の WebSocket メッセージだけです。

リソースの開始元と依存関係の表示

Shift キーを押しながらリソースにカーソルを合わせると、そのリソースの開始元と依存関係が表示されます。 このセクションでは、ターゲット としてカーソルを合わせているリソースについて説明します。

ターゲットの上にあり、緑に色付けされ最初のリソースがターゲットの開始元です。 ターゲットの上に、緑に色付けされた 2 つ目のリソースがある場合、ターゲットの開始元の開始元です。 ターゲットの下にあり、赤に色付けされたリソースはすべてターゲットに依存します。

以下のスクリーンショットではこのターゲットが dn/ です。 ターゲットの開始元は、rs=AA2Y で始まるスクリプトです。 その開始元(rs=AA2Y)の開始元が google.com です。 最後に、dn.js はターゲット(dn/)に依存します。

リソースの開始元と依存関係の表示

多数のリソースを含むページでは、開始元と依存関係が一部表示されない場合があります。

リクエストの並べ替え

デフォルトでは、[Requests Table] 内のリソースが各リクエストの開始時間で並べ替えられるため、先頭にあるのが最初に開始されたリクエストになります。

列見出しをクリックすると、その見出しのリソース値の順番で表が並べ替えられます。 もう一度同じ見出しをクリックすると、並べ替えの昇順と降順が切り替わります。

[Timeline] 列は他の列とは異なり独自の操作があります。 この列見出しをクリックすると、並べ替えフィールドのメニューが表示されます。

  • Timeline。 各ネットワーク リクエストを開始時間順に並べ替えます。 これはデフォルトの並べ替え順で、[Start Time] オプションで並べ替えるのと同じです。
  • Start Time。 各ネットワーク リクエストを開始時間順に並べ替えます([Timeline] オプションで並べ替えるのと同じです)。
  • Response Time。 各リクエストをレスポンスにかかった時間順に並べ替えます。
  • End Time。 各リクエストを完了時間順に並べ替えます。
  • Duration。 各リクエストを合計時間順に並べ替えます。 このフィルタを選択すると、読み込みに最も時間がかかるリソースを判断できます。
  • Latency。 リクエストを開始してからレスポンスが始まるまでにかかった時間で並べ替えます。 このフィルタを選択すると、最初のバイトを受け取るまでの時間(TTFB)が最も長かったリソースを判断できます。

Timeline の並べ替え項目

リクエストのフィルタ処理

[Network] パネルには、どのリソースを表示するのかフィルタ処理するさまざまな手段が用意されています。 [filters] ボタン ([filters] ボタン {:.inline})をクリックし、[filters] ペインを非表示にしたり表示したりします。

コンテンツの種類ボタンを使用すると、選択した種類のリソースのみが表示されます。

注: 複数のフィルタを同時に有効にするには、Cmd(Mac)または Ctrl(Windows/Linux)を押しながらフィルタをクリックします。

複数のコンテンツの種類を同時に選択してフィルタ

フィルタ のテキスト フィールドはかなり効果的です。 任意の文字列を入力すると、[Network] パネルには、入力された文字列に一致するファイル名を持つリソースだけが表示されます。

リソース名でのフィルタリング

フィルタ のテキスト フィールドでは、larger-than キーワードを使用してファイルサイズを指定するなど、多様なプロパティでリソースを並べ替えることができるようにさまざまなキーワードがサポートされています。

すべてのキーワードについて以下で説明します。

  • domain。 指定したドメインのリソースのみを表示します。 複数のドメインを含めるには、ワイルドカード文字(*)を使用します。 たとえば、*.com はドメイン名が .com で終わるすべてのドメインのリソースを表示します。 DevTools では、見つかったすべてのドメインを含むオートコンプリート ドロップダウン メニューが設定されます。
  • has-response-header。 指定した HTTP レスポンス ヘッダーを含むリソースを表示します。 DevTools では、見つかったすべてのレスポンス ヘッダーを含むオートコンプリート ドロップダウンが設定されます。
  • isis:running を使用して、WebSocket リソースを検索します。
  • larger-than。 指定したサイズ(バイト単位)よりも大きいリソースを表示します。 値 1000 を設定するのと値 1k を設定するのは同じです。
  • method。 指定した HTTP メソッドの種類で取得されたリソースを表示します。 DevTools では、見つかったすべての HTTP メソッドを含むドロップダウンが設定されます。
  • mime-type。 指定した MIME タイプのリソースを表示します。 DevTools では、見つかったすべての MIME タイプを含むドロップダウンが設定されます。
  • mixed-content。 すべての混在コンテンツ リソース(mixed-content:all)または現在表示されている混在コンテンツ リソースのみ(mixed-content:displayed)を表示します。
  • scheme。 保護されていない HTTP (scheme:http)または保護されている HTTPS (scheme:https)を経由して取得されたリソースを表示します。
  • set-cookie-domain。 指定した値と一致する Domain 属性を持つ Set-Cookie ヘッダーを含むリソースを表示します。 DevTools では、見つかったすべての Cookie ドメインを含むオートコンプリート ドロップダウンが設定されます。
  • set-cookie-name。 指定した値と一致する名前を持つ Set-Cookie ヘッダーを含むリソースを表示します。 DevTools では、見つかったすべての Cookie 名を含むオートコンプリート ドロップダウンが設定されます。
  • set-cookie-value。 指定した値と一致する値を持つ Set-Cookie ヘッダーを含むリソースを表示します。 DevTools では、見つかったすべての Cookie 値を含むオートコンプリート ドロップダウンが設定されます。
  • status-code。 指定したコードと一致する HTTP ステータス コードを持つリソースだけを表示します。 DevTools では、見つかったすべてのステータス コードを含むオートコンプリート ドロップダウン メニューが設定されます。

ファイルサイズによるフィルタリング

上記のキーワードのいくつかで、オートコンプリート ドロップダウン メニューに触れています。 オートコンプリート メニューをトリガーするには、キーワードの後にコロンを入力します。 たとえば、以下のスクリーンショットでは「domain:」と入力して、オートコンプリート ドロップダウンをトリガーしています。

テキスト フィールドのオートコンプリートでフィルタ

ネットワーク情報のコピー、保存、クリア

ネットワーク情報をコピー、保存、または削除するには、[Requests Table] 内でその情報を右クリックします。 一部のオプションは状況に依存するため、1 つのリソースを操作する場合、そのリソースの行を右クリックする必要があります。

以下に、それぞれのオプションについて説明します。

  • Copy Response。 選択したリソースの HTTP レスポンスをシステム クリップボードにコピーします。
  • Copy as cURL。 選択したリソースのネットワーク リクエストを cURL コマンド文字列としてシステム クリップボードにコピーします。 リクエストを cURL コマンドとしてコピーするをご覧ください。
  • Copy All as HAR。 すべてのリソースを HAR データとしてシステム クリップボードにコピーします。 HAR ファイルには、ネットワークの「ウォーターフォール」について記述する JSON データ構造が含まれています。 いくつかの サード パーティツール は、HAR ファイル内のデータからネットワーク ウォーターフォールを再構築できます。 詳細については、「Web Performance Power Tool: HTTP Archive (HAR)」をご覧ください。
  • Save as HAR with Content。 すべてのネットワーク データを各ページリソースと共に HAR ファイルに保存します。 イメージなどのバイナリ リソースは、Base64 エンコードのテキストとしてエンコードされます。
  • Clear Browser Cache。 ブラウザ キャッシュをクリアします。 ヒント:Network conditions ドロワーからブラウザ キャッシュを有効または無効にすることもできます。
  • Clear Browser Cookies。 ブラウザの Cookie をクリアします。
  • Open in Sources Panel。 選択したリソースを [Sources] パネルで開きます。
  • Open Link in New Tab。 選択したリソースを新しいタブで開きます。 [Network] の表内のリソース名をダブルクリックすることもできます。
  • Copy Link Address。 リソースの URL をシステム クリップボードにコピーします。
  • Save。 選択したテキスト リソースを保存します。 テキスト リソースのみに表示されます。
  • Replay XHR。 選択した XMLHTTPRequest を再送信します。 XHR リソースのみに表示されます。

コピーと保存のコンテキスト メニュー

1 つまたはすべてのリクエストを cURL コマンドとしてコピー

cURL は、HTTP トランザクションを作成するコマンドライン ツールです。

[Requests Table] 内のリソースを右クリックし、[Copy] にカーソルを合わせて [Copy as cURL] を選択すると、[Network] パネルで検出されたすべてのリソースの cURL リクエスト文字列がコピーされます。

1 つのリクエストを cURL コマンドとしてコピー

[Copy All as cURL] を選択すると、[Network] パネルで検出されたすべてのリソースの cURL リクエスト文字列がコピーされます。

すべてをコピーする場合は、フィルタは無視されます(たとえば、 [Network] パネルでフィルタして CSS リソースのみを表示した状態で [Copy All as cURL] を選択すると、CSS だけではなく検出されたリソースすべてがコピーされます)。

[Network] パネルのカスタマイズ

デフォルトの [Requests Table] には、短いサイズの行でリソースが表示されます。 [Use large resource rows] ボタン(リソースをサイズの大きい行で表示ボタン)をクリックして、各行のサイズを大きくします。

サイズの大きい行を使用すると、列によっては 2 つのテキストフィールド(プライマリ フィールドとセカンダリ フィールド)が表示されるようになります。 その列見出しにはセカンダリ フィールドの意味が示されます。

サイズを増やしたリソース行

表への列の追加と削除

列を追加または削除するには、[Requests Table] の見出しのいずれかを右クリックします。

列を追加または削除する

ナビゲーション時のネットワーク ログの保存

ネットワーク アクティビティの記録は、デフォルトでは、現在のページを再読み込みするか別のページを読み込むたびに破棄されます。 [Preserve log] チェックボックスをオンにすると、このようなシナリオでもネットワークの以前のログが保存されます。 新しいレコードは、[Requests Table] の下に追加されます。

参考資料

アプリケーションのネットワーク パフォーマンスの最適化については、以下の資料で詳細をご覧ください。

フィードバック

Was this page helpful?