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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概要

[パフォーマンス] パネルでは、ウェブ アプリケーションの 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] ダイアログで、プライバシーの開示に注意し、[OK] をクリックします。

    高度: 開発環境と本番環境間のマッピングを設定します...

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

    1. ダイアログ ウィンドウで [Advanced] セクションを展開し、[+ New] をクリックします。

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

      詳細セクションに表示された開発環境オリジンと本番環境オリジンのマッピング。

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

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

      設定後にフィールド データの取得設定を変更するには、[フィールド データ] >設定

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

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

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

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

前のセクションで説明したようにフィールド データの取得を設定すると、[Performance] パネルに、ユーザーのエクスペリエンスに合わせて環境を構成するための推奨事項が表示されます。

環境を構成するには:

  1. 各指標カードで、[ローカルテストの条件を検討する] セクションがある場合はそれを開き、推奨事項を確認します。

    「ローカルテストの条件を検討する」展開された各指標カード。

    この例のように、ユーザー エクスペリエンスに合わせるために、一般的なデスクトップ画面サイズを使用し、CPU とネットワークをスロットリングすることをおすすめします。

  2. この例の環境構成と一致させるには、次のようにします。

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

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

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

    指標スコアが、ユーザー エクスペリエンスと類似したものになったようです。そのため、[ローカルテストの条件を検討する] セクションが指標カードから削除されました。

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

パフォーマンス レポートを取得して分析する

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

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

録画の準備が整ったら、[Performance] パネルに次のオプションが表示されます。

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

キャプチャ設定では、DevTools によるパフォーマンス レコーディングのキャプチャ方法を変更したり、レポートに追加情報を表示したりできます。[キャプチャ設定] をクリックします。] をクリックして [キャプチャ設定] メニューにアクセスします。

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

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

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

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

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

ワークフローで重要なことに集中する方法については、以下をご覧ください。

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

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

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

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