パフォーマンス パネル: ウェブサイトのパフォーマンスを分析する

Dale St. Marthe
Dale St. Marthe
LinkedIn

[パフォーマンス] パネルを使用すると、ウェブサイトのパフォーマンスを分析できます。

概要

[Performance] パネルでは、ウェブ アプリケーションの CPU パフォーマンス プロファイルを記録できます。プロファイルを分析して、潜在的なパフォーマンスのボトルネックとリソース使用を最適化する方法を見つけます。

[パフォーマンス] パネルを使用して、次の操作を行います。

  • パフォーマンス プロファイルを記録します。
  • キャプチャ設定を変更する。
  • パフォーマンス レポートを分析する。

ウェブサイトのパフォーマンスを向上させるための包括的なガイドについては、ランタイム パフォーマンスの分析をご覧ください。

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

[Performance] パネルを開くには、DevTools を開き、上部の一連のタブから [Performance] を選択します。

または、次の手順でコマンド メニューで [パフォーマンス] パネルを開きます。

  1. DevTools を開きます。
  2. 次のコマンドを実行して、コマンド メニューを開きます。
  3. macOS: Command+Shift+P
  4. Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニュー
  5. 「Performance panel」と入力し、[パフォーマンス パネルを表示] を選択して、Enter キーを押します。

パフォーマンス プロファイルを記録する

録画の準備が整ったら、[パフォーマンス] パネルに以下のオプションが表示されます。

キャプチャの設定を変更する

[Capture settings] を使用すると、DevTools でのパフォーマンス記録のキャプチャ方法を変更し、レポートに追加情報を表示できます。[キャプチャ設定] をクリックします。 設定] をクリックして [キャプチャ設定] メニューにアクセスします。

[Capture settings] メニューで次のオプションを選択します。

パフォーマンス レポートを分析する

[Performance] パネルの使用方法については、パフォーマンス録画を分析するをご覧ください。

このガイドのトピックと、その他の役立つドキュメントを以下に示します。

レポートの操作方法を確認するには:

ワークフローで重要なことに集中する方法を学ぶには:

[Bottom-up]、[Call tree]、[Event log] の各タブの詳細を確認するには:

レポートの分析方法を確認するには:

これらのパネルでパフォーマンスを向上

ウェブサイトのパフォーマンス改善に役立つ他のパネルをご確認ください。