次の方法で共有

パフォーマンス ツール: Web サイトのパフォーマンスを分析する

パフォーマンス ツールを使用して、Web サイトのパフォーマンスを分析します。 次の 2 つのメイン ビューがあります。

  • ホーム ページには、現在の Web ページと対話するときにローカル メトリックが表示されます。
  • プロファイルを記録し、パフォーマンス タイムラインを表示します。

詳細な内容:

パフォーマンス ツールを使用して Web サイトのパフォーマンスを向上させるチュートリアルについては、「ランタイム パフォーマンスの分析 (チュートリアル)」を参照してください。

概要

パフォーマンス ツールでは、ページ操作のローカル メトリックが表示され、Web アプリケーションの CPU パフォーマンス プロファイルを記録できます。 プロファイルを分析して、潜在的なパフォーマンスのボトルネックと、リソースの使用を最適化する方法を見つけます。

パフォーマンス ツールを開く

パフォーマンス ツールを開くには:

  1. 新しいウィンドウまたはタブで、 宇宙の探索 デモなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. 上部のアクティビティ バーで、[パフォーマンス] アイコン [パフォーマンス] ツールをクリックします。

    [パフォーマンス] アイコン [パフォーマンス] ツールがアクティビティ バーに表示されない場合は、[その他のツール] ([その他のツール] アイコン) ボタンをクリックし、[パフォーマンス] ツールを選択します。

コマンド メニューの使用

コマンド メニューを使用してパフォーマンス ツールを開くには:

  1. 新しいウィンドウまたはタブで、 宇宙の探索 デモなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. DevTools の右上にある [ カスタマイズと制御] DevTools をクリックし、[ コマンドの実行] をクリックします。

    または、次のキーを押します。

    • macOS: Command + Shift + P
    • Windows、Linux、ChromeOS: Control + Shift + P

    [コマンド メニュー] が開き、[Run >Command] と読み取ります。

  4. パフォーマンスの入力を開始し、[パフォーマンスの表示] [パネル] を選択し、Enter キーを押します。

    [パフォーマンス] が入力されたコマンド メニュー

ページ操作のローカル メトリック

パフォーマンス ツールを使用して、初期の [ローカル メトリック] ビューで Core Web Vitals メトリックを表示します。 パフォーマンス ツールのホーム ページには、レンダリングされた Web ページに関するパフォーマンス メトリックであるローカル メトリックが表示されます。

  • 最大のコンテンツフル ペイント (LCP) - ページのメインコンテンツの読み込み速度。
  • 累積レイアウトシフト (CLS) - 最新の予期しないページ レイアウトシフトの測定値。
  • Next Paint (INP) の操作 - ページ上の最新のユーザー操作の応答性。

パフォーマンス ツールを最初に開くと、[ローカル メトリック] セクションの 3 つのカードに Core Web Vitals メトリックが表示されます。

ローカル メトリックを示すパフォーマンス ツールのホーム ページ

記録されたプロファイル タイムライン

また、 パフォーマンス ツールを使用して、記録されたパフォーマンス トレースを表示します。これには、次のものが含まれます。

  • パフォーマンス プロファイルを記録します。
  • キャプチャ設定を変更します。
  • パフォーマンス レポートを分析します。 記録が発生した期間のページのパフォーマンスに関する情報を表示します。次に例を示します。
    • 記録中に発生したユーザー操作。
    • 実行された JavaScript コード。
    • 発生したスタイル設定とレイアウト操作。
    • ネットワーク要求やレイアウトシフトなど、時間の経過に伴うその他のパフォーマンス メトリック。

パフォーマンス トレースを記録すると、 ローカル メトリックの代わりにパフォーマンス トレースが表示されます。

ローカル メトリックまたは別のプロファイルの表示に切り替える

初期の [ローカル メトリック] ビューの表示に切り替えるには、ライブ メトリック ページへの戻る ([ライブ メトリック ページに戻る] (ハウス) ボタン) をクリックします。

開いている別の記録済みプロファイル タイムラインの表示に切り替えるには、ライブ メトリック ページに戻るの右側にある [最近のタイムライン セッションを表示する] ドロップダウン ([ライブ メトリック ページに戻る] (ハウス) ボタン) をクリックします。

記録されたプロファイルを表示するパフォーマンス ツール

Core Web Vitals メトリックを監視する

パフォーマンス ツールを使用して、初期の [ローカル メトリック] ビューで Core Web Vitals メトリックを表示します。 パフォーマンス ツールのホーム ページには、レンダリングされた Web ページに関するパフォーマンス メトリックであるローカル メトリックが表示されます。

  • 最大のコンテンツフル ペイント (LCP) - ページのメインコンテンツの読み込み速度。
  • 累積レイアウトシフト (CLS) - 最新の予期しないページ レイアウトシフトの測定値。
  • Next Paint (INP) の操作 - ページ上の最新のユーザー操作の応答性。

用語

用語 説明 ドキュメント
Web Vitals Web 上で優れたユーザー エクスペリエンスを提供するための統一されたガイダンスを提供する大規模なメトリック セット。 Web Vitals
Core Web Vitals すべての Web ページに適用され、すべてのサイト所有者によって測定される Web Vitals のサブセット。 各 Core Web Vitals は、ユーザー エクスペリエンスの個別のファセットを表し、現場で測定可能であり、重要なユーザー中心の結果の実際のエクスペリエンスを反映しています。 Web Vitals のコア Web バイタル
最大のコンテンツフル ペイント (LCP) 読み込みパフォーマンスを測定します。 適切なユーザー エクスペリエンスを提供するには、ページの読み込みが最初に開始されてから 2.5 秒以内に LCP が発生する必要があります。 ビューポートに表示される最大のイメージ、テキスト ブロック、またはビデオのレンダリング時間。ユーザーが最初にページに移動したときを基準とします。 最大のコンテンツフル ペイント (LCP)、 LCP の最適化
累積レイアウトシフト (CLS) 視覚的安定性を測定します。 優れたユーザー エクスペリエンスを提供するには、ページで CLS 0.1 を維持する必要があります。 以下。 ページのライフサイクル全体で予期しないレイアウトシフトが発生するたびに発生するレイアウトシフトスコアの最大バースト。 累積レイアウトシフト (CLS)、 CLS の最適化
次のペイントへの相互作用 (INP) 対話機能を測定します。 優れたユーザー エクスペリエンスを提供するには、ページの INP が 200 ミリ秒以下である必要があります。 ユーザーがページにアクセスした期間を通じて発生するすべてのクリック、タップ、キーボード操作の待機時間に基づいて、ユーザー操作に対するページの全体的な応答性。 次のペイント (INP) への対話、 INP の最適化
ローカル メトリック、ローカル データ LCP、CLS、および INP メトリック。 これらは検査された Web ページでローカルにキャプチャされ、ページを操作するときに更新されます。

デモ ページを使用する

パフォーマンス ツールの LCP、CLS、および INP カードで低品質または改善が必要なメトリックを生成するには、次の手順を実行します。

  1. 新しいウィンドウまたはタブで、 宇宙の探索 デモなどの Web ページを開きます。

    「 宇宙の探索」 デモ ページは、 パフォーマンス ツールで LCP、CLS、INP メトリックを使用してパフォーマンスの問題を特定および修正する方法を示すために、意図的に対話を読み込んで処理するように設計されています。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. 上部のアクティビティ バーで、[パフォーマンス] アイコン [パフォーマンス] ツールを選択します。

    [パフォーマンス] アイコン [パフォーマンス] ツールがアクティビティ バーに表示されない場合は、[その他のツール] ([その他のツール] アイコン) ボタンをクリックし、[パフォーマンス] ツールを選択します。

  4. ウィンドウを最大化し、デモ ページ ウィンドウの幅 (ウィンドウの幅の 60% など) を広くします。

    デモ ページ ウィンドウが狭すぎる場合は、一部のカードが 正常に表示され続け、緑色の値が表示されることがあります。これは意図した結果ではありません。

  5. [次のステップ] ウィンドウ> [環境の設定] カード > [CPU 調整] ドロップダウンを選択>[4 倍の速度低下 - 推奨] を選択します。

    または、[ Capture settings (Capture settings icon with a blue dot)] を選択 >CPU 調整 ドロップダウン >4x スローダウン - 推奨されます。

  6. [次の手順] ウィンドウ >[環境の設定] カード > [ネットワーク調整] ドロップダウンを選択> [低速 4G] を選択します。

  7. [次の手順] ウィンドウ >[環境の設定] を選択カード >、[ネットワーク キャッシュを無効にする] チェック ボックスをオンにします。

    ローカル メトリックの結果: 低品質。改善が必要です。と貧しい

  8. アドレス バーの左側にある [更新] ボタンを右クリック (または長押し) し、[空のキャッシュとハード更新] を選択します。

    これにより、ローカル キャッシュからではなく、サーバーからイメージが再び読み込まれます。

    LCP カードと CLS カードはオレンジ色の値を示し、改善が必要です。または、緑色の値と良好な値ではなく、赤い値と低い値が必要です。

  9. LCP または CLS カードが緑色のままで、ギャラクシー イメージのレンダリングが完了した後に良好と表示される場合は、ウィンドウを最大化し、デモ ページ ウィンドウを広くします。

    LCP カードは、銀河イメージの読み込みに長い時間がかかったことを示しています。 カードはオレンジ色の値を示し、改善が必要な場合は、緑色の値と良好な値ではなく、赤い値と低い値が必要です。 エンジンは、このイメージをレンダリングする最大の項目として識別します。

  10. LCP カードで、メトリック値にカーソルを合わせると、ヒントに情報が表示されます。

    CLS カードは、レイアウトの突然の予期しないジャンプがユーザーに悪影響を与える可能性があることを示しています。 これは、イメージの読み込みに時間がかかることも原因です。 設計上、デモ Web ページはイメージの高さを指定することを怠るので、ページは最初に読み込まれますが、画像の領域を予約する必要はありません。 画像が表示され始めると、その下のコンテンツが突然下にジャンプします。

  11. CLS カードで、メトリック値にカーソルを合わせると、ヒントに情報が表示されます。

  12. 銀河イメージのレンダリングが完了したら、レンダリングされたデモ ページで、右側の Discoveries 列の見出しの 1 つ (Heliocentric Theory (1543) など) をクリックします。

    INP カード、値が表示されない、オレンジ色の値が表示される、改善が必要な、または赤い値と低い値に変わります。 INP 値が表示されます。

  13. INP カードでメトリック値にマウス ポインターを合わせると、ヒントに情報が表示されます。

  14. INP カードで、INP 値をクリックします。

    デモ ページの Discoveries カードは、展開と再レンダリングが遅く、見出しをクリックしてから展開されたカードコンテンツをレンダリングするまでに長い時間がかかるように設計されています。 遅延は 100 ミリ秒から 1000 ミリ秒のランダムな値であり、INP 値が高くなります。

    [ローカル メトリック] カードの下に、[操作] タブと [レイアウトシフト] タブが表示されます。

[操作] タブ

[ 操作 ] タブには、Web ページとの対話に関する情報が表示されます。

[相互作用] タブ

[ 相互作用 ] タブには、次のものが含まれます。

  • フェーズ。
  • 元素。
  • タイミング。

[操作] タブをオフにするには、[操作] タブの右側にある [現在のログをクリアする] ([クリア] アイコン) ボタンをクリックします。

[レイアウトシフト] タブ

[ レイアウトシフト ] タブには、レイアウトシフトに関する情報が表示されます。

[レイアウトシフト] タブ

[ レイアウトシフト ] タブには、次のものが含まれます。

  • スコア。
  • 元素。

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

次のセクションでは、プロファイルの記録、キャプチャ設定の変更、レポートの分析方法に関するガイダンスに従います。

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

記録する準備ができたら、 パフォーマンス ツールに次のオプションが表示されます。

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

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

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

  • [ JavaScript サンプルを無効にする ] チェック ボックスをオンにします。記録中に呼び出されるメイン トラックに表示される JavaScript 呼び出し履歴の記録を無効にします。 パフォーマンスのオーバーヘッドを削減します。 パフォーマンス機能リファレンスの 「JavaScript サンプルを無効にする 」 を参照してください。

  • [ 高度なレンダリング インストルメンテーションを有効にする (低速)] チェック ボックスをオンにします。高度なペイント インストルメンテーションをキャプチャします。 パフォーマンスを大幅に低下させます。 パフォーマンス機能リファレンスの 「高度なペイント インストルメンテーションを有効にする 」 を参照してください。

  • [ CSS セレクター統計を有効にする (低速)] チェック ボックスをオンにします。CSS セレクターの統計情報をキャプチャします。 パフォーマンスを大幅に低下させます。 「DevTools の新機能 (Microsoft Edge 131)」の「パフォーマンス ツールサイドバーで CSS セレクターのコストを表示する」を参照してください。

  • CPU スロットル: 低速な CPU 速度をシミュレートします。 パフォーマンス機能リファレンスの「記録中に CPU を調整する」を参照してください。

  • ネットワーク調整: 低速なネットワーク速度をシミュレートします。 パフォーマンス機能リファレンスの「記録中にネットワークを調整する」を参照してください。

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

パフォーマンス ツールの使用方法に関する完全なガイドについては、 パフォーマンス 機能リファレンスの パフォーマンス記録の分析 に関する ページを参照してください。

パフォーマンス レポートを移動するには:

ワークフローにとって重要なことに焦点を当てるには:

ボトムアップ、コール ツリー、およびイベント ログ タブについて学習するには、次の手順を実行します。

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

これらのツールを使用してパフォーマンスを向上させる

Web サイトのパフォーマンスを向上させるのに役立つその他のツールを確認します。

ツール 記事
Lighthouse ツール Lighthouse を使用して Web サイトの速度を最適化する
メモリ ツール メモリの問題を修正する
パフォーマンス ツール >[Insights] タブ パフォーマンス機能リファレンスで実用的な分析情報を取得します。
レンダリング ツール さまざまな表示オプションや視覚障害を含む Web ページの外観を確認するためのレンダリング ツール
問題 ツール 問題ツールを使用して問題を見つけて修正する
パフォーマンス ツール パフォーマンス機能リファレンスでレイヤー情報を表示する

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、デール・セント・マルテとソフィア・エメリアノによって執筆されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。