レンダリング パフォーマンスに関する問題を検出する

Sofia Emelianova
Sofia Emelianova
GitHub
Kayce Basques

レンダリング パフォーマンスの問題を特定するには、[レンダリング] タブのパフォーマンス関連オプションの参照をご覧ください。

塗り替えられた部分をペイントで点滅させてハイライト表示する

このオプションをオンにすると、再描画が発生するたびに画面が緑色で点滅します。

再塗装中のエリアを表示するには:

  1. このデモで[レンダリング] タブを開き、[ペイントの点滅] をオンにします。
  2. 緑色でハイライト表示された再ペイントを確認します。
ペイントフラッシュ

別のページで、画面全体が緑色で点滅する場合や、ペイントされるべきではなかった画面領域が緑色で点滅する場合は、詳しく調査することを検討してください。

レイアウト シフト領域をハイライト表示

レイアウト シフトは予期しない再ペイントを引き起こし、目障りであるだけでなく有害な場合があります。

レイアウトの不安定性がユーザーに悪影響を及ぼす可能性があることを示すスクリーンキャスト。

ページ上のレイアウトのずれの場所とタイミングを表示するには:

  1. [レンダリング] タブを開き、[レイアウト シフトの領域] のチェックボックスをオンにします。

  2. ページを更新します。レイアウト シフトの領域は紫色で一時的にハイライト表示されます。

レイアウト シフト

レイヤの枠線付きのレイヤとタイルを表示する

[Layer Borders] を使用して、レイヤの枠線とタイルのオーバーレイをページ上に表示します。

レイヤの枠線を有効にするには:

  1. [レンダリング] タブを開き、[レイヤの境界線] をオンにします。
  2. レイヤの枠線はオレンジとオリーブ、タイルはシアンで表示されます。

レイヤの枠線とタイル

色分けの説明については、debug_colors.cc のコメントをご覧ください。

フレーム レンダリングの統計情報を使用して 1 秒あたりのフレーム数をリアルタイムで表示する

[Frame render stats] は、ビューポートの右上に表示されるオーバーレイです。

[フレーム レンダリング統計情報] を開くには:

  1. [レンダリング] タブを開き、[フレーム レンダリングの統計情報] チェックボックスをオンにします。
  2. ページの右上にある統計情報を確認します。

フレーム レンダリングの統計情報

フレーム レンダリングの統計情報のオーバーレイには、次の情報が表示されます。

  • ページの実行中の 1 秒あたりのフレーム数のリアルタイム推定値。
  • フレーム タイムラインをプロットとして表示する。フレームタイプは次の 3 つです。
    • 正常にレンダリングされたフレーム（青い線）
    • 部分的に表示されたフレーム（黄色の線）
    • フレーム落ち（赤い線）。
  • GPU ラスターの状態（オンまたはオフ）。詳細については、GPU ラスター化の取得方法をご覧ください。
  • GPU メモリ使用量: 使用済みメモリと最大メモリ（MB）。

スクロールのパフォーマンスの問題を特定する

[スクロールのパフォーマンスの問題] を使用して、スクロールに関連するイベント リスナーがあり、ページのパフォーマンスに悪影響を与える可能性があるページの要素を特定します。

問題の可能性がある要素を表示するには:

  1. [レンダリング] タブを開き、[スクロールのパフォーマンスの問題] を確認します。
  2. 問題の原因となる可能性のある要素がハイライト表示されます。

[スクロールのパフォーマンスの問題] は、スクロールのパフォーマンスに悪影響を与える可能性があるイベント リスナーが複数あることを示しています。

Core Web Vitals を表示する

Web Vitals は、ウェブで優れたユーザー エクスペリエンスを提供するために不可欠な品質シグナルについての統一されたガイダンスを提供する Google の取り組みです。

Core Web Vitals は、すべてのウェブページに適用されるウェブに関する指標のサブセットです。ウェブに関する主な指標は、ユーザー エクスペリエンスのさまざまな側面を表し、フィールドで測定可能で、ユーザー中心の重要な成果の実際のエクスペリエンスを反映しています。Core Web Vitals には次のものがあります。

  • Largest Contentful Paint（LCP）: 読み込みパフォーマンスを測定します。優れたユーザー エクスペリエンスを提供するには、ページの読み込み開始から 2.5 秒以内に LCP を実現する必要があります。
  • Interaction to Next Paint（INP）: インタラクティブ性を測定します。優れたユーザー エクスペリエンスを提供するには、ページの INP を 200 ミリ秒以下にする必要があります。
  • Cumulative Layout Shift（CLS）: 視覚的安定性を測定します。優れたユーザー エクスペリエンスを提供するには、ページの CLS を 0.1 未満に維持する必要があります。

Chrome 拡張機能「Web Vitals」を使用して、ページの Core Web Vitals の値を確認します。