パフォーマンス モニター パネル

Dale St. Marthe
Dale St. Marthe
GitHub LinkedIn

パフォーマンス モニターを使用すると、サイトの読み込みと実行時のパフォーマンスをすばやく把握できます。

概要

[パフォーマンス モニター] パネルには、パフォーマンス指標がリアルタイムでグラフ化されたタイムラインが表示されます。指標をクリックして、表示と非表示を切り替えます。次に、アプリを操作したときにグラフがどのように変化するかを確認します。

[パフォーマンス モニター] パネル

パフォーマンス モニターは、次の指標を追跡します。

  • CPU 使用率。
  • JavaScript ヒープサイズ。
  • ページ上の DOM ノード、JavaScript イベント リスナー、ドキュメント、フレームの合計数。
  • 1 秒あたりのレイアウトとスタイルの再計算。

[パフォーマンス モニター] パネルを開く

[パフォーマンス モニター] パネルを開くには:

  1. DevTools を開きます。
  2. 次のキーを押して、コマンド メニューを開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニューに
  3. 「Performance monitor」と入力し、[パフォーマンス モニターを表示] を選択して、Enter キーを押します。DevTools ウィンドウの下部に [パフォーマンス モニター] パネルが表示されます。

または、右上の more_vert [その他のオプション] > [その他のツール] > [パフォーマンス モニター] を選択します。

[パフォーマンス モニター] パネルを使用する

パフォーマンス モニターでは、ウェブサイトのランタイム パフォーマンスの概要を確認できます。

ウェブサイトでの操作に伴って指標の値がどのように変化するか観察すると、改善の余地があることがわかります。

パフォーマンス モニターには、ページ ナビゲーション中も常に表示されるという便利な機能があります。そのため、フロントエンドのデベロッパーは、パフォーマンス モニターを開き、ウェブサイトをスクロールし、DOM ノードとレイアウト/秒の指標を確認することで、レイアウト スラッシングのような問題を回避できます。

サイトの読み込み時間が遅いとユーザーから報告された場合は、パフォーマンス モニターを使用して問題のある箇所を特定できます。

たとえば、CPU 使用率の急増は、コードが非効率なことを示している可能性があります。一般的に、ページに多数の JS イベント リスナーが含まれている場合は、コードをリファクタリングし、それらの数を減らしてメモリを解放することをおすすめします。

パフォーマンスの分析を始めたばかりの場合は、まず [Lighthouse] パネルを使用してから、[パフォーマンス] パネルまたはパフォーマンス モニターを使用してさらに調査することをおすすめします。