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

このページは、パフォーマンスの分析に関連する Chrome DevTools の機能に関する包括的なリファレンスです。

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

リアルタイム指標画面

[パフォーマンス] パネルを初めて開くと、[リアルタイム指標] 画面が表示されます。この画面には、3 つの Core Web Vitals を使用した現在のページのパフォーマンスの概要がすぐに表示されます。

指標は、ページを操作したり、新しいページに移動したりすると更新されます。これには、シングルページ アプリケーションでのクライアントサイドのソフト ナビゲーションも含まれます。ソフト ナビゲーションは、SOFT NAV バッジで示されます。これは、パフォーマンスの問題を特定するのに適した方法です。特に、INP と CLS が特定の状況下でのみ発生する場合に有効です。パフォーマンスの問題が繰り返し発生する場合は、トレースを記録して、根本的な問題をデバッグするための詳細情報を取得できます。

リアルタイム指標画面の機能

[リアルタイム指標] 画面には、指標に加えて次の機能があります。

• [フィールド指標] パネルで有効にした場合の CrUX のフィールド指標。
• ローカル指標とフィールド指標の主な違いの概要。
• LCP 要素。カーソルを合わせると、ページ上でハイライト表示されます。
• CLS クラスタと INP タイプの詳細
• 指標にカーソルを合わせたときの詳細情報（LCP と INP のサブパート、フィールド ヒストグラムなど）
• インタラクションとレイアウト シフトの履歴を記録する [インタラクション] パネルと [レイアウト シフト] パネル。
• フィールド指標パネル。CrUX データをオンに切り替えることができます。このデータの期間の詳細、オリジンデータと URL データの切り替え（利用可能な場合）、デスクトップ データとモバイルデータの切り替えが可能です。
• 環境設定パネル。CrUX データに基づいて、使用するデバイス、CPU、ネットワーク スロットリングのガイダンスが表示されます。

詳しくは、DevTools でローカルと実際のユーザーの Core Web Vitals パフォーマンスをモニタリングするのブログ投稿をご覧ください。

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

画面の左上または右下のボタンを使用して、ランタイムまたは読み込みのパフォーマンスを記録できます。

実行時のパフォーマンスを記録する

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

1. 分析するページに移動します。
2. DevTools の [Performance] タブをクリックします。
3. 録画アイコン をクリックします。
4. ページを操作します。DevTools は、操作の結果として発生するすべてのページ アクティビティを記録します。
5. [録画] をもう一度クリックするか、[停止] をクリックして録画を停止します。

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

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

1. 分析するページに移動します。
2. DevTools の [Performance] パネルを開きます。
3. [記録して再読み込み] をクリックします。DevTools はまず about:blank に移動して、残っているスクリーンショットとトレースを消去します。次に、DevTools はページの再読み込み中にパフォーマンス指標を記録し、読み込みが完了してから数秒後に自動的に記録を停止します。

アクティビティが最も多く発生した記録の部分が自動的に拡大表示されます。

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

録画中にスクリーンショットを撮影する

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

メモリ バジェット内でビジュアル録画の忠実度をカスタマイズするには、[キャプチャ設定] を開き、[スクリーンショット キャプチャ] プルダウン メニューからフレームサイズとカウント上限のプリセットを選択します。

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

録画中にガベージ コレクションを強制的に実行する

ページの記録中に、[Collect garbage] mop をクリックして、ガベージ コレクションを強制的に実行します。

録画設定を表示する

[キャプチャ設定] をクリックすると、DevTools がパフォーマンスの記録をキャプチャする方法に関連する設定が表示されます。

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

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

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [Disable JavaScript Samples] チェックボックスをオンにします。
3. ページの録画を撮影します。

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

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

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

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

録画中にネットワークを調整するには:

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

プルダウン メニューでは、[パフォーマンス] パネルに、デフォルトのスロットリング プリセットや、フィールド データに基づいてユーザーのエクスペリエンスを近似するプリセットが推奨されることもあります。

録画中に CPU をスロットルする

記録中に CPU をスロットルするには:

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

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

プルダウン メニューの [パフォーマンス] パネルでは、フィールド データに基づいて、デフォルトのスロットリング プリセットや、ユーザー エクスペリエンスを近似するプリセットが推奨されることもあります。

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

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

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

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

高度なペイント計測を有効にする

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

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

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

カスタム トラックを表示する

トレースの概要でカスタム トラックとカスタム トラック グループの概要を有効にします。これらは DevTools 拡張機能 API を使用してカスタマイズできます。

以前の録音を消去する

録画を行った後、[Clear recording] を押して、[Performance] パネルからその録画を消去します。

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

ランタイム パフォーマンスを記録するか、読み込みパフォーマンスを記録すると、[Performance] パネルに、直前に発生したパフォーマンスを分析するための大量のデータが表示されます。

録画にアノテーションを付けて共有する

パフォーマンス分析結果へのメモの追加と共有をご覧ください。

行動につながるインサイトを取得する

[パフォーマンス] パネルには、Lighthouse レポートにも表示されるパフォーマンス分析情報が表示されます。これらの分析情報では、パフォーマンスを改善する方法が提案され、LCP や INP のサブパート、LCP リクエストの検出に関する問題、サードパーティ、レガシーや重複した JavaScript リソースなどのパフォーマンスの問題に関するガイド付き分析が提供されます。完全なリストについては、パフォーマンス分析情報のドキュメントをご覧ください。

問題が検出されなかった場合、分析情報は合格となります。[分析情報] タブでは、下部の [合格した分析情報] セクション（折りたたまれています）に表示されます。合格しなかった分析情報は、専用のセクションに表示されます。

分析情報を活用するには:

1. パフォーマンスの記録を作成する。
2. [パフォーマンス] パネルの左側のサイドバーで、[分析情報] タブを開き、さまざまなセクションを開いて、項目にカーソルを合わせてクリックします。[パフォーマンス] パネルで、トレース内の対応するイベントがハイライト表示されます。

録画を操作する

パフォーマンス トレースにカーソルを合わせると、[パフォーマンス] パネルで次の処理が行われます。

• [Timeline overview] にカーソルを合わせると、パフォーマンス トレース全体にわたる垂直マーカーが表示されます。
• [Main] トラックの項目にカーソルを合わせると、[Timeline overview] の範囲がハイライト表示されます。

パフォーマンスの記録を詳しく調べるには、記録の一部を選択したり、長いフレーム チャートをスクロールしたり、拡大 / 縮小したり、パンくずリストを使用してズームレベル間を移動したりできます。

キーボード ショートカットを使ったナビゲーション

キーボード ショートカットを使用して録音をすばやく操作するには、まず、キーボード ナビゲーションのスタイルを選択します。

パネルの右上にある ヘルプ アイコン [ショートカットを表示] をクリックし、次のいずれかを選択します。

• クラシック: マウスホイール（タッチパッドの上下）でズームし、Shift+マウスホイールで垂直方向にスクロールします。
• モダン: マウスホイールで縦方向にスクロール、Shift+マウスホイールで横方向にスクロール、Command/Control+マウスホイールでズーム。

ショートカット ダイアログには、利用可能なショートカットのチートシートも表示されます。

録音の一部を選択する

[Performance] パネルのアクションバーの下、記録の上部に、[CPU] グラフと [NET] グラフを含む [Timeline overview] セクションが表示されます。

録画の一部を選択するには、クリックして長押しし、[Timeline overview] で左または右にドラッグします。

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

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

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

1. [Timeline overview] セクションまたはトラック（[Main] とその周辺）にカーソルを合わせます。
2. 2 本の指で上にスワイプすると縮小、左にスワイプすると左に移動、下にスワイプすると拡大、右にスワイプすると右に移動します。

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

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

パンくずリストを作成して使用するには:

1. [タイムラインの概要] で、録音の一部を選択します。
2. 選択にカーソルを合わせ、[N ミリ秒] zoom_in ボタンをクリックします。選択範囲が タイムラインの概要全体に広がります。[タイムラインの概要] の上部にパンくずリストが表示されます。
3. 前の 2 つの手順を繰り返して、別のネストされたパンくずリストを作成します。選択範囲が 5 ミリ秒を超える限り、ブレッドクラムをネストし続けることができます。
4. 選択したズームレベルに移動するには、[タイムラインの概要] の上部にあるチェーン内の対応するパンくずをクリックします。

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

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

[Main] トラックまたはその隣接トラックで長いフレーム チャートをスクロールするには、長押ししてから、目的のものが表示されるまで任意の方向にドラッグします。

フレーム チャートでの無関係なスクリプトの無視

コードに集中できるように、関連性のないスクリプトを無視リストに追加できます。

スクリプトを無視するには、次のいずれかを行います。

• 上部のアクション バーで [compress Show ignore list settings dialog] をクリックし、入力フィールドに正規表現を入力します。入力すると、フレーム チャートに新しいルールが適用されます。
• スクリプトを右クリックして [無視リストにスクリプトを追加] を選択します。[パフォーマンス] パネルの [圧縮] の [無視リストの設定ダイアログを表示] のリストに、このスクリプトが追加されます。

パネルでは、このようなスクリプトの過剰なネストが自動的に折りたたまれ、On ignore list (REGULAR_EXPRESSION) としてマークされます。

compress [無視リストの設定ダイアログを表示] で、無視リストのルールをオンまたはオフにできます。

無視リストからスクリプトを削除するには、フレーム チャートでスクリプトを右クリックして [無視リストからスクリプトを削除] を選択するか、圧縮 無視リストの設定ダイアログを表示でスクリプトにカーソルを合わせて 削除 削除 をクリックします。

DevTools は、設定 設定 > [無視リスト] で追加した無視リストのルールを保存します。

また、ファーストパーティ スクリプトのみに焦点を当てるには、check_box [Dim 3rd parties] をオンにします。[Performance] パネルでは、サードパーティ スクリプトがグレー表示されます。

アクティビティを検索

[メイン] トラックのアクティビティと [ネットワーク] トラックのリクエストを検索できます。

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

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

この例では、下部の検索ボックスに正規表現が表示され、E で始まるアクティビティが検索されます。

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

• expand_less [前へ] ボタンまたは expand_more [次へ] ボタンをクリックします。
• Shift+Enter キーを押すと前の候補が選択され、Enter キーを押すと次の候補が選択されます。

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

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

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

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

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

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

トラックを移動、非表示にするには:

1. 構成モードに入るには、トラック名を右クリックして [Configure tracks] を選択します。
2. arrow_upward（上）または arrow_downward（下）をクリックして、トラックを上下に移動します。[visibility_off] をクリックして非表示にします。
3. 完了したら、下部にある [トラックの設定を終了] をクリックして設定モードを終了します。

このワークフローの動作については、動画をご覧ください。

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

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

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

イベントをクリックすると、[Summary] タブにイベントの詳細情報が表示されます。これには、所要時間（およびセルフ所要時間）、ソース スクリプト内の対応する行へのリンク、オリジン URL（エンティティ名がわかっている場合はエンティティ名を含む）、スタック トレース（存在する場合）、円グラフでのタイミングの内訳などが含まれます。

[パフォーマンス] パネルで、選択したイベントが青色で囲まれます。

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

ファーストパーティ イベントとサードパーティ イベントを区別する

サードパーティのコードに過度に依存すると、読み込み速度に悪影響を及ぼす可能性があります。[パフォーマンス] パネルを使用すると、トレース内のファーストパーティ イベントとサードパーティ イベントを視覚的に区別できるため、サードパーティ コードの読み込みを減らしたり遅らせたりして、ページのコンテンツを優先させるかどうかをより適切に判断できます。

ファーストパーティ コードのパフォーマンスのみに注目するには:

1. パフォーマンス トレースまたは [分析情報] タブで何も選択されていないことを確認します。これを行うには、トレースの空いているスペースをクリックします。
2. 上部のアクションバーで check_box [サードパーティを暗く表示] をオンにします。[パフォーマンス] パネルでは、パフォーマンス トレースからサードパーティ関連のイベントがグレー表示になり、ファーストパーティのみがハイライト表示されます。

[ファースト / サードパーティ] の表でイベントをハイライト表示する

[Timeline overview] で選択した範囲内で、イベントが選択されていない場合、[Summary] タブに [1st / 3rd party] テーブルが表示されます。このテーブルには、次の転送サイズとメインスレッド時間が表示されます。

• 1st party バッジが付いたファーストパーティ エンティティ。
• 選択した範囲で検出されたすべての第三者エンティティ（マークなし）。
• Extension バッジが付いている拡張機能。
• その他の [unattributed] エンティティ。

トレースで関連するイベントがハイライト表示され、残りがグレー表示されるようにするには、テーブル内のエンティティにカーソルを合わせます。エンティティのイベントをハイライト表示したままにするには、表でエンティティを選択します。ハイライト表示を削除するには、トレース内の空いているスペースをクリックします。

このエンティティでグループ化されたアクティビティを [ボトムアップ] タブで開くには、テーブル内のエンティティにカーソルを合わせ、その横にある account_tree [ボトムアップ] をクリックします。

フレーム チャートを読む

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

この例は、メイン トラックのフレーム チャートを示しています。click イベントにより、匿名関数呼び出しが発生しました。この関数は onEndpointClick_ を呼び出し、は handleClick_ を呼び出す、というように続きます。

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

長いタスクも赤い三角形でハイライト表示され、50 ミリ秒を超える部分が赤で網掛けされます。

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

また、[Main] トラックには、profile() と profileEnd() のコンソール関数で開始および停止された CPU プロファイルに関する情報が表示されます。コードまたはコンソールで console.profileEnd() を呼び出すと、パフォーマンス パネルが自動的に開き、記録されたトレースが表示されます。

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

イベント イニシエーターを追跡する

[メイン] トラックには、次のイニシエータと、それらが引き起こしたイベントを結ぶ矢印が表示されます。

• スタイルまたはレイアウトの無効化 -> スタイルの再計算またはレイアウト
• アニメーション フレームのリクエスト -> アニメーション フレームの呼び出し
• アイドル コールバックをリクエスト -> アイドル コールバックを起動
• タイマーのインストール -> タイマーの呼び出し
• WebSocket の作成 -> WebSocket handshake の送信と WebSocket handshake の受信または WebSocket の破棄
• postTask のスケジュール実行 -> postTask を実行または postTask を中止

矢印を表示するには、フレーム チャートでイニシエータまたはその原因となったイベントを見つけて選択します。

選択すると、[Summary] タブに、イニシエーターの [Initiator for] リンクと、それらが引き起こしたイベントの [Initiated by] リンクが表示されます。クリックすると、対応するイベント間を移動できます。

フレーム チャートでの関数と関数の子の非表示化

メインスレッドのフレーム チャートを整理するには、選択した関数またはその子を非表示にします。

1. [メイン] トラックで、関数を右クリックして次のいずれかのオプションを選択するか、対応するショートカットを押します。

   • 関数を非表示（H）
   • 子を非表示（C）
   • 繰り返しの子を非表示にする（R）
   • 子をリセット（U）
   • トレースをリセット（T）
   • 無視リストにスクリプトを追加（I）

   

   関数名の横に、非表示の子を持つ arrow_drop_down プルダウン ボタンが表示されます。

2. 非表示の子の数を確認するには、arrow_drop_down プルダウン ボタンにカーソルを合わせます。

   

3. 子を非表示にした関数またはフレーム チャート全体をリセットするには、関数を選択して U を押すか、任意の関数を右クリックして [Reset trace] を選択します。

フレーム チャートでのスクリプトの無視

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

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

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

ページを記録した後、アクティビティの分析に Main トラックのみを使用する必要はありません。DevTools には、アクティビティを分析するための 3 つの表形式のビューもあります。各ビューでは、アクティビティを異なる視点から確認できます。

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

3 つの表（および [概要] タブの 1st / 3rd party table）のいずれかで項目をクリックすると、パフォーマンス トレースの閲覧中に、対応するイベントがトレース内でハイライト表示され、残りのイベントは暗く表示されます。

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

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

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

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

ルート アクティビティ

[Call Tree] タブ、[Bottom-Up] タブ、[Event Log] セクションに記載されているルート アクティビティのコンセプトについて説明します。

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

メイントラックのフレーム チャートでは、ルート アクティビティがチャートの上部に表示されます。[Call Tree] タブと [Event log] タブでは、ルート アクティビティが最上位の項目になります。

ルート アクティビティの例については、[Call Tree] タブをご覧ください。

[Call tree] タブ

[Call tree] タブを使用して、最も多くの作業を引き起こしているルート アクティビティを確認します。

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

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

自己時間は、そのアクティビティに直接費やされた時間を表します。合計時間は、そのアクティビティまたはその子アクティビティに費やされた時間を表します。

[Self Time]、[Total Time]、[Activity] をクリックして、その列でテーブルを並べ替えます。

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

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

[Bottom-up]（ボトムアップ）タブ

[Bottom-up] タブを使用すると、最も多くの時間を直接消費したアクティビティをまとめて確認できます。

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

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

[Self Time] 列は、そのアクティビティが直接実行された時間の合計を、すべての発生にわたって表します。

[Total Time] 列は、そのアクティビティまたはその子アクティビティに費やされた時間の合計を表します。

最も時間がかかったスタックの表

[コールツリー] タブまたは [ボトムアップ] タブの右側にある right_panel_open [最も重いスタックを表示] をクリックして、[最も重いスタック] テーブルを表示します。

この表には、選択したアクティビティの子のうち、実行に最も時間がかかったものが表示されます。表内の項目にカーソルを合わせると、対応するイベントが [Main] トラックでハイライト表示され、残りのイベントは暗く表示されます。

これにより、パフォーマンス トレースで、コールスタックから最も時間がかかっているネストされたアクティビティを視覚的に見つけることができます。

[Event log]（イベントログ）タブ

[イベントログ] タブでは、録画中に発生したアクティビティを発生順に確認できます。

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

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

[自己時間] 列は、そのアクティビティで直接費やされた時間を表します。

[Total Time] 列は、そのアクティビティまたはその子アクティビティで直接費やされた時間を表します。

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

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

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

[Loading]、[Scripting]、[Rendering]、[Painting] のチェックボックスをオフにすると、それらのカテゴリのアクティビティがすべて除外されます。

パフォーマンス マーカーを表示する

パフォーマンス トレースに縦線が重なったオーバーレイには、次のような重要なパフォーマンス マーカーが表示されます。

• First Contentful Paint（FCP）
• Largest Contentful Paint（LCP）
• DOMContentLoaded イベント（DCL）
• Onload イベント（L）

トレースの下部にあるマーカー名にカーソルを合わせると、タイムスタンプが表示されます。

カスタム タイミングを表示する

[タイミング] トラックで、次のようなカスタム パフォーマンス マーカーを確認します。

• performance.mark() 件の通話。以下に、813.44 ミリ秒の時点で、ツールチップ付きの個別のマークが「JavaScript の実行を開始」というラベルで表示されています。
• performance.measure() 件の通話。以下に、Slow Interaction というラベルが付いた黄色のスパンを示します。

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

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

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

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

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

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

[Interactions] トラックには、200 ミリ秒を超えるインタラクションに対する Interaction to Next Paint（INP）警告も、[Summary] タブと、カーソルを合わせたときに表示されるツールチップに表示されます。

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

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

[Layout shifts] トラックでレイアウト シフトを確認します。シフトは紫色のひし形として表示され、タイムライン上の近接性に基づいてクラスタ（紫色の線）にグループ化されます。

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

[概要] タブでレイアウト シフトまたはシフトに関するタイミング、スコア、要素、原因候補などの詳細情報を確認するには、対応するひし形またはクラスタをクリックします。

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

ビュー アニメーション

[Animations] トラックでアニメーションを確認します。アニメーションには、対応する CSS プロパティまたは要素（transform や my-element など）の名前が付けられます。非合成アニメーションは、右上に赤い三角形でマークされます。

アニメーションを選択すると、[Summary] タブに詳細（合成エラーの理由など）が表示されます。

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

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

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

[Thread Pool] セクションで、ラスタ アクティビティを確認します。

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

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

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

[Frames] セクション

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

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

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

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

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

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

フレームをクリックすると、[Summary] タブにフレームの詳細情報が表示されます。DevTools で、選択したフレームが青色で囲まれます。

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

[ネットワーク] セクションを開くと、パフォーマンスの記録中に発生したネットワーク リクエストのウォーターフォールが表示されます。

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

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

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

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

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

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

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

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

[概要] タブには、サーバーサイド レンダリング技術を実装するネットワーク リクエストのサーバー タイミングの内訳も表示されます（存在する場合）。これらのリクエストの場合、[パフォーマンス] パネルは Server-Timing レスポンス ヘッダーからデータを取得します。

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

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

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

メモリ指標を表示する

[Memory] チェックボックスをオンにすると、最後の記録のメモリ指標が表示されます。

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

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

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

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

録画の一部を再生する

[Network] や [Main] などのセクションを分析する際、特定のイベントにかかった時間をより正確に推定する必要がある場合があります。Shift キーを押しながら、クリックして長押しし、左または右にドラッグして、録音の一部を選択します。選択した部分の所要時間が DevTools の下部に表示されます。

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

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

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

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

[Frames] セクションでフレームをクリックして、スクリーンショットを表示することもできます。DevTools の [Summary] タブに、スクリーンショットの縮小版が表示されます。

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

[概要] タブのサムネイルをクリックすると、スクリーンショットが拡大表示されます。

この例は、[概要] タブでサムネイルをクリックした後に表示される、拡大されたスクリーンショットを示しています。

レイヤの情報を表示する

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

1. 高度なペイント計測を有効にします。
2. [フレーム] セクションでフレームを選択します。DevTools の [Event log] タブの横にある新しい [Layers] タブに、レイヤに関する情報が表示されます。

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

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

図式を移動するには:

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

レイヤ分析の実際の動作をご覧ください。

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

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

1. 高度なペイント計測を有効にします。
2. [Main] トラックで [Paint] イベントを選択します。

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

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

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

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

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

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

ペイント フラッシュを使用してペイント イベントをリアルタイムで表示する

[Paint Flashing] を使用すると、ページ上のすべてのペイント イベントをリアルタイムで確認できます。

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

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

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

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

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

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

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