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

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 に加えて、ネットワーク接続とデバイスを使用してページのコア ウェブ バイタルの概要を完全に把握できます。

[インタラクション] タブと [レイアウト シフト] タブの 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. [環境設定] セクションで、[ネットワーク] プルダウン リストを [高速 4G] などに設定し、[CPU] を [20 倍減速] などに設定します。同じセクションで [ネットワーク キャッシュを無効にする] の をオンにすることもできます。

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

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

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

これで、ウェブサイトのウェブに関する主な指標の改善を開始できます。

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

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

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

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

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

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

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

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

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

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

レポートの操作方法:

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

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

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

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

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

ウェブサイトのパフォーマンス向上に役立つその他のパネルは次のとおりです。