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

Sofia Emelianova
Sofia Emelianova
GitHub
Kayce Basques

[レンダリング] タブのパフォーマンス関連オプションのリファレンスで、レンダリング パフォーマンスの問題を見つけます。

ペイント 点滅で再ペイントされた領域をハイライトする

このオプションをオンにすると、再ペイントが行われるたびに Chrome で画面が緑色で点滅します。

再ペイントされている領域を表示するには:

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

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

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

レイアウト シフトは予期せぬ再ペイントを引き起こし、煩わしいだけでなく有害となることもあります。

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

ページ上のレイアウト シフトの位置とタイミングを表示するには:

  1. [Rendering] タブを開き、[Layout Shift Regions] チェックボックスをオンにします。

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

レイアウト シフト

レイヤと境界線のあるタイルを表示する

[レイヤの枠線] を使用すると、レイヤの枠線とタイルをページの上部に重ねて表示できます。

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

  1. [レンダリング] タブを開き、[レイヤの枠線] チェックボックスをオンにします。
  2. レイヤの枠線はオレンジ色とオリーブ色、タイルはシアン色になります。

レイヤの枠線とタイル

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

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

[フレーム レンダリング統計] は、ビューポートの右上に表示されるオーバーレイです。

[Frame render stats] を開くには:

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

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

[Frame render stats] オーバーレイには、次の情報が表示されます。

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

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

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

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

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

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

Core Web Vitals の表示

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

Core Web Vitals は、すべてのウェブページに適用される Web Vitals のサブセットです。Core Web Vitals は、それぞれユーザー エクスペリエンスの個別の側面を表し、現場で測定可能です。また、ユーザー中心のクリティカルな結果に関する実際のエクスペリエンスを反映しています。Core Web Vitals には次のものがあります。

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

ページの Core Web Vitals の値を表示するには、Chrome 拡張機能の Web Vitals を使用します。