パフォーマンス ツールを使用して、Web サイトのパフォーマンスを分析します。 次の 2 つの主なビューがあります。
- ホーム ページには、現在の Web ページを操作するとローカル メトリックが表示されます。
- プロフィールを記録し、パフォーマンス タイムラインを表示します。
詳細な内容:
パフォーマンス ツールを使用して Web サイトのパフォーマンスを向上させるチュートリアルについては、「ランタイム パフォーマンスの分析 (チュートリアル)」を参照してください。
概要
パフォーマンス ツールは、ページ操作のローカル メトリックを表示し、Web アプリケーションの CPU パフォーマンス プロファイルを記録できるようにします。 プロファイルを分析して、潜在的なパフォーマンスのボトルネックとリソース使用を最適化する方法を見つけます。
パフォーマンス ツールを開く
パフォーマンス ツールを開くには:
新しいウィンドウまたはタブで、「 宇宙の探検」 デモなどの Web ページに移動します。
Web ページを右クリックし、[ 検査] を選択します。
DevTools が開きます。
上部のアクティビティ バーで、[パフォーマンス] アイコン [パフォーマンス]
をクリックします。
[パフォーマンス] ツールがアクティビティ バーに表示されない場合は、[その他のツール] (![[その他のツール] アイコン](overview-images/more-tools-icon.png)
) ボタンをクリックして、[パフォーマンス] ツールを選択します。
コマンド メニューの使用
コマンド メニューを使用してパフォーマンス ツールを開くには、次の手順を実行します。
新しいウィンドウまたはタブで、「 宇宙の探検」 デモなどの Web ページに移動します。
Web ページを右クリックし、[ 検査] を選択します。
DevTools が開きます。
DevTools の右上にある [ DevTools のカスタマイズと制御] をクリックし、[ コマンドの実行] をクリックします。
または、以下を押します。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Control キー + Shift キー + P キー
コマンド メニューが開き、[コマンドの実行] >が表示されます。
「パフォーマンス」と入力を開始し、[パフォーマンスの表示 [パネル] を選択して、Enter キーを押します。
ページ操作のローカル メトリック
パフォーマンス ツールを使用して、Core Web Vitals メトリックを初期のローカル メトリック ビューに表示します。 パフォーマンス ツールのホーム ページには、レンダリングされた Web ページに関するパフォーマンス メトリックであるローカル メトリックが表示されます。
- 最大のコンテンツフル ペイント (LCP) - ページのメイン コンテンツが読み込まれた速度。
- 累積レイアウト シフト (CLS) - 最新の予期しないページ レイアウト シフトの測定値。
- 次のペイントへの対話 (INP) - ページ上の最新のユーザー操作の応答性。
最初にパフォーマンス ツールを開くと、Core Web Vitals メトリックが [ローカル メトリック] セクションの 3 つのカードに表示されます。
記録されたプロフィール タイムライン
また、[ パフォーマンス ] ツールを使用して、次のような記録されたパフォーマンス トレースを表示します。
- パフォーマンス プロファイルを記録します。
- キャプチャ設定を変更する。
- パフォーマンス レポートを分析します。 記録が発生した期間におけるページのパフォーマンスに関する情報を以下のように表示します。
- 記録中に発生したユーザー操作。
- 実行された JavaScript コード。
- 発生したスタイル設定およびレイアウト操作。
- ネットワーク要求やレイアウト シフトなど、時間の経過に伴うその他のパフォーマンス メトリック。
パフォーマンス トレースを記録すると、 ローカル メトリックではなくパフォーマンス トレースが表示されます。
ローカル メトリックまたは別のプロファイルの表示への切り替え
初期のローカル メトリック ビューの表示に切り替えるには、ライブ メトリック ページへの戻る (![[ライブ メトリック ページへの戻る] (家) アイコン](overview-images/house-icon.png){kind=icon}
) ボタンをクリックします。
別の開いた記録されたタイムラインプロファイルの表示に切り替えるには、戻るの右側にある [最近のタイムライン セッションを表示] ドロップダウンをクリックして、ライブ メトリック ページ ( ボタンをクリックします。
Core Web Vitals メトリックの監視
パフォーマンス ツールを使用して、Core Web Vitals メトリックを初期のローカル メトリック ビューに表示します。 パフォーマンス ツールのホーム ページには、レンダリングされた Web ページに関するパフォーマンス メトリックであるローカル メトリックが表示されます。
- 最大のコンテンツフル ペイント (LCP) - ページのメイン コンテンツが読み込まれた速度。
- 累積レイアウト シフト (CLS) - 最新の予期しないページ レイアウト シフトの測定値。
- 次のペイントへの対話 (INP) - ページ上の最新のユーザー操作の応答性。
用語
| 用語 | 説明 | ドキュメント |
|---|---|---|
| Web Vitals | Web 上で優れたユーザー エクスペリエンスを提供するための統合ガイダンスを提供する大規模なメトリック セット。 | Web バイタルat web.dev. |
| Core Web Vitals | すべての Web ページに適用され、すべてのサイト所有者が測定する必要がある Web Vitals のサブセット。 各コア Web バイタルは、ユーザー エクスペリエンスの個別の側面を表し、現場で測定可能であり、重要なユーザー中心の成果の現実世界のエクスペリエンスを反映しています。 | Core Web Vitals web.dev の Web Vitals で。 |
| Largest Contentful Paint (LCP) | 読み込みパフォーマンスを測定します。 優れたユーザー エクスペリエンスを提供するために、LCP はページの読み込みが最初に開始されてから 2.5 秒以内に発生する必要があります。 ユーザーが最初にページに移動したときと比較した、ビューポートに表示される最大の画像、テキスト ブロック、またはビデオのレンダリング時間。 | MDN の用語集で最大のコンテンツフル ペイント (LCP)。 MDN の LargestContentfulPaint。 |
| 累積レイアウト シフト (CLS) | 視覚的な安定性を測定します。 優れたユーザー エクスペリエンスを提供するには、ページの CLS 0.1 を維持する必要があります。 以下。 ページのライフサイクル全体で発生する予期しないレイアウト シフトごとに発生する、レイアウト シフトの最大バースト スコア。 | MDN の用語集の Cumulative Layout Shift (CLS)。 LayoutShift at MDN. |
| 次のペイント (INP) への対話 | 対話性を測定します。 優れたユーザー エクスペリエンスを提供するには、ページの INP を 200 ミリ秒以下にする必要があります。 ユーザー操作に対するページの全体的な応答性。ユーザーがページにアクセスしる期間を通じて発生するすべてのクリック、タップ、およびキーボード操作の待機時間に基づいています。 | Interaction to Next Paint (INP) in Glossary at MDN. PerformanceEventTiming at MDN. |
| ローカル メトリック、ローカル データ | LCP、CLS、INP メトリック。 これらは検査対象の Web ページでローカルにキャプチャされ、ページを操作すると更新されます。 |
デモ ページを使用する
パフォーマンス ツールの LCP、CLS、INP カードで低品質または改善が必要であるメトリックを生成するには:
新しいウィンドウまたはタブで、「 宇宙の探索 」デモなどの Web ページを開きます。
「Exploring the universe」デモ ページは、LCP、CLS、INP の各メトリックを パフォーマンス ツールで使用してパフォーマンスの問題を特定して修正する方法を説明するために、意図的にゆっくりとインタラクションを読み込んで処理するように設計されています。
Web ページを右クリックし、[ 検査] を選択します。
DevTools が開きます。
上部の アクティビティ バー で、[
[パフォーマンス ] ツールを選択します。
[パフォーマンス] ツールがアクティビティ バーに表示されない場合は、[その他のツール] () ボタンをクリックして、[パフォーマンス] ツールを選択します。ウィンドウを最大化し、デモ ページ ウィンドウの幅 (ウィンドウの幅の 60% など) にします。
デモ ページ ウィンドウが狭すぎると、一部のカードで 正常が表示され続け、意図した結果ではない緑色の値が表示されることがあります。
[次の手順] ウィンドウ [>環境設定] カード >[CPU スロットル] ドロップダウン > の [4 倍の速度低下 - 推奨] を選択します。
または、Capture設定
![Capture(青い点の付いた [設定] アイコン](overview-images/capture-settings-icon-blue-dot.png)
) >CPU 調整ドロップダウン>4 倍の速度低下 - 推奨) を選択します。[次の手順] ウィンドウ >環境設定カード >ネットワーク調整ドロップダウン> [低速 4G] を選択します。
[次の手順] ウィンドウ >環境設定) を選択しカード > [ネットワーク キャッシュを無効にする] チェック ボックスをオンにします。
アドレス バーの左側にある [更新] ボタンを右クリック (または長押し) して、[キャッシュをクリアしてハード リフレッシュ] を選択します。
これにより、ローカル キャッシュからではなくサーバーからイメージが再度読み込まれるようになります。
LCP カードと CLS カードには、緑色の値と良好ではなく、オレンジ色の値と改善が必要、または赤色の値と悪いと表示されます。
銀河画像のレンダリングが終了した後も LCP または CLS カードが緑色のままで正常であると表示されている場合は、ウィンドウを最大化し、デモ ページ ウィンドウを広げます。
LCP カードは、銀河画像の読み込みに時間がかかったことを示しています。 このカードには、緑色の値と良い値の代わりに、オレンジ色の値と改善が必要、または赤色の値と悪いと表示されます。 エンジンは、この画像をレンダリングする最大のアイテムとして識別します。
LCP カードでメトリック値にカーソルを合わせると、ヒントに情報が表示されます。
CLS カードは、レイアウトの突然の予期しないジャンプがユーザーに悪影響を与える可能性があることを示しています。 これは、イメージの読み込みに時間がかかることも原因です。 設計上、デモ Web ページで画像の高さを指定することが無視されるため、ページは最初は画像用に多くの領域を予約せずに読み込まれます。 画像が表示され始めると、その下のコンテンツが突然下にジャンプします。
CLS カードでメトリック値にカーソルを合わせると、ヒントに情報が表示されます。
銀河の画像がレンダリングを完了したら、レンダリングされたデモ ページで、右側の [発見] 列の見出しの 1 つ ( Heliocentric Theory (1543) など) をクリックします。
INP カードは、値を表示しないものから、オレンジ色の値と改善が必要、または赤色の値と悪い値に変わります。 INP 値が表示されます。
INP カードでメトリック値にカーソルを合わせると、ヒントに情報が表示されます。
INP カードで、INP 値をクリックします。
デモ ページでは、ディスカバリー カードはゆっくりと展開して再レンダリングするように設計されているため、見出しをクリックしてから展開されたカード コンテンツをレンダリングするまでに長い時間がかかります。 遅延は 100 ミリ秒から 1000 ミリ秒の間のランダムな値であるため、INP 値が高くなります。
ローカル メトリック カードの下に、[相互作用] タブと [レイアウト シフト] タブが作成されます。
[相互作用] タブ
[ インタラクション] タブには、Web ページとのインタラクションに関する情報が表示されます。
![[相互作用] タブ](overview-images/interactions-tab.png)
[ 相互作用 ] タブには次のものが含まれます。
- フェーズ。
- 要素。
- タイミング。
[相互作用] タブをクリアするには、[相互作用] タブの右側にある [現在のログをクリアする] (
) ボタンをクリックします。
[レイアウト シフト] タブ
[ レイアウト シフト ] タブには、レイアウト シフトに関する情報が表示されます。
![[レイアウト シフト] タブ](overview-images/layout-shifts-tab.png)
[ レイアウト シフト ] タブには次の機能が含まれます。
- スコア。
- 要素。
パフォーマンス レポートをCaptureして分析する
次のセクションでは、プロファイルの記録、キャプチャ設定の変更、レポートの分析方法に関するガイダンスに従ってください。
パフォーマンス プロファイルを記録する
記録する準備ができたら、 パフォーマンス ツールに次のオプションが表示されます。
- パフォーマンス機能リファレンスでランタイム パフォーマンスを記録します。
- パフォーマンス機能リファレンスで読み込みパフォーマンスを記録します。
- Capture screenshots while recording in パフォーマンス機能リファレンス.
- パフォーマンス機能リファレンスで記録中にガベージ コレクションを強制します。
- パフォーマンス機能リファレンスで記録を保存して共有します。
- パフォーマンス機能リファレンスで記録を読み込みます。
- パフォーマンス機能リファレンスで前の記録をクリアします。
キャプチャ設定を変更する
Capture 設定を使用すると、DevTools がパフォーマンス記録をキャプチャする方法を変更し、レポートに追加情報を提供できます。
Capture settings(
)ボタンをクリックして、Capture設定メニューにアクセスします。
[Capture]設定メニューから次のオプションを選択します。
[ JavaScript サンプルを無効にする ] チェック ボックスをオンにします: メイン トラックに表示される JavaScript 呼び出し履歴のうち、記録中に呼び出されるものの記録を無効にします。 パフォーマンス オーバーヘッドを低減します。 パフォーマンス機能リファレンスの「JavaScript サンプルを無効にする」を参照してください。
[ 高度なレンダリングのインストルメンテーションを有効にする (低速)] チェック ボックスを選択します: 高度なペイント インストルメンテーションをキャプチャします。 パフォーマンスを大幅に低下させます。 パフォーマンス機能リファレンスの高度なペイント インストルメンテーションを有効にするを参照してください。
[ Enable CSS selector stats (slow)] (CSS セレクターの統計を有効にする (低速) ) チェック ボックスを選択します。 CSS セレクターの統計をキャプチャします。 パフォーマンスを大幅に低下させます。 DevTools の新機能 (Microsoft Edge 131) のパフォーマンス ツール サイドバーで CSS セレクター コストを表示するを参照してください。
CPU スロットル: 遅い CPU 速度をシミュレートします。 「パフォーマンス機能リファレンス」の「記録中に CPU をスロットルする」を参照してください。
ネットワーク調整: 遅いネットワーク速度をシミュレートします。 「パフォーマンス機能リファレンス」の「記録中にネットワークを調整する」を参照してください。
パフォーマンス レポートを分析する
パフォーマンス ツールの使用方法の完全なガイドについては、パフォーマンス機能リファレンスの「パフォーマンス記録の分析」を参照してください。
パフォーマンス レポートに移動するには:
「パフォーマンス機能リファレンス」で記録をナビゲートするを参照してください。
パフォーマンス機能リファレンスの検索アクティビティを参照してください。
パフォーマンス機能リファレンスの「イベント イニシエーターの追跡」を参照してください。
ワークフローにとって重要なことに集中するには:
パフォーマンス機能リファレンスで録画の一部を拡大したり、ズーム レベルを切り替えたりします。
ボトムアップ タブ、呼び出しツリータブ、イベント ログ タブの詳細を確認するには、次の手順を実行します。
- パフォーマンス機能リファレンスでテーブル内のアクティビティを表示します。
パフォーマンス レポートを分析するには:
- パフォーマンス機能リファレンスでメイン スレッド アクティビティを表示します。
- パフォーマンス機能リファレンスでフレーム チャートを読み取る。
- パフォーマンス機能リファレンスでスクリーンショットを表示します。
- パフォーマンス機能リファレンスでメモリ メトリックを確認します。
- パフォーマンス機能リファレンスで記録の一部の期間を表示します。
- スタイルの再計算イベント中の CSS セレクターのパフォーマンスを分析します。
- パフォーマンス機能リファレンスで 1 秒あたりのフレーム数 (FPS) を分析します。
- パフォーマンス記録イベント リファレンス
これらのツールでパフォーマンスを向上させる
Web サイトのパフォーマンスを向上させるのに役立つその他のツールを見つけてください:
| ツール | 記事 |
|---|---|
| ライトハウス ツール | Lighthouse を使用して Web サイトの速度を最適化する |
| メモリ ツール | メモリの問題を修正する |
| パフォーマンス ツール >Insights タブ | パフォーマンス機能リファレンスで実用的な分析情報を取得します。 |
| レンダリング ツール | 表示オプションや視覚障穣が異なる Web ページの外観を確認するためのレンダリング ツール |
| 問題 ツール | 問題ツールを使用して問題を検索して修正する |
| パフォーマンス ツール | パフォーマンス機能リファレンスでレイヤー情報を表示する |
関連項目
- ユニバースの デモ ページの探索
注:
このページの一部の情報は、 Google によって 作成および共有されている著作物に基づいており、 Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Dale St. Marthe と Sofia Emelianova によって作成されています。
この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。