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

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: [Control]+[Shift]+[P] コマンド メニュー
  5. 「Performance panel」と入力し、[Show Performance panel] を選択して、[Enter] キーを押します。

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

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

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

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

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

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

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

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

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

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

  2. [**フィールド データの取得を設定**] ダイアログで、[**プライバシーに関する開示**] を確認し、[**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 など）のいずれかに設定します。特定のデバイスと画面サイズをエミュレートするには、[Device mode] を [Elements] パネルで使用します。
    2. この例のウェブサイトのユーザーの 82% がパソコンで閲覧しています。ローカルの指標スコアを正しいフィールド データと比較するには、[フィールド データ] > [デバイス] プルダウン リストから [パソコン] を選択します。
    3. [環境設定] セクションで、[ネットワーク] プルダウン リストを [Fast 4G] に、[CPU] を [20x slowdown] に設定します。同じセクションで [] [ネットワーク キャッシュを無効にする] をオンにすることもできます。

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

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

    指標スコアがユーザーのエクスペリエンスに近い値になりました。そのため、指標カードから [ローカルテストの条件を考慮する] セクションが消えました。

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

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

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

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

記録の準備ができたら、[パフォーマンス] パネルで次の操作を行えます。

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

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

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

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

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

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

レポートの操作方法については、以下をご覧ください。

Performance Insights を使用して、ウェブサイトのパフォーマンスに関する実用的な分析情報を取得するには、以下をご覧ください。

ワークフローで重要な要素に焦点を当てる方法については、以下をご覧ください。

[Bottom-up]、[Call tree]、[Event log] タブについては、以下をご覧ください。

レポートの分析方法については、以下をご覧ください。

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

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