このページは Cloud Translation API によって翻訳されました。

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

Dale St. Marthe

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

概要

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

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

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

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

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

[パフォーマンス] パネルを開くには、DevTools を開くと、上部にあるタブから [パフォーマンス] を選択します。

または、コマンドメニューを使用して [パフォーマンス] パネルを開く方法は次のとおりです。

DevTools を開きます。
以下のボタンを押してコマンドメニューを開きます。
macOS: Command+Shift+P
Windows、Linux、ChromeOS: Ctrl+Shift+P
「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 レポートからフィールドデータを取得し、サイトのユーザーエクスペリエンスとローカル指標を比較することもできます。

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

[パフォーマンス] > [次のステップ] > [フィールドデータ] で、[設定] をクリックします。
[フィールドデータの取得を構成する] ダイアログで、プライバシーに関する開示を確認し、[OK] をクリックします。
上級者向け: 開発環境と本番環境のマッピングを設定する

必要に応じて、最も関連性の高いフィールドデータを自動的に取得するために、開発環境オリジンと本番環境オリジンの間に（複数の）マッピングを設定できます。
1. ダイアログウィンドウで [詳細] セクションを開き、[+ 新規] をクリックします。
2. マッピングテーブルに、開発環境と本番環境の URL を入力し、[+] をクリックします。
  
  たとえば、http://localhost:8080 を https://example.com にマッピングすると、localhost:8080/page1 に移動したときに example.com/page1 のフィールドデータが表示されます。
  
  また、なんらかの理由でフィールドデータを自動的に取得できない場合は、[以下の URL のフィールドデータを常に表示する] をオンにして URL を指定できます。[パフォーマンス] パネルでは、まずこの URL のフィールドデータを取得しようとします。その後、どのページに移動しても、このフィールドデータが表示されます。
  
  セットアップ後にフィールドデータの取得設定を変更するには、[フィールドデータ] > [設定] をクリックします。
フィールドデータの取得が設定されると、[パフォーマンス] パネルに、ローカル指標のスコアとユーザーが体験するスコアの比較が表示されます。収集期間は、右側の [フィールドデータ] セクションで確認できます。

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

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

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

環境を構成するには:

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

この例では、ユーザーエクスペリエンスに近づけるため、一般的なパソコンの画面サイズを使用し、CPU とネットワークをスロットリングすることをおすすめします。
この例の環境構成に合わせて、次のようにします。
1. ビューポートを一般的な画面サイズ（720p や 1080p など）に設定します。特定のデバイスと画面サイズをエミュレートするには、[要素] パネルの [デバイスモード] を使用します。
2. この例のウェブサイトのユーザーの 82% は、パソコンでブラウジングしています。ローカル指標スコアと正しいフィールドデータを比較するには、[フィールドデータ] > [デバイス] プルダウンリストから [デスクトップ] を選択します。
3. [環境設定] セクションで、[ネットワーク] プルダウンリストを [高速 4G] などに設定し、[CPU] を [20 倍減速] などに設定します。同じセクションで [Disable network cache] のをオンにすることもできます。
環境を構成したら、ページを再読み込みし、ページを操作してローカル INP を取得し、指標スコアを再度比較します。

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

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

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

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

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

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

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

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

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

JavaScript のサンプルを無効にする: 記録中に呼び出される [Main] トラックに表示される JavaScript 呼び出しスタックの記録を無効にします。パフォーマンスオーバーヘッドを削減できます。
高度な描画パフォーマンスの計測（低速）を有効にする: 高度な描画パフォーマンスの計測をキャプチャします。パフォーマンスが大幅に低下する。
CSS セレクタの統計情報を有効にする（遅い）: CSS セレクタの統計データを取得します。パフォーマンスが大幅に低下する。
CPU スロットリング: CPU 速度を遅くします。
ネットワークスロットリング: ネットワーク速度が遅い状態をシミュレートします。
ハードウェアの同時実行: navigator.hardwareConcurrency によって報告される値を構成します。

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

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

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

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

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

[ボトムアップ] タブ、[呼び出しツリー] タブ、[イベントログ] タブについて詳しくは、以下をご覧ください。

アクティビティを表形式で表示する

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

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

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

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

概要