このページは Cloud Translation API によって翻訳されました。

パフォーマンス機能のリファレンス

Kayce Basques

Sofia Emelianova

このページでは、パフォーマンスの分析に関連する Chrome DevTools の機能について詳しく説明します。

Chrome DevTools を使用してページのパフォーマンスを分析する方法については、ランタイムパフォーマンスを分析するをご覧ください。

パフォーマンスを記録する

実行時間や読み込みのパフォーマンスを記録できます。

ランタイムパフォーマンスを記録する

ランタイムパフォーマンスを記録するのは、ページの読み込みではなく実行中のパフォーマンスを分析する場合です。

分析するページに移動します。
DevTools の [パフォーマンス] タブをクリックします。
録音アイコンをクリックします。
ページを操作します。DevTools は、操作の結果として発生するすべてのページアクティビティを記録します。
もう一度 [録画] をクリックするか、[停止] をクリックして録画を停止します。

負荷のパフォーマンスを記録する

実行ではなく読み込み中のページのパフォーマンスを分析する場合は、読み込みパフォーマンスを記録します。

分析するページに移動します。
DevTools の [パフォーマンス] パネルを開きます。
[プロファイリングを開始してページを再読み込み] をクリックします。DevTools はまず about:blank に移動し、残りのスクリーンショットやトレースを消去します。ページの再読み込み中に DevTools がパフォーマンス指標を記録し、読み込みが完了してから数秒後に記録を自動的に停止します。

ほとんどのアクティビティが発生した部分が自動的にズームインされます。

ページ読み込みの録画。

この例では、[パフォーマンス] パネルにページの読み込み中のアクティビティが表示されています。

録画中にスクリーンショットをキャプチャする

[スクリーンショット] チェックボックスをオンにすると、録画中にすべてのフレームのスクリーンショットをキャプチャできます。

[スクリーンショット] チェックボックス。

スクリーンショットを操作する方法については、スクリーンショットを表示するをご覧ください。

録画中のガベージコレクションを強制する

ページを録画しているときに、[ガベージを収集] をクリックしてガベージコレクションを強制します。

ガベージを収集します。

録画設定を表示

[キャプチャ設定] をクリックすると、DevTools によるパフォーマンスレコーディングのキャプチャ方法に関連するその他の設定が表示されます。

[キャプチャの設定] セクション。

JavaScript のサンプルを無効にする

デフォルトでは、録画の [Main] トラックには、録画中に呼び出された JavaScript 関数の詳細なコールスタックが表示されます。これらの呼び出しスタックを無効にするには:

[キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
[JavaScript のサンプルを無効にする] チェックボックスをオンにします。
ページの録画を作成します。

次のスクリーンショットは、JavaScript サンプルを無効にした場合と有効にした場合の違いを示しています。サンプリングが無効になっている場合、録画のメイン トラックは JavaScript 呼び出しスタックがすべて省略されるため、大幅に短くなります。

JS サンプリングが無効になっている場合の録画の例。

この例は、JS サンプルが無効になっている録画を示しています。

JS サンプリングが有効になっている場合の録画の例。

この例は、JS サンプルが有効になっている録画を示しています。

録画中にネットワークをスロットルする

録画中にネットワークをスロットリングするには:

[キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
[ネットワーク] を選択したスロットリングレベルに設定します。

録画中の CPU の制限

録画中に CPU をスロットリングするには:

[キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
[CPU] を選択したスロットリングレベルに設定します。

スロットリングは、パソコンの能力に応じて行われます。たとえば、[2 倍の遅延] オプションを選択すると、CPU の動作が通常の 2 倍遅くなります。モバイルデバイスのアーキテクチャはデスクトップやノートパソコンのアーキテクチャと大きく異なるため、DevTools ではモバイルデバイスの CPU を完全にシミュレートすることはできません。

CSS セレクタの統計データを有効にする

長時間実行される スタイルの再計算イベント中に CSS ルールセレクタの統計情報を表示するには:

[キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
[CSS セレクタの統計データを有効にする] チェックボックスをオンにします。

詳しくは、スタイルの再計算イベント中の CSS セレクタのパフォーマンスを分析する方法をご覧ください。

高度な描画パフォーマンスの計測を有効にする

ペイント計測の詳細を表示するには:

[キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
[Enable advanced paint instrumentation] チェックボックスをオンにします。

ペイント情報を操作する方法については、レイヤを表示するとペイントプロファイラを表示するをご覧ください。

記録を保存する

録音を保存するには、右クリックして [プロファイルを保存] を選択します。

録音を読み込む

録画を読み込むには、右クリックして [プロファイルを読み込む] を選択します。

前の録音を消去する

録音を行った後、[録音を消去] を押して、[パフォーマンス] パネルからその録音を消去します。

録音を消去します。

パフォーマンスの録画を分析する

ランタイムパフォーマンスを記録または負荷パフォーマンスを記録すると、[パフォーマンス] パネルに、直近のパフォーマンスを分析するための大量のデータが表示されます。

録画内を移動する

パフォーマンスの録画を詳しく調べるには、録画の一部を選択したり、長い炎グラフをスクロールしたり、ズームインとズームアウトを行ったり、パンくずリストを使用してズームレベルを切り替えたりできます。

録音の一部を選択する

[パフォーマンス] パネルのアクションバーと録画の上部に、[タイムラインの概要] セクションが表示されます。このセクションには、[CPU] グラフと [NET] グラフが表示されます。

アクションバーの下にあるタイムラインの概要。

録音の一部を選択するには、タイムラインの概要でクリックして長押しし、左または右にドラッグします。

キーボードを使用して一部を選択するには:

メイン トラックまたはその隣接トラックをフォーカスします。
W、A、S、D キーはそれぞれ、ズームイン、左移動、ズームアウト、右移動に使用します。

トラックパッドを使用して一部を選択するには:

[タイムラインの概要] セクションまたはいずれかのトラック（[メイン] とその隣接トラック）にカーソルを合わせます。
2 本の指で、上にスワイプして縮小、左にスワイプして左に移動、下にスワイプして拡大、右にスワイプして右に移動します。

パンくずリストを作成し、ズームレベルを切り替える

タイムラインの概要では、複数のネストされたパンくずリストを連続して作成し、ズームレベルを上げて、ズームレベル間を自由に移動できます。

パンくずリストを作成して使用する手順は次のとおりです。

[タイムラインの概要] で、録画の一部を選択します。
選択範囲にカーソルを合わせ、[N ms ] ボタンをクリックします。選択した期間が拡大され、[タイムラインの概要] に表示されます。タイムラインの概要の上部に、パンくずリストのチェーンが作成されます。
上記の 2 つの手順を繰り返して、別のネストされたパンくずリストを作成します。選択範囲が 5 ミリ秒を超えている限り、引き続きパンくずリストをネストできます。
選択したズームレベルに移動するには、タイムラインの概要の上部にあるチェーン内の対応するパンくずリストをクリックします。

パンくずリストの子要素を削除するには、親パンくずリストを右クリックして [子パンくずリストを削除] を選択します。

長いフレームチャートをスクロールする

メイン トラックまたはその隣接トラック内の長い炎グラフをスクロールするには、クリックしたまま、目的の項目が表示されるまで任意の方向にドラッグします。

アクティビティを検索する

[Main] トラックのアクティビティと [Network] トラックのリクエストを検索できます。

[パフォーマンス] パネルの下部にある検索ボックスを開くには、次のキーを押します。

macOS: Command+F
Windows、Linux: Ctrl+F

この例では、下部にある検索ボックスに、E で始まるアクティビティを検索する正規表現を入力しています。

クエリに一致するアクティビティを切り替えるには:

[ 前へ] ボタンまたは [ 次へ] ボタンをクリックします。
前を選択するには Shift+Enter キーを押します。次を選択するには Enter キーを押します。

[パフォーマンス] パネルには、検索ボックスで選択したアクティビティの上にツールチップが表示されます。

クエリ設定を変更するには:

[ 大文字と小文字を区別] をクリックして、クエリで大文字と小文字を区別します。
クエリで正規表現を使用するには、[ 正規表現] をクリックします。

検索ボックスを非表示にするには、[キャンセル] をクリックします。

トラックの順序を変更して非表示にする

パフォーマンストレースを整理するには、トラックの順序を変更し、トラック構成モードで関連性のないトラックを非表示にします。

トラックを移動、非表示にする手順は次のとおりです。

構成モードに入るには、トラック名を右クリックして [トラックを構成] を選択します。
トラックを上下に移動するには、上矢印または下矢印をクリックします。[] をクリックして非表示にします。
設定が完了したら、下部にある [トラックの設定を終了] をクリックして、設定モードを終了します。

このワークフローの実際の動作を確認するには、動画をご覧ください。

[パフォーマンス] パネルには、新しいトレースのトラック構成が保存されますが、次の DevTools セッションには保存されません。

メインスレッドのアクティビティを表示する

[Main] トラックを使用すると、ページのメインスレッドで発生したアクティビティを確認できます。

メイントラック。

イベントをクリックすると、[概要] タブにその詳細が表示されます。[パフォーマンス] パネルに、選択したイベントの青い枠が表示されます。

メインスレッドイベントの詳細は、[概要] タブで確認できます。

この例では、[概要] タブに get 関数呼び出しイベントの詳細が表示されています。

フレームグラフを読む

[パフォーマンス] パネルには、メインスレッドのアクティビティが炎グラフで示されます。X 軸は時間の経過に伴う記録を表します。Y 軸はコールスタックを表します。上位のイベントが下位のイベントを引き起こします。

フレームグラフ。

この例では、[Main] トラックにフレームチャートを表示しています。click イベントによって匿名関数呼び出しが発生しました。この関数は、onEndpointClick_ を呼び出し、handleClick_ を呼び出しました。

[パフォーマンス] パネルでは、スクリプトにランダムな色が割り当てられ、炎グラフが分割されて読みやすくなります。上の例では、1 つのスクリプトからの関数呼び出しは水色で表示されています。別のスクリプトからの呼び出しは薄いピンク色で表示されます。濃い黄色はスクリプトアクティビティを表し、紫色のイベントはレンダリングアクティビティを表します。黄色と紫の濃いイベントは、すべての録画で同じです。

長いタスクもハイライト表示されます。赤い三角形で示され、50 ミリ秒を超える部分は赤色で塗りつぶされます。

長時間のタスク。

この例では、タスクに 400 ミリ秒以上かかったため、最後の 350 ミリ秒を表す部分が赤色で塗りつぶされていますが、最初の 50 ミリ秒は塗りつぶされていません。

また、[Main] トラックには、profile() と profileEnd() コンソール関数で開始および停止された CPU プロファイルに関する情報が表示されます。

JavaScript 呼び出しの詳細な炎グラフを非表示にするには、JavaScript のサンプルを無効にするをご覧ください。JS サンプルが無効になっている場合は、Event (click) や Function Call などの上位イベントのみが表示されます。

イベントの開始元をトラッキングする

[Main] トラックには、次の開始条件と、それによって発生したイベントを結ぶ矢印を表示できます。

スタイルまたはレイアウトの無効化 -> [スタイルを再計算] または [レイアウト]
アニメーションフレームのリクエスト -> アニメーションフレームの呼び出し
アイドル状態のコールバックをリクエストする -> アイドル状態のコールバックを実行する
タイマーのインストール -> タイマーの呼び出し
WebSocket の作成 -> [送信...]、[WebSocket handshake の受信]、または [WebSocket の破棄]

矢印を表示するには、炎グラフで開始元またはそれが引き起こしたイベントを見つけて選択します。

リクエストからアイドル状態のコールバックの呼び出しへの矢印。

選択すると、[概要] タブに、開始元の [Initiator for] リンクと、開始元のイベントの [Initiated by] リンクが表示されます。クリックすると、対応するイベント間を移動できます。

[概要] タブの [Initiator for] リンク。

フレームグラフで関数とその子を非表示にする

[Main] スレッドのフレームグラフを整理するには、選択した関数またはその子を非表示にします。

[Main] トラックで関数を右クリックし、次のいずれかのオプションを選択するか、対応するショートカットを押します。
- 関数を非表示にする（H）
- 子を非表示にする（C）
- 繰り返しの子を非表示にする（R）
- 子をリセットする（U）
- トレースをリセット（T）
- 無視リストにスクリプトを追加する（I）
非表示の子を持つ関数名の横に、プルダウンボタンが表示されます。
非表示の子の数を確認するには、プルダウンボタンにカーソルを合わせます。
非表示の子を持つ関数またはフレームグラフ全体をリセットするには、関数を選択して U キーを押すか、任意の関数を右クリックして [トレースのリセット] を選択します。

フレームグラフでスクリプトを無視する

無視リストにスクリプトを追加するには、グラフ内のスクリプトを右クリックし、[無視リストにスクリプトを追加] を選択します。

スクリプトを無視するオプションがフォーカスされているコンテキストメニュー。

無視されたスクリプトはグラフで折りたたまれ、[無視リストに登録済み] としてマークされ、の [設定 > 無視リスト] の [カスタム除外] ルールに追加されます。無視されたスクリプトは、トレースまたはカスタム除外ルールから削除されるまで保存されます。

[設定] の [無視スクリプトリスト] タブ。

アクティビティを表で表示する

ページを記録した後、アクティビティを分析するためにメイントラックにのみ依存する必要はありません。DevTools には、アクティビティを分析するための 3 つの表形式ビューも用意されています。各ビューでは、アクティビティに関する異なる視点が提供されます。

最も多くの処理を発生させるルートアクティビティを表示するには、[呼び出しツリー] タブを使用します。
直接費やした時間が最も長いアクティビティを表示するには、[ボトムアップ] タブを使用します。
録画中に発生したアクティビティを発生順に表示するには、[イベントログ] タブを使用します。

目的の項目をすばやく見つけられるように、3 つのタブの [フィルタ] バーの横に高度なフィルタリング用のボタンがあります。

大文字と小文字を区別する。
正規表現。
完全一致。

高度なフィルタリング用の 3 つのボタン。

[パフォーマンス] パネルの各表形式ビューには、関数呼び出しなどのアクティビティのリンクが表示されます。デバッグに役立つように、DevTools はソースファイル内の対応する関数宣言を見つけます。また、適切なソースマップが存在し、有効になっている場合、DevTools は元のファイルを自動的に検出します。

リンクをクリックして、[ソース] パネルでソースファイルを開きます。

[イベントログ] タブでソースファイルへのリンクを追加します。

ルートアクティビティ

[呼び出しツリー] タブ、[ボトムアップ] タブ、[イベントログ] セクションで説明されているルートアクティビティのコンセプトについて説明します。

ルートアクティビティは、ブラウザがなんらかの処理を行うようにするアクティビティです。たとえば、ページをクリックすると、ブラウザはルートアクティビティとして Event アクティビティを起動します。その Event により、ハンドラが実行される可能性があります。

[Main] トラックのフレームグラフでは、ルートアクティビティがグラフの上部に表示されます。[呼び出しツリー] タブと [イベントログ] タブでは、ルートアクティビティが最上位の項目です。

ルートアクティビティの例については、[呼び出しツリー] タブをご覧ください。

[呼び出しツリー] タブ

[呼び出しツリー] タブを使用して、最も多くの処理を発生させるルートアクティビティを確認します。

[通話ツリー] タブには、選択した録音部分のアクティビティのみが表示されます。部分を選択する方法については、録音の一部を選択するをご覧ください。

[呼び出しツリー] タブ。

この例では、[アクティビティ] 列の最上位の項目（Event、Paint、Composite Layers など）はルートアクティビティです。ネストはコールスタックを表します。この例では、Event が Function Call を引き起こし、Function Call が button.addEventListener を引き起こし、button.addEventListener が b を引き起こしました。

[自己時間] は、そのアクティビティに直接費やされた時間を表します。[合計時間] には、そのアクティビティまたはその子のいずれかで費やされた時間が示されます。

[セルフタイム]、[合計時間]、[アクティビティ] をクリックして、その列で表を並べ替えます。

[フィルタ] ボックスを使用して、アクティビティ名でイベントをフィルタします。

デフォルトでは、[グループ化] メニューは [グループ化なし] に設定されています。[グループ化] メニューを使用して、さまざまな条件に基づいてアクティビティテーブルを並べ替えます。

[最も負荷の高いスタックを表示] をクリックすると、[アクティビティ] テーブルの右側に別のテーブルが表示されます。アクティビティをクリックして [最も負荷の高いスタック] 表にデータを入力します。[最も時間がかかったスタック] 表には、選択したアクティビティのどの子が実行に最も時間がかかったかが表示されます。

[ボトムアップ] タブ

[ボトムアップ] タブを使用すると、直接時間のかかるアクティビティを合計で確認できます。

[ボトムアップ] タブには、選択した録画部分のアクティビティのみが表示されます。部分を選択する方法については、録音の一部を選択するをご覧ください。

[ボトムアップ] タブ。

この例の [Main] トラックの炎グラフでは、ほとんどの時間が wait() への 3 回の呼び出しの実行に費やされていることがわかります。したがって、[ボトムアップ] タブの上位アクティビティは wait です。フレームグラフでは、wait の呼び出しの下の黄色は、実際には数千の Minor GC 呼び出しです。そのため、[Bottom-Up] タブで、次にコストの高いアクティビティが Minor GC であることがわかります。

[自己時間] 列には、そのアクティビティで直接費やされた時間の合計（すべての発生回数にわたる合計）が表示されます。

[合計時間] 列には、そのアクティビティまたはその子アクティビティで費やされた合計時間が示されます。

[イベントログ] タブ

[イベントログ] タブを使用すると、録画中に発生したアクティビティを発生順に表示できます。

[イベントログ] タブには、選択した録音部分のアクティビティのみが表示されます。部分を選択する方法については、録音の一部を選択するをご覧ください。

[イベントログ] タブ。

[開始時間] 列は、そのアクティビティが開始された時点を、録画の開始を基準にして示します。この例で選択した項目の開始時間 1573.0 ms は、録画開始から 1,573 ms 後にアクティビティが開始されたことを意味します。

[自己時間] 列には、そのアクティビティに直接費やされた時間が示されます。

[合計時間] 列には、そのアクティビティまたはその子アクティビティで直接費やした時間が示されます。

[開始時間]、[自己時間]、[合計時間] をクリックして、その列でテーブルを並べ替えます。

[フィルタ] ボックスを使用して、アクティビティを名前でフィルタします。

[Duration] メニューを使用して、1 ms 未満または 15 ms 未満のアクティビティを除外します。デフォルトでは、[Duration] メニューは [All] に設定されています。つまり、すべてのアクティビティが表示されます。

[読み込み]、[スクリプト]、[レンダリング]、[ペイント] のチェックボックスをオフにして、これらのカテゴリからすべてのアクティビティを除外します。

タイミングを表示する

[タイミング] トラックで、次のような重要なマークを確認します。

ファーストペイント（FP）
First Contentful Paint（FCP）
Largest Contentful Paint（LCP）
DOMContentLoaded イベント（DCL）
Onload イベント（L）
カスタム performance.mark() 呼び出し。以下に、813.44 ms の個々のマークと、[JavaScript の実行開始] というラベルが表示されています。
カスタム performance.measure() 呼び出し。下に黄色のスパンが表示され、[操作が遅い] というラベルが付いています。

タイミングトラックのマーカー。

マーカーを選択すると、タイムスタンプ、合計時間、自己時間、detail オブジェクトなどの詳細が [概要] タブに表示されます。performance.mark() 呼び出しと performance.measure() 呼び出しの場合、タブにはスタックトレースも表示されます。

インタラクションを表示する

[インタラクション] トラックでユーザーインタラクションを表示して、応答に関する潜在的な問題を特定します。

インタラクションを表示するには:

DevTools を開きます。たとえば、このデモページで開きます。
[パフォーマンス] パネルを開き、録画を開始します。
要素（コーヒー）をクリックして録画を停止します。
タイムラインで [Interactions] トラックを見つけます。

インタラクショントラック。

この例では、[インタラクション] トラックに [ポインタ] インタラクションが表示されています。インタラクションには、処理時間の境界での入力と表示の遅延を示すウィスカーがあります。インタラクションにカーソルを合わせると、入力遅延、処理時間、表示遅延を示すツールチップが表示されます。

[インタラクション] トラックには、200 ミリ秒を超えるインタラクションの [Interaction to Next Paint（INP）] 警告も、[概要] タブとホバー時のツールチップに表示されます。

INP の警告。

[インタラクション] トラックでは、200 ミリ秒を超えるインタラクションが右上に赤い三角形でマークされます。

レイアウトシフトを表示する

[レイアウトのずれ] トラックでレイアウトのずれを確認します。シフトは紫色のダイヤモンドとして表示され、タイムライン上の近接度に基づいてclusters（紫色の線）にグループ化されます。

レイアウトシフトトラック。

ビューポートでレイアウトシフトが発生した要素をハイライト表示するには、対応するひし形にカーソルを合わせます。

レイアウトシフトの詳細（タイミング、スコア、要素、考えられる原因）を確認するには、[概要] タブで対応するダイヤモンドまたはクラスタをクリックします。

詳細については、Cumulative Layout Shift（CLS）をご覧ください。

GPU アクティビティを表示する

[GPU] セクションで GPU アクティビティを表示します。

GPU セクション。

ラスターアクティビティを表示する

[スレッドプール] セクションでラスターアクティビティを確認します。

[スレッドプール] セクションのラスターアクティビティ。

フレーム/秒（FPS）を分析する

DevTools には、フレームレートを分析するためのさまざまな方法が用意されています。

[フレーム] セクションを使用して、特定のフレームの所要時間を表示します。
FPS メーターを使用すると、ページの実行中の FPS をリアルタイムで推定できます。FPS メーターを使用してフレーム/秒をリアルタイムで表示するをご覧ください。

[Frames] セクション

[Frames] セクションには、特定のフレームにかかる時間が正確に示されます。

フレームにカーソルを合わせると、フレームの詳細を示すツールチップが表示されます。

フレームにカーソルを合わせる。

この例では、フレームにカーソルを合わせるとツールチップが表示されます。

[フレーム] セクションには、次の 4 種類のフレームが表示されます。

アイドル状態のフレーム（白）。変更なし。
フレーム（緑）: 想定どおりに時間内にレンダリングされる。
部分的に表示されたフレーム（黄色で、点線のパターンがまばらに表示されている）。Chrome は、少なくとも一部のビジュアルアップデートを時間内にレンダリングするために最善を尽くしました。たとえば、レンダラプロセスのメインスレッドの処理（キャンバスアニメーション）が遅れているが、コンポジタスレッド（スクロール）は間に合っている場合などです。
フレーム落ち（赤色の太い実線パターン）。Chrome がフレームを妥当な時間内にレンダリングできない。

部分的に表示されたフレームにカーソルを合わせている様子。

この例では、部分的に表示されたフレームにカーソルを合わせるとツールチップが表示されます。

フレームをクリックすると、[概要] タブにフレームの詳細が表示されます。DevTools では、選択したフレームの輪郭が青色で表示されます。

[概要] タブでフレームを確認する。

ネットワークリクエストを表示する

[ネットワーク] セクションを開き、パフォーマンスレコーディング中に発生したネットワークリクエストのウォーターフォールを表示します。

[ネットワーク] トラックで選択したリクエスト。[概要] タブが開いています。

[ネットワーク] トラック名の横には、リクエストタイプが色分けされた凡例があります。

レンダリングをブロックするリクエストには、右上に赤い三角形が表示されます。

リクエストにカーソルを合わせると、次の情報が表示されるツールチップが表示されます。

リクエストの URL と、その実行に要した合計時間。
優先度または優先度の変更（Medium -> High など）。
リクエストが Render blocking かどうか。
リクエストのタイミングの内訳（後述）。

リクエストをクリックすると、ネットワーク トラックに、イニシエータからリクエストへの矢印が描画されます。

また、[パフォーマンス] パネルの [概要] タブには、リクエストに関する詳細情報が表示されます。表示される情報には、初期優先度や（最終的な）優先度のフィールドなどがありますが、これらに限定されません。値が異なる場合は、録画中にリクエストの取得優先度が変更されています。詳細については、Fetch Priority API によるリソース読み込みの最適化をご覧ください。

[概要] タブには、リクエストのタイミングの内訳も表示されます。

[概要] タブのリクエスト時間の内訳。

www.google.com のリクエストは、左側の線（|–）、中央の暗い部分と明るい部分のあるバー、右側の線（–|）で表されます。

タイミングの詳細は [ネットワーク] タブで確認できます。[ネットワーク] トラック内のリクエストまたは [概要] タブ内のその URL を右クリックし、[ネットワークパネルに表示] をクリックします。DevTools の [ネットワーク] パネルに移動し、対応するリクエストを選択します。[タイミング] タブを開きます。

[ネットワーク] パネルのリクエストの [タイミング] タブ。

これらの 2 つの内訳は次のように対応しています。

左側の行（|–）は、イベントの Connection start グループまでを含みます。つまり、Request Sent より前の部分です。
バーの明るい部分は Request sent と Waiting for server response です。
バーの暗い部分は Content download です。
右側の線（–|）は、メインスレッドの待機に費やされた時間です。[ネットワーク] > [タイミング] タブには表示されません。

メモリ指標を表示する

[メモリ] チェックボックスをオンにして、前回の記録のメモリ指標を表示します。

[メモリ] チェックボックス。

DevTools の [Summary] タブの上に、新しい [Memory] グラフが表示されます。[NET] グラフの下に、[HEAP] という新しいグラフもあります。[HEAP] グラフには、[メモリ] グラフの [JS ヒープ] 行と同じ情報が表示されます。

メモリ指標。

この例では、[Summary] タブの上にメモリ指標が表示されています。

グラフ上の色付きの線は、グラフの上部にある色付きのチェックボックスに対応しています。チェックボックスをオフにすると、そのカテゴリがグラフから非表示になります。

グラフには、選択した録音の領域のみが表示されます。上の例の [メモリ] グラフには、録画開始から 1,000 ミリ秒あたりまでのメモリ使用量のみが表示されています。

録画の一部の時間を確認する

[ネットワーク] や [メイン] などのセクションを分析するときに、特定のイベントに要した時間をより正確に推定しなければならない場合があります。Shift キーを押しながら、左または右にドラッグして、録画の一部を選択します。選択した部分の下部に、その部分にかかった時間が DevTools に表示されます。

録画の一部の時間を確認する。

この例では、選択した部分の下部にある 488.53ms タイムスタンプが、その部分に要した時間を示しています。

スクリーンショットを表示する

スクリーンショットを有効にする方法については、録画中にスクリーンショットをキャプチャするをご覧ください。

[タイムラインの概要] にカーソルを合わせると、その時点でのページのスクリーンショットが表示されます。[タイムラインの概要] セクションには、[CPU]、[FPS]、[NET] のグラフが表示されます。

スクリーンショットを表示している。

[フレーム] セクションでフレームをクリックして、スクリーンショットを確認することもできます。デベロッパーツールの [Summary] タブに、スクリーンショットの小さいバージョンが表示されます。

[概要] タブでスクリーンショットを表示している様子。

この例は、[フレーム] セクションで 195.5ms フレームをクリックしたとき、[概要] タブに表示される 195.5ms フレームのスクリーンショットです。

[概要] タブのサムネイルをクリックして、スクリーンショットを拡大します。

[概要] タブからスクリーンショットを拡大する。

この例は、[概要] タブでサムネイルをクリックした後の拡大したスクリーンショットです。

レイヤ情報を表示する

フレームに関する高度なレイヤ情報を表示するには:

高度な描画パフォーマンスの計測を有効にする。
[フレーム] セクションでフレームを選択します。DevTools には、レイヤに関する情報が新しい [レイヤ] タブ（[イベントログ] タブの横）に表示されます。

[レイヤ] タブ。

レイヤにカーソルを合わせると、図でハイライト表示されます。

レイヤのハイライト表示。

この例では、レイヤ #39 にカーソルを合わせるとハイライト表示されます。

図を移動するには:

[パンモード] をクリックして、X 軸と Y 軸に沿って移動します。
[Rotate Mode] をクリックして、Z 軸に沿って回転します。
[変換をリセット] をクリックして、図を元の位置にリセットします。

レイヤ分析の使用例:

ペイントプロファイラを表示する

ペイントイベントの詳細情報を表示するには:

高度な描画パフォーマンスの計測を有効にする。
[Main] トラックで [Paint] イベントを選択します。

[ペイントプロファイラ] タブ。

[レンダリング] タブでレンダリングのパフォーマンスを分析する

[レンダリング] タブの機能を使用して、ページのレンダリングパフォーマンスを可視化します。

[レンダリング] タブを開きます。

FPS メーターを使用してフレーム/秒をリアルタイムで表示する

フレームレンダリングの統計情報は、ビューポートの右上に表示されるオーバーレイです。ページの実行中に FPS のリアルタイム推定値を提供します。

フレームレンダリング統計情報をご覧ください。

ペイント点滅でペイントイベントをリアルタイムで表示する

ペイントフラッシュを使用すると、ページ上のすべてのペイントイベントをリアルタイムで確認できます。

ペイントの点滅をご覧ください。

レイヤの枠線でレイヤのオーバーレイを表示する

[レイヤ境界] を使用すると、ページの上にレイヤ境界とタイルのオーバーレイを表示できます。

レイヤの境界をご覧ください。

スクロールのパフォーマンスの問題をリアルタイムで検出する

[スクロールのパフォーマンスの問題] を使用して、スクロールに関連するイベントリスナーがあり、ページのパフォーマンスに悪影響を及ぼす可能性があるページの要素を特定します。DevTools では、問題の可能性がある要素が青緑色で囲まれます。

スクロールのパフォーマンスの問題をご覧ください。