[パフォーマンス] パネルを使用すると、ウェブサイトのパフォーマンスを分析できます。
概要
[Performance] パネルでは、ウェブ アプリケーションの CPU パフォーマンス プロファイルを記録できます。プロファイルを分析して、潜在的なパフォーマンスのボトルネックとリソース使用を最適化する方法を見つけます。
[パフォーマンス] パネルを使用して、次の操作を行います。
- パフォーマンス プロファイルを記録します。
- キャプチャ設定を変更する。
- パフォーマンス レポートを分析する。
ウェブサイトのパフォーマンスを向上させるための包括的なガイドについては、ランタイム パフォーマンスの分析をご覧ください。
パフォーマンス パネルを開く
[Performance] パネルを開くには、DevTools を開き、上部の一連のタブから [Performance] を選択します。
または、次の手順でコマンド メニューで [パフォーマンス] パネルを開きます。
- DevTools を開きます。
- 次のコマンドを実行して、コマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
- 「
Performance panel」と入力し、[パフォーマンス パネルを表示] を選択して、Enter キーを押します。
パフォーマンス プロファイルを記録する
録画の準備が整ったら、[パフォーマンス] パネルに以下のオプションが表示されます。
キャプチャの設定を変更する
[Capture settings] を使用すると、DevTools でのパフォーマンス記録のキャプチャ方法を変更し、レポートに追加情報を表示できます。[キャプチャ設定] をクリックします。 設定] をクリックして [キャプチャ設定] メニューにアクセスします。
[Capture settings] メニューで次のオプションを選択します。
- JavaScript サンプルを無効にする: 記録中に呼び出された、メイン トラックに表示される JavaScript コールスタックの記録を無効にします。パフォーマンスのオーバーヘッドが削減されます。
- Enable Advanced Paint instrumentation (slow): 高度なペイント インストルメンテーションをキャプチャします。パフォーマンスが大幅に低下する。
- CSS セレクタの統計データを有効にする（低速）: CSS セレクタの統計データを取得します。パフォーマンスが大幅に低下する。
- CPU スロットリング: 低速な CPU 速度をシミュレートします。
- ネットワーク スロットリング: 低速なネットワーク速度をシミュレートします。
- ハードウェアの同時実行:
navigator.hardwareConcurrencyによってレポートされる値を構成します。
パフォーマンス レポートを分析する
[Performance] パネルの使用方法については、パフォーマンス録画を分析するをご覧ください。
このガイドのトピックと、その他の役立つドキュメントを以下に示します。
レポートの操作方法を確認するには:
ワークフローで重要なことに集中する方法を学ぶには:
[Bottom-up]、[Call tree]、[Event log] の各タブの詳細を確認するには:
レポートの分析方法を確認するには:
- メインスレッドのアクティビティを表示する
- フレームチャートを読む
- スクリーンショットを表示する
- メモリ指標を表示する
- 録音の一部の長さを表示する
- スタイル イベントの再計算時に CSS セレクタのパフォーマンスを分析する
- [パフォーマンス] パネルで Node.js のパフォーマンスをプロファイリングする
- フレーム/秒（FPS）を分析する
- タイムライン イベントのリファレンス
これらのパネルでパフォーマンスを向上
ウェブサイトのパフォーマンス改善に役立つ他のパネルをご確認ください。