Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

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

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

Chrome DevTools の [Network] パネル

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

TL;DR

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

Network パネルの概要

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

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

[Network] パネルのペイン

リクエスト表 には、以下の列がデフォルトで表示されます。 列は追加と削除が可能です。

  • [Name]。リソースの名前。
  • [Status]。HTTP ステータス コード。
  • [Type]。リクエストされたリソースの MIME タイプ。
  • [Initiator]。リクエストを開始したオブジェクトまたはプロセス。以下の値のいずれかになります。

  • [Parser]。リクエストを開始したのは Chrome の HTML パーサー。

  • [Redirect]。リクエストを開始した HTTP リダイレクト。
  • [Script]。リクエストを開始したのはスクリプト。
  • [Other]。リクエストを開始したのは上記以外のプロセスまたは操作。ユーザーがリンクを使ってページを移動した場合や、アドレスバーに URL を入力した場合などです。

  • [Size]。サーバーから配信時のレスポンス ヘッダーとレスポンス本文の合計サイズ(通常は、数百バイト)。

  • [Time]。リクエスト開始からレスポンスの最終バイトを受け取るまでにかかった合計時間。
  • [Timeline]。[Timeline] 列には、すべてのネットワーク リクエストの流れが目に見える形で表示されます。 この列見出しをクリックすると、追加の並べ替えフィールドのメニューが表示されます。

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

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

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

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

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

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

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

Filmstrip を使用した記録

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

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

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

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

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

[Network] パネルでは、2 つのイベント DOMContentLoadedload がハイライト表示されます。

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

  1. 概要 ペインの青い縦線がこのイベントを示しています。
  2. 要約 ペインには、このイベントの正確な発生タイミングが表示されます。

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

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

  1. 概要 ペインの赤い縦線がこのイベントを示しています。
  2. リクエスト表 の赤い縦線もこのイベントを示します。
  3. 要約 ペインには、このイベントの正確な発生タイミングが表示されます。

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

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

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

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

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

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

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

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

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

  • Queuing
  • Stalled
  • 該当する場合:DNS Lookup、Initial connection、SSL handshake
  • Request sent
  • Waiting (最初のバイトを受け取るまでの時間 (TTFB))
  • Content Download

[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]。HTTP リクエストの Cookie はブラウザだけが設定し、JavaScript からはアクセスできないことを示します。
  • [Secure]。この属性が存在する場合、セキュリティ保護された接続経由で Cookie を送信する必要があることを示します。

リソースの Cookie

WebSocket フレームの表示

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

WebSocket の [Frames] タブ

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

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

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

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

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

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

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

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

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

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

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

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

リクエストの並べ替え

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

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

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

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

Timeline の並べ替え項目

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

[Network] パネルには、リソースの表示方法をフィルタ処理するさまざまな手段が用意されています。 フィルタ ボタン(フィルタボタン)をクリックして、フィルタ ペインの表示と非表示を切り替えます。

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

注: 複数のフィルタを同時に有効にするには、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:」と入力して、オートコンプリート ドロップダウンをトリガーしています。

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

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

ネットワーク情報をコピー、保存、または削除するには、リクエスト表内でその情報を右クリックします。 一部のオプションは状況に依存するため、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 トランザクションを作成するコマンドライン ツールです。

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

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

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

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

Network パネルのカスタマイズ

デフォルトの リクエスト表 には、短いサイズの行でリソースが表示されます。行のサイズを増やしてリソース表示するボタン (行のサイズを増やしてリソース表示するボタン) をクリックすると、各行のサイズが増えます。

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

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

表への列の追加と削除

列を追加または削除するには、リクエスト表 の見出しのいずれかを右クリックします。

列を追加または削除する

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

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

参考資料

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