[パフォーマンス] パネルを使用して、ウェブサイトのパフォーマンスを分析します。
概要
[パフォーマンス] パネルでは、ウェブ アプリケーションの CPU パフォーマンス プロファイルを記録できます。プロファイルを分析して、潜在的なパフォーマンスのボトルネックとリソース使用量を最適化する方法を見つけます。
[パフォーマンス] パネルを使用して、次の操作を行います。
- パフォーマンス プロファイルを記録します。
- キャプチャ設定を変更する。
- パフォーマンス レポートを分析する。
ウェブサイトのパフォーマンスを改善するための包括的なガイドについては、ランタイム パフォーマンスを分析するを��覧ください。
パフォーマンス パネルを開く
[パフォーマンス] パネルを開くには、DevTools を開いて、上部のタブセットから [パフォーマンス] を選択します。
または、次の手順でコマンド メニューを使用して [パフォーマンス] パネルを開きます。
- DevTools を開きます。
- 次のいずれかのキーを押して、コマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
- 「
Performance panel
」と入力し、[パフォーマンス パネルを表示] を選択して、Enter キーを押します。
Core Web Vitals をリアルタイムで確認する
[パフォーマンス] パネルを開くと、ローカルの Largest Contentful Paint(LCP)と Cumulative Layout Shift(CLS)の指標がすぐにキャプチャされて表示され、スコア(良好、改善が必要、低速)が示されます。
ページを操作すると、[パフォーマンス] パネルにローカルの Interaction to Next Paint(INP)とそのスコアもキャプチャされます。これにより、LCP と CLS に加えて、ネットワーク接続とデバイスを使用してページのコア ウェブ バイタルの概要を完全に把握できます。
[インタラクション] タブと [レイアウト シフト] タブの 3 つの指標カードの下には、キャプチャされたインタラクションとレイアウト シフトに関する情報(要素、タイミング、フェーズ(インタラクションの場��)、スコア(レイアウト シフトの場合)など)を含む表が表示され���す。���方のリストをクリアするには、[
] [クリア] をクリックします。指標スコアの内訳を確認するには、指標値にカーソルを合わせてツールチップを表示します。
自分のエクスペリエンスとユーザーのエクスペリエンスを比較する
また、Chrome UX レポートからフィールド データを取得し、サイトのユーザー エクスペリエンスをローカル指標と比較することもできます。
フィールド データを追加するには:
[パフォーマンス] > [次のステップ] > [フィールド データ] で、[設定] をクリックします。
[Configure field data fetching] ダイアログで、[Privacy disclosure] を確認し、[Ok] をクリックします。
上級: 開発環境と本番環境間のマッピングを設定する...
最も関連性の高いフィールド データを自動的に取得するには、開発環境オリジンと本番環境オリジン間のマッピングを(複数)設定します。
- ダイアログ ウィンドウで、[詳細] セクションを開き、[+ 新規] をクリックします。
マッピング テーブルに開発環境と本番環境の URL を入力し、[+] をクリックします。
たとえば、
http://localhost:8080
からhttps://example.com
へのマッピングでは、localhost:8080/page1
に移動するとexample.com/page1
のフィールド データが表示されます。また、なんらかの理由でフィールド データを自動的に取得できない場合は、
以下の URL のフィールド データを常に表示するをオンにして、URL を指定することもできます。[パフォーマンス] パネルは、まずこの URL のフィールド データを取得しよ��とし、どのページに移動してもこのフィールド データを表示します。セットアップ後にフィールド データの取得設定を変更するには、[フィールド データ] > [設定] をクリックします。
フィールド データの取得を設定すると、[パフォーマンス] パネルに、ローカルの指標スコアとユーザーが体験するスコアの比較が表示されるようになります。右側の [フィールド データ] セクションで、収集期間を確認できます。
指標スコアの内訳を確認するには、指標値にカーソルを合わせて��ールチップを表示します。
ユーザーの環境に合わせて環境を構成する
前のセクションで説明したようにフィールド データの取得を設定すると、[パフォーマンス] パネルに、ユーザー エクスペリエンスをより適切に反映するように環境を構成する方法に関する推奨事項が表示されます。
環境を構成するには:
各指標カードで、[ローカル テスト条件を考慮する] セクション(ある場合)を開き、推奨事項を確認します。
この例では、ユーザー エクスペリエンスをより適切に再現するために、一般的なデスクトップ画面サイズを使用し、CPU とネットワークをスロットリングすることをおすすめします。
この例の環境構成と一致させるには:
- ビューポートを一般的な画面サイズ(720p や 1080p など)のいずれかに設定します。特定のデバイスや画面サイズをエミュレートするには、[要素] パネルの [デバイスモード] を使用します。
- この例では、ウェブサイトのユーザーの 82% がパソコンで閲覧しています。ローカルの指標スコアを正しいフィールド データと比較するには、[フィールド データ] > [デバイス] プルダウン リストから [パソコン] を選択します。
- [環境設定] セクションで、[ネットワーク] プルダウン リストを [高速 4G] などに設定し、[CPU] を [20 倍減速] などに設定します。同じセクションで [ネットワーク キャッシュを無効にする] の をオンにすることもできます。
環境を構成したら、ページを再読み込みして操作し、ローカル INP をキャプチャして、指標スコアを再度比較します。
指標スコアが、ユーザーが実際に体験するスコアに近づいたようです。これに伴い、指標カードから [ローカルテストの条件を考慮する] セクションが削除されました。
これで、ウェブサイトのウェブに関する主な指標の改善を開始できます。
パフォーマンス レポートをキャプチャして分析する
以降のセクションでは、プロファイルを記録する方法、キャプチャ設定を変更する方法、レポートを分析する方法について説明します。
パフォーマンス プロファイルを記録する
録画の準備ができたら、[パフォーマンス] パネルで次のオプションを使用できます。
キャプチャの設定を変更する
キャプチャ設定では、DevTools がパフォーマンスの記録をキャプチャする方法を変更でき、レポートに追加情報を表示できます。[キャプチャ設定]
をクリックして、[キャプチャ設定] メニューにアクセスします。[キャプチャ設定] メニューから次のオプションを選択します。
- JavaScript のサンプルを無効にする: 記録中に呼び出された、[メイン] トラックに表示される JavaScript のコールスタックの記録を無効にします。パフォーマンスのオーバーヘッドが削減されます。
- 高度な描画パフォーマンスの計測(低速)を有効にする: 高度な描画パフォーマンスの計測を行います。パフォーマンスを大幅に低下させる。
- CSS セレクタの統計情報を有効にする(遅い): CSS セレクタの統計情報を取得します。パフォーマンスを大幅に低下させる。
- CPU スロットリング: CPU 速度の低下をシミュレートします。
- ネットワーク スロットリング: ネットワーク速度が遅い状態をシミュレートします。
パフォーマンス レポートを分析する
[パフォーマンス] パネルの使用方法については、パフォーマンスの記録を分析するをご覧ください。
以下に、このガイドのトピックと、その他の役立つドキュメントをグループ化したものを示します。
レポートの操作方法:
パフォーマンス分析情報を使用して、ウェブサイトのパフォーマンスに関する実用的な分析情報を取得します。
ワークフローで重要なことに集中する方法は次のとおりです。
[Bottom-up]、[Call tree]、[Event log] の各タブについて:
レポートを分析する方法:
- メインスレッドのアクティビティを表示する
- フレームグラフを読む
- スクリーンショットを表示する
- メモリ指標を表示する
- 録画の一部を再生する
- Recalculate Style イベント中に CSS セレクタのパフォーマンスを分析する
- [パフォーマンス] パネルで Node.js のパフォーマンスをプロファイリングする
- フレーム/秒(FPS)を分析する
- タイムライン イベントのリファレンス
これらのパネルでパフォーマンスを改善する
ウェブサイトのパフォーマンス向上に役立つその他のパネルは次のとおりです。