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

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

Dale St. Marthe

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

概要

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

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

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

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

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

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

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

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

Core Web Vitals をリアルタイムでモニタリングする

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

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

[パフォーマンス] パネルには、キャプチャされたインタラクションのリストが 3 つの指標カードに表示されます。リストを消去するには、[] [クリア] をクリックします。

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

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

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

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

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

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

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

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

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

環境を構成するには:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テーブルのアクティビティを表示する

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

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

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

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

概要