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

Dale St. Marthe

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

概要

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

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

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

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

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

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

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

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

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

ウェブサイトの利用に伴って指標の値がどのように変化するかを調べると、改善の余地があることがわかります。

パフォーマンス モニターの便利な機能の 1 つは、ページ ナビゲーションが終わるまでこのモニターが持続するということです。そのため、フロントエンドのデベロッパーは、Performance Monitor を開いてウェブサイトをスクロールし、DOM ノードと Layout/sec の指標に目を向けることで、レイアウト スラッシングのような問題を回避できます。

ユーザーから、サイトの読み込みが遅いという報告があった場合は、パフォーマンス モニターで問題領域を特定できます。

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

パフォーマンスの分析を始めたばかりの場合は、まず [Lighthouse] パネルを使用し、次に [Performance] パネルまたは [Performance Monitor] を使用して詳細を調べることをおすすめします。