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

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

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

概要

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

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

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

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

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

[パフォーマンス] パネルを開くには、DevTools を開き、上部のタブセットから [パフォーマンス] を選択します。

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

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

Core Web Vitals をリアルタイムで確認する

[パフォーマンス] パネルを開くと、ローカルの Largest Contentful Paint（LCP）と Cumulative Layout Shift（CLS）の指標がすぐにキャプチャされて表示され、スコア（良好、改善が必要、不良）が示されます。

ページを操作すると、[パフォーマンス] パネルでローカルの Interaction to Next Paint（INP）とそのスコアも取得されます。これにより、LCP と CLS に加えて、ネットワーク接続とデバイスを使用してページのCore Web Vitalsの概要を完全に把握できます。

[インタラクション] タブと [レイアウト シフト] タブの 3 つの指標カードの下には、キャプチャされたインタラクションとレイアウト シフトに関する情報（要素、タイミング、フェーズ（インタラクションの場合）、スコア（レイアウト シフトの場合）など）を含む表が表示されます。両方のリストをクリアするには、[] [クリア] をクリックします。

指標スコアの内訳を確認するには、指標値にカーソルを合わせてツールチップを表示します。

自分のエクスペリエンスとユーザーのエクスペリエンスを比較する

また、Chrome UX レポートからフィールド データを取得し、サイトのユーザー エクスペリエンスをローカル指標と比較することもできます。

フィールド データを追加するには:

  1. [パフォーマンス] > [次のステップ] > [フィールド データ] で、[設定] をクリックします。

    [次のステップ] セクションの [セットアップ] ボタン。

  2. [Configure field data fetching] ダイアログで、[Privacy disclosure] を確認し、[Ok] をクリックします。

    上級: 開発環境と本番環境間のマッピングを設定する...

    必要に応じて、最も関連性の高いフィールド データを自動的に取得するために、開発環境オリジンと本番環境オリジン間のマッピングを（複数）設定できます。

    1. ダイアログ ウィンドウで、[詳細] セクションを開き、[+ 新規] をクリックします。

    2. マッピング テーブルに開発環境と本番環境の URL を入力し、[+] をクリックします。

      [詳細設定] セクションの開発元と本番環境の元のマッピング。

      たとえば、http://localhost:8080 から https://example.com へのマッピングでは、localhost:8080/page1 に移動すると example.com/page1 のフィールド データが表示されます。

      また、何らかの理由でフィールド データを自動的に取得できない場合は、以下の URL のフィールド データを常に表示するをオンにして、URL を指定することもできます。[パフォーマンス] パネルでは、まずこの URL のフィールド データの取得が試みられ、その後、どのページに移動してもこのフィールド データが表示されます。

      セットアップ後にフィールド データの取得設定を変更するには、[フィールド データ] > [設定] をクリックします。

    フィールド データの取得を設定すると、[パフォーマンス] パネルに、ローカルの指標スコアとユーザーが体験するスコアの比較が表示されるようになります。収集期間は、右側の [フィールド データ] セクションで確認できます。

    フィールド データの取得後の収集期間。

    指標スコアの内訳を確認するには、指標値にカーソルを合わせてツールチップを表示します。

ユーザーの環境に合わせて環境を構成する

前のセクションで説明したようにフィールド データの取得を設定すると、[パフォーマンス] パネルに、ユーザー エクスペリエンスをより適切に反映するように環境を構成する方法に関する推奨事項が表示されます。

環境を構成するには:

  1. 各指標カードで、[ローカル テスト条件を考慮する] セクション（ある場合）を開き、推奨事項を確認します。

    各指標カードで [ローカルテストの条件を考慮する] セクションが開いている。

    この例では、ユーザーのエクスペリエンスをより適切に再現するために、一般的なパソコンの画面サイズを使用し、CPU とネットワークをスロットリングすることをおすすめします。

  2. この例の環境構成に一致させるには:

    1. ビューポートを一般的な画面サイズ（720p や 1080p など）のいずれかに設定します。特定のデバイスと画面サイズをエミュレートするには、[要素] パネルの [デバイスモード] を使用します。
    2. この例のウェブサイトでは、ユーザーの 82% がパソコンで閲覧しています。ローカルの指標スコアを正しいフィールド データと比較するには、[フィールド データ] > [デバイス] プルダウン リストから [パソコン] を選択します。
    3. [Environment settings] セクションで、[Network] プルダウン リストを [Fast 4G] などに、[CPU] を [20x slowdown] などに設定します。同じセクションで [ネットワーク キャッシュを無効にする] の をオンにすることもできます。

  3. 環境を構成したら、ページを再読み込みして操作し、ローカル INP をキャプチャして、指標スコアを再度比較します。

    環境は、実際のユーザー エクスペリエンスに合わせて構成されています。

    指標のスコアが、ユーザーが体験するスコアとより類似しているようです。これに伴い、指標カードから [ローカルテストの条件を考慮する] セクションが削除されました。

これで、ウェブサイトのCore Web Vitalsの改善を開始できます。

パフォーマンス レポートをキャプチャして分析する

以降のセクションでは、プロファイルを記録し、キャプチャ設定を変更して、レポートを分析する方法について説明します。

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

録画の準備ができたら、[パフォーマンス] パネルで次のオプションを使用できます。

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

キャプチャ設定では、DevTools がパフォーマンスの記録をキャプチャする方法を変更できます。これにより、レポートで追加の情報を確認できます。[キャプチャ設定] をクリックして、[キャプチャ設定] メニューにアクセスします。

[キャプチャ設定] メニューから次のオプションを選択します。

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

[パフォーマンス] パネルの使用方法に関する完全なガイドについては、パフォーマンスの記録を分析するをご覧ください。

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

レポートの操作方法:

パフォーマンス分析情報を使用して、ウェブサイトのパフォーマンスに関する実用的な分析情報を取得します。

ワークフローで重要なことに集中する方法は次のとおりです。

[Bottom-up]、[Call tree]、[Event log] タブについて:

レポートを分析する方法:

これらのパネルでパフォーマンスを改善する

ウェブサイトのパフォーマンス向上に役立つ他のパネルについては、以下をご覧ください。

参考情報