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

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

Jecelyn Yeen

Sofia Emelianova

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

概要

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

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

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

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

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

はじめに

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

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

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

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

パフォーマンスを記録

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

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

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

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

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

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

リプレイのコントロール。

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

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

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

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

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

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

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

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

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

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

[分析情報] ペイン。

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

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

分析情報の詳細。

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

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

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

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

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

Largest Contentful Paint の遅延を検出する

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

LCP のしきい値。

良好な LCP スコアは 2.5 秒未満です。

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

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

詳細ペイン。

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

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

タイミングの内訳。

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

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