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

[パフォーマンス分析情報] パネルを使用すると、ウェブサイトのパフォーマンスに関する実用的でユースケースに基づく分析情報を確認できます。

新しいパネルを導入する理由

新しい [パフォーマンス分析情報] パネルは、既存の [パフォーマンス] パネルを使用する際に次の 3 つの開発者が抱える課題に対処するためのテストです。

• 情報が多すぎる。UI が新しくなり、[パフォーマンス分析情報] パネルでデータが合理化され、関連情報のみが表示されます。
• ユースケースの区別が難しい。[パフォーマンス分析情報] パネルでは、ユースケース主導の分析がサポートされます。現時点ではページ読み込みのユースケースのみに対応していますが、インタラクティビティなど、フィードバックに基づいて今後さらに増える予定です。
• ブラウザを効果的に使用するには、ブラウザの仕組みに関する深い専門知識が必要。[パフォーマンス分析情報] パネルには、[分析情報] ペインの主要な分析情報と、問題の解決方法に関する実用的なフィードバックが表示されます。

はじめに

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

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

1. DevTools を開きます。

2. [その他のオプション]（more_vert） > [その他のツール] > [パフォーマンス分析情報] をクリックします。

   

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

   

パフォーマンスを記録

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

1. 新しいタブでこのデモページを開き、そのページでパフォーマンス分析情報パネルを開きます。

2. 録画中にネットワークと CPU をスロットリングできます。このチュートリアルでは、[キャッシュを無効にする] をオンにし、プルダウン メニューで [CPU] を [4x スローダウン] に設定します。

   

3. refresh [ページの読み込みを測定] をクリックします。DevTools がページの再読み込み中にパフォーマンス指標を記録し、ページの読み込み完了から数秒後に記録を自動的に停止します。

   

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

下部のコントロールを使用して、録画のリプレイを制御します。

その方法の例を以下に示します。

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

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

DevTools は自動的にズームアウトして、記録タイムライン全体を表示します。ズームを使用して録画内を移動したり、タイムラインを移動したりできます。

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

• [Timeline] をクリックしてプレイヘッドを動かし、特定のフレームを表示します。
• 拡大するには、下部にある zoom_in [ズームイン] と zoom_out [ズームアウト] コントロールをクリックします。この場合は、プレイヘッドに基づいてズームします。
• 下部の水平スクロールバーをドラッグして、タイムラインを左右に移動します。

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

ショートカットを使用すると、マウスのカーソルに応じてズームできます。

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

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

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

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

ウェブに関する指標のパフォーマンス指標を表示する

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

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

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

Large Contentful Paint の遅延を発見

Largest Contentful Paint（LCP）は Core Web Vitals の指標の一つです。ビューポート内に表示される最も大きな画像またはテキスト ブロックのレンダリング時間を、ページの読み込みが最初に開始されたときからの相対値で報告します。

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

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

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

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

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

LCP のレンダリング時間は次の要素で構成されます。

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

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

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

[Layout Shifts] トラックでレイアウト シフトのアクティビティを表示します。

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

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

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

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

この例では、サイズの制限がないメディアが根本原因と考えられます。修正方法については、Cumulative Layout Shift の最適化をご覧ください。

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

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

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

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

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

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

ネットワーク トラックでネットワーク アクティビティを確認します。ネットワーク トラックを展開すると、すべてのネットワーク アクティビティが表示され、各項目をクリックすると詳細が表示されます。

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

Renderer トラックでレンダリング アクティビティを確認します。各レンダラを展開するとアクティビティが表示され、各項目をクリックすると詳細が表示されます。

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

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

カスタム速度を表示

カスタムのパフォーマンス測定値を取得するには、カスタム速度を使用し、速度トラックで速度を視覚化します。詳しくは、User Timing API をご覧ください。

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

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

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

UI をカスタマイズする

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

録音をエクスポートする

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

録音をインポートする

録音を読み込むには、[Import]（publish）を選択します。

録音を削除する

録音を削除するには:

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