このページは Cloud Translation API によって翻訳されました。

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

Jecelyn Yeen

Sofia Emelianova

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

新しいパネルを使用する理由

新しい [パフォーマンス分析情報] パネルは、既存の [パフォーマンス] パネルを使用する際にデベロッパーにとっての以下の 3 つの問題を解消するためのテストです。

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

はじめに

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

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

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

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

パフォーマンスを記録

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

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

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

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

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

下部のコントロールを使用して、録音の再生をコントロールできます。

リプレイコントロール。

以下はその方法の例です。

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

演奏の録画を操作する

DevTools は自動的にズームアウトし、完全な記録タイムラインが表示されます。ズームを使った録画の移動やタイムラインの移動が可能です。

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

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

キーボードショートカットも使用できます。ボタンをクリックすると、ショートカットが表示されます。キーボードショートカット。

ショートカットを使用する場合は、マウスのカーソルでズームします。

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

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

[分析情報] ペイン。

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

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

分析情報の詳細。

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

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

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

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

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

Large Contentful Paint の遅延を検出する

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

LCP のしきい値。

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

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

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

詳細ペイン。

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

LCP レンダリング時間の各構成要素を確認するには、[詳細] > [タイミングの内訳] セクションまでスクロールします。

タイミングの詳細。

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

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