パフォーマンス分析情報: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得できます

Jecelyn Yeen

Sofia Emelianova

[パフォーマンス分析情報] パネルを使用すると、ウェブサイトのパフォーマンスに関する実用的な分析情報とユースケース主導の分析情報を取得できます。

概要

[パフォーマンス分析情報] パネルでは、次のことができます。

ページの読み込みパフォーマンスを記録して測定する。
ウェブバイタルのパフォーマンス指標を表示する。
ネットワークアクティビティを表示する。
CPU とネットワークの速度が遅い状態をシミュレートします。
録音をインポート、エクスポートします。

新しいパネルが必要な理由

新しい [パフォーマンス分析情報] パネルは、既存の [パフォーマンス] パネルを使用する際にデベロッパーが抱える次の 3 つの課題に対処するための試験運用です。

情報が多すぎる。再設計された UI では、[パフォーマンス分析情報] パネルでデータが効率化され、関連性の高い情報のみが表示されます。
ユースケースを区別するのが難しい。[パフォーマンス分析情報] パネルは、ユースケース主導の分析をサポートしています。現時点ではページの読み込みのユースケースのみがサポートされていますが、今後、フィードバックに基づいて、インタラクティビティなど、さまざまなユースケースが追加される予定です。
効果的に使用するには、ブラウザの仕組みに関する深い専門知識が必要です。[パフォーマンスに関する分析情報] パネルには、[分析情報] ペインの重要な分析情報がハイライト表示され、問題の解決方法に関する行動につながるフィードバックが表示されます。

はじめに

このチュートリアルでは、[パフォーマンス分析情報] パネルを使用してページの読み込みパフォーマンスを測定し、理解する方法について説明します。このチュートリアルの続きを読むか、上の動画をご覧ください。

[パフォーマンス分析情報] パネルを開く

DevTools を開きます。
その他アイコン > [その他のツール] > [パフォーマンス分析情報] をクリックします。

または、コマンドメニューを使用して、[パフォーマンスの分析情報] パネルを開きます。

パフォーマンスを記録する

[パフォーマンス分析情報] パネルでは、一般的なパフォーマンスとユースケース主導のパフォーマンス（ページの読み込みなど）を記録できます。

新しいタブでこのデモページを開き、ページでパフォーマンス分析情報パネルを開きます。
録画中にネットワークと CPU をスロットリングできます。このチュートリアルでは、[キャッシュを無効にする] をオンにし、プルダウンメニューで [CPU] を [4 倍の減速] に設定します。

重要なポイント: スロットリングはパソコンの性能に相対的に影響します。たとえば、4 倍の減速オプションを使用すると、CPU の動作速度が通常の 4 分の 1 になります。モバイルデバイスのアーキテクチャはパソコンやノートパソコンのアーキテクチャと大きく異なるため、DevTools でモバイルデバイスの CPU を完全にシミュレートすることはできません。
[ページ読み込みを測定] をクリックします。DevTools は、ページの再読み込み中にパフォーマンス指標を記録し、ページの読み込みが完了してから数秒後に自動的に記録を停止します。

キーポイント: ウェブページの一般的なパフォーマンスを測定する場合は、[録画を開始] を使用します。ページを操作し、[録画を停止] を手動でクリックして録画を停止します。

パフォーマンス録画を再生する

下部のコントロールを使用して、録画の再生を操作します。

リプレイコントロール。

以下に例を示します。

[再生] をクリックして録画を再生します。
[一時停止] をクリックして、リプレイを一時停止します。
プルダウンで再生速度を調整します。
[ビジュアルプレビューの切り替え] をクリックして、ビジュアルプレビューを表示または非表示にします。

パフォーマンス録画を操作する

DevTools は、録画のタイムライン全体を表示するために自動的にズームアウトします。録音をズームしたり、タイムラインを移動したりして、録音を操作できます。

タイムラインをズームしたり左右に移動したりするには、対応するナビゲーションボタンを使用します。

[タイムライン] をクリックして再生ヘッドを移動し、特定のフレームを表示します。
下部の [拡大] コントロールと [縮小] コントロールをクリックして、ズームします。この場合、再生ヘッドに基づいてズームします。
下部の横スクロールバーをドラッグして、タイムラインを左右に移動します。

キーボードショートカットを使用することもできます。ボタンをクリックして、ショートカットを表示します。キーボードショートカット] をクリックします。

ショートカットを使用すると、マウスカーソルに基づいてズームされます。

パフォーマンス分析情報を表示する

[分析情報] ペインでパフォーマンス分析情報のリストを取得します。潜在的なパフォーマンスの問題を特定して修正します。

[Insights] ペイン。

各分析情報にカーソルを合わせると、メイントラックでハイライト表示されます。

分析情報（レンダリングをブロックするリクエストなど）をクリックして、[詳細] ペインで開きます。問題をさらに理解するには、[ファイル]、[問題]、[修正方法] などのセクションを確認します。

分析情報の詳細。

Core Web Vitals のパフォーマンス指標を表示する

ウェブに関する主な指標は、ウェブで優れたユーザーエクスペリエンスを実現する際に重要となる品質シグナルについて、統一的な目安を提供するための Google の取り組みです。

これらの指標は、[タイムライン] ペインと [分析情報] ペインで確認できます。

Core Web Vitals のパフォーマンス指標を表示します。

[タイムライン] の分析情報にカーソルを合わせると、指標の詳細が表示されます。

Largest Contentful Paint の遅延を検出する

Largest Contentful Paint（LCP）は、Core Web Vitals 指標の 1 つです。ビューポート内に表示される最も大きな画像またはテキストブロックのレンダリング時間を、最初にページの読み込みが始まったタイミングと比較する形で確認できます。

LCP のしきい値。

良好な LCP スコアは 2.5 秒以下です。

ページの Largest Contentful Paint のレンダリングに時間がかかっている場合は、タイムラインに LCP バッジと黄色の四角形または赤い三角形が表示されます。

[詳細] ペインを開くには、タイムラインまたは右側の [分析情報] ペインにある LCP バッジをクリックします。このペインでは、遅延の考えられる原因と、その修正方法に関する提案を確認できます。

詳細ペイン。

この例では、リクエストによってレンダリングがブロックされています。これを修正するには、クリティカルスタイルをインラインで適用します。詳しくは、レンダリングブロックリソースを削除するをご覧ください。

LCP レンダリング時間のサブパートを表示するには、[詳細] > [タイミングの内訳] セクションまで下にスクロールします。

タイミングの内訳。

LCP レンダリング時間は、次のサブパートで構成されます。

LCP サブパート	説明
Time to First Byte（TTFB）	ユーザーがページの読み込みを開始してから、ブラウザが HTML ドキュメントレスポンスの最初のバイトを受信するまでの時間。
リソース読み込みの遅延	TTFB とブラウザが LCP リソースの読み込みを開始した時点との差分。
リソースの読み込み時間	LCP リソース自体の読み込みにかかる時間。
要素のレンダリングの遅延	LCP リソースの読み込みが完了してから LCP 要素が完全にレンダリングされるまでの差分。

LCP 要素のレンダリングにリソースの読み込みが必要ない場合、リソースの読み込みの遅延と時間は省略されます。たとえば、要素がシステムフォントでレンダリングされたテキストノードである場合などです。

レイアウトシフトアクティビティを表示する

[レイアウトシフト] トラックでレイアウトシフトアクティビティを確認します。

レイアウトシフトトラック。

レイアウトシフトはセッションウィンドウにグループ化されます。この例では、2 つのセッションウィンドウがあります。セッションウィンドウの間にはギャップがあります。

セッションウィンドウとギャップ。

Cumulative Layout Shift（CLS）は、ウェブに関する主な指標の 1 つです。[レイアウトシフト] トラックを使用して、レイアウトシフトの潜在的な問題と原因を特定します。

CLS 指標を改善する場合は、常に最も大きなセッションウィンドウから始めます。この例では、セッションウィンドウ 1 が背景色とレベルに基づいて最大のウィンドウになっています。

CLS。

スクリーンショットをクリックすると、レイアウトシフトの詳細が表示され、考えられる根本原因と影響を受ける要素を特定できます。

レイアウトシフトの詳細を表示します。

この例では、考えられる根本原因は unsized media です。修正方法については、Cumulative Layout Shift を最適化するをご覧ください。

考えられる根本原因を特定します。

レイアウトシフトのスコアについて

スコアの計算方法を確認するには、[詳細] ペインの [ウィンドウ] セクションを使用します。[Window] には、現在のレイアウトシフトが属するセッションウィンドウが表示されます。

ページ全体がシフトした場合、各レイアウトシフトの最大スコアは 1 です。この例では、最初のレイアウトシフトのスコアは 0.15 です。2 回目のレイアウトシフトのスコアは 0.041 です。

レイアウトシフトのスコアについて理解します。

このセッションウィンドウの合計スコアは 0.19 です。CLS のしきい値に基づいて、改善が必要です。セッションウィンドウの背景色も同様に反映されます。

CLS のしきい値。

セッションウィンドウのバックグラウンドグラフは時間の経過とともに増加します。レイアウトシフトの累積スコアは、その時点での増加を反映しています。

譲渡ウィンドウの背景グラフ。

ネットワークアクティビティを表示する

[ネットワーク] トラックでネットワークアクティビティを表示します。ネットワークトラックを展開してすべてのネットワークアクティビティを表示し、各アイテムをクリックして詳細を表示できます。

ネットワークアクティビティを表示する。

レンダラアクティビティを表示する

[Renderer] トラックでレンダリングアクティビティを表示します。各レンダラを展開してアクティビティを表示し、各項目をクリックして詳細を表示できます。

レンダラの動作状況を表示します。

GPU アクティビティを表示する

[GPU] トラックで GPU アクティビティを表示します。GPU トラックはデフォルトで非表示になっています。有効にするには、[設定] で [GPU] をオンにします。

GPU アクティビティを表示します。

カスタム速度を表示する

カスタムパフォーマンス測定を取得するには、User Timing を使用し、Timing トラックでタイミングを可視化します。詳細については、ユーザータイミング API をご覧ください。

テキストの読み込みにかかった時間を計算するこちらのデモページをご覧ください。

カスタム速度を表示するには:

アプリケーション内の場所を performance.mark() でマークします。
performance.measure() を使用して、マーク間の経過時間を測定します。
パフォーマンスを記録する。
[タイミング] トラックで測定値を表示します。トラックが表示されない場合は、[設定] の [ユーザーのタイミング] を確認してください。
詳細を表示するには、トラックのタイミングをクリックします。

UI をカスタマイズする

[タイムライン] と [トラック] をカスタマイズするには、パネルの [設定] アイコンをクリックし、必要なオプションをオンにします。

設定] をタップします。

録画をエクスポートする

録音を保存するには、[エクスポート] をクリックします。

録画をエクスポートします。

録音をインポートする

録画を読み込むには、[インポート] を選択します。

録音をインポートします。

録音を削除する

録音を削除するには:

[削除] をクリックします。確認ダイアログが開きます。
ダイアログで [削除] をクリックして、削除を確定します。