パフォーマンス モニターを使用すると、サイトの読み込みとランタイムのパフォーマンスをすばやく把握できます。
概要
[パフォーマンス モニタ] パネルには、パフォーマンス指標をリアルタイムでグラフ化するタイムラインが表示されます。指標をクリックして、表示または非表示にします。次に、アプリの操作に応じてグラフがどのように変化するかを確認します。
パフォーマンス モニターは、次の指標を追跡します。
- CPU 使用率。
- JavaScript ヒープサイズ。
- ページ上の DOM ノード、JavaScript イベント リスナー、ドキュメント、フレームの合計数。
- 1 秒あたりのレイアウトとスタイルの再計算。
パフォーマンス モニタ パネルを開く
[パフォーマンス モニタ] パネルを開くには:
- DevTools を開きます。
- 次のキーを押してコマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
- 「
Performance monitor」と入力し、[パフォーマンス モニターを表示] を選択して Enter キーを押します。DevTools ウィンドウの下部に [パフォーマンス モニタ] パネルが表示されます。
または、右上の [その他のオプション] > [その他のツール] > [パフォーマンス モニタ] を選択します。
パフォーマンス モニター パネルを使用する
パフォーマンス モニターでは、ウェブサイトのランタイム パフォーマンスの概要を確認できます。
ウェブサイトの操作に伴って指標の値がどのように変化するかを観察することで、改善の余地を把握できます。
パフォーマンス モニターの便利な機能として、ページの移動中も維持される点が挙げられます。そのため、フロントエンド デベロッパーは、パフォーマンス モニターを開き、ウェブサイトをスクロールしながら、DOM ノードとレイアウト/秒の指標を注意深く確認することで、レイアウト スラッシングなどの問題を回避できます。
サイトの読み込み時間が遅いという報告がユーザーから寄せられている場合は、パフォーマンス モニターを使用して問題のある領域を特定できます。
たとえば、CPU 使用率が急増すると、コードが非効率的であることを示している可能性があります。一般的に、ページに多数の JS イベント リスナーが含まれている場合は、コードをリファクタリングしてその数を減らし、メモリを解放することをおすすめします。
パフォーマンスの分析を初めて行う場合は、まず [Lighthouse] パネルを使用し、次に [パフォーマンス] パネルまたは [パフォーマンス モニター] を使用して詳細を調査することをおすすめします。