公開日: 2025 年 4 月 2 日
Chrome DevTools の [パフォーマンス] パネルは非常に強力で、サイトの実行時の動作で発生する可能性のあるほとんどの問題に関するデータが含まれています。ただし、この膨大なデータは圧倒的なものになる可能性があります。多くのデベロッパーはどこから手を付ければよいか判断できず、専門家であっても複雑なページ読み込み内の特定の問題を特定するのが難しい場合があります。
Lighthouse などのツールは、パフォーマンス トレースを分析し、潜在的な問題とその対処方法の簡潔なリストをレポートすることで、この問題に対処するために開発されました。ただし、これはトレードオフもあります。詳細から切り離されているため、問題がタイムライン上で相互にいつ発生したかを把握するのが難しくなる場合があります。また、完全なトレースのコンテキストを把握するには、[パフォーマンス] パネルで最初からやり直す必要があります。
新しい [分析情報] サイドバーでは、Lighthouse の分析情報を [パフォーマンス] パネルに直接表示することで、このギャップを解消しています。トレースを表示すると、推奨事項がパネルに直接表示されるようになります。さらに、この統合により、分析情報でイベントをハイライト表示し、パフォーマンス タイムラインに説明を直接オーバーレイできるようになります。分析情報にカーソルを合わせると、ズームインしてトレース内の関連部分をハイライト表示したり、クリティカル パスを可視化したり、パフォーマンスのボトルネックをコンテキスト全体で報告したりできます。
![左側に分析情報サイドバーが表示された DevTools の [パフォーマンス] パネル。トレースの分析情報のリストが表示されています](https://chrome-dot-devsite-v2-prod-3p.appspot.com/static/blog/devtools-insights-sidebar/images/overview.png?hl=ja)
インサイト サイドバーの使用
新しいサイドバーは、Chrome 131 で最初の分析情報とともに追加され、それ以降の Chrome の新しいリリースごとに分析情報が追加されています。
表示するには、[パフォーマンス] パネルで [ 記録] をクリックし、URL を読み込むかページを操作してから、記録を停止します。サイドバーは、過去に閉じたことがある場合は、[パフォーマンス] パネルの左側に折りたたまれている場合があります。表示するには、[] ボタンをクリックします。パフォーマンスの問題の調査のエントリ ポイントとして使用できる分析情報のリストが表示されます。
Lighthouse レポートと同様に、サイドバーには、先ほど行った録画に関する一連の分析情報が一覧表示されます。パフォーマンスや UX の問題が特定されたり、問題を自分でフィルタして診断するのに役立つデータが提供されたりします。下部には、問題なしの分析情報セクションがあります。このセクションには、特定のパフォーマンスの問題が発生しなかったか、分析情報がまったく適用されなかった（ページの操作のトレースを取っただけで、ページを移動しなかった場合など）ために、この録画で問題と見なされなかった分析情報が表示されます。
最後に、記録したトレース内に複数のページへのナビゲーションが含まれている場合、各ページに独自のインサイトが取得されます。このインサイトを切り替えて、各ナビゲーションを個別に調査できます。URL の横にある アイコンをクリックすると、タイムライン ビューで、そのページで発生したトレースの部分が拡大表示されます。
ページ読み込みの分析情報
優れたユーザー エクスペリエンスを実現するには、ページの読み込み速度が重要です。Largest Contentful Paint（LCP）は、ページの読み込みを測定することに重点を置いた Core Web Vitals です。分析情報サイドバーには、LCP の改善に役立つ分析情報のほか、LCP 以外のページ読み込みに関する分析情報も表示されます。
LCP に関する分析情報
LCP を理解して改善するには、LCP のフェーズから始めることをおすすめします。これは、LCP までの時間を 4 つのサブパートに分割し、それぞれに対応するアプローチです。
左側の [分析情報] タブで [フェーズ別の LCP] をクリックすると、各サブパートで費やした時間の内訳が [分析情報] タブに表示されます。[分析情報] タブの各サブパートにカーソルを合わせるかクリックすると、パフォーマンス タイムラインの各サブパートがハイライト表示または拡大され、その期間内のアクティビティを調査できます。フィールド データを有効にしている場合、サイトの画像 LCP 読み込みデータが利用可能であれば、サブパートの 75 パーセンタイルの値も分析情報に含まれます。
LCP リクエストの検出では、LCP リソースの読み込み方法の改善案が提示されます。これは、ウェブ全体でLCP に影響する一般的な問題の一つです。タイムラインに、画像を読み込めたタイミングと、節約できた読み込み時間の推定値を示すアノテーションが重ねて表示されます。
詳細な分析情報は、LCP のサブパート内の問題の特定に役立ちます。[ドキュメント リクエストのレイテンシ] には、サーバーへのナビゲーション リクエストの最適化の可能性が表示されます。[レンダリングをブロックするリクエスト] は、コンテンツ（LCP など）の表示準備が整っていても、完了するまでページの最初のレンダリングをブロックするリクエストを示します。
LCP 以外のページ読み込みに関する分析情報
その他の分析情報は、LCP 以外のページ読み込みの全体的なパフォーマンスに影響する潜在的な問題を特定するのに役立ちます。
最大の課題の 1 つは、サードパーティ リソースのパフォーマンスです。多くの場合、ビジネス上の理由で必要になりますが、ウェブ デベロッパーはパフォーマンスを直接制御することはほとんどできません。[サードパーティ] 分析情報では、リソースと CPU アクティビティがファーストパーティとサードパーティのエンティティ別に分類され、時間とリソースを最も多く消費したエンティティが表示されます。各エンティティにカーソルを合わせると、パフォーマンスとネットワークのタイムライン内のアクティビティがハイライト表示されます。この分析情報は、[サードパーティを除外] チェックボックスと、[概要] タブの新しいファーストパーティ/サードパーティのエントリと連携して機能します。
[フォント表示] には、font-display: swap または optional を使用して、フォント読み込み中にテキストが表示されないようにできたフォントが一覧表示されます。
ネットワーク依存関係ツリーは、ページ読み込み内の長い依存関係チェーンを特定します。リソース A がリソース B を読み込み、リソース B がリソース C を読み込み、C がページの外観や機能にとって重要である場合です。依存するリクエストごとに、特に接続が不安定なユーザーに対して、チェーン全体の読み込みに大きなレイテンシが発生する可能性があります。
最後に、画像リソースについては、画像配信を改善で、大幅に最適化できる画像を特定します。不要な追加バイトの取得でダウンロード時間が大幅に浪費される可能性があります。
応答性に関する分析情報
Interaction to Next Paint（INP）は、LCP と同様にサブパートに分割できます。[フェーズごとの INP] 分析情報では、パフォーマンス タイムラインにオーバーレイが追加され、これらのサブパートがハイライト表示されます。これにより、メインスレッド アクティビティとの直接的な関係を確認できます。
ページを更新する操作では、スタイルとレイアウトの再計算に多くの時間がかかることがあります。スタイルとレイアウトにかかる時間を予測するうえで最も有用な指標の 1 つは、DOM のサイズです。これは、ノードの総数とツリーの深さの両方です。DOM サイズを最適化する: ページの DOM サイズを報告し、DOM サイズが大きいためにパフォーマンスが低下した可能性のあるイベントをハイライト表示します。
強制再フローは、レスポンシビリティに対する一般的な脅威をアラートします。DOM への読み取りと書き込みが交互に行われ、ブラウザがレイアウトを行う必要がある場合です。たとえば、DOM に新しい要素を追加してから、画面上の要素のサイズを読み取る DOM 関数を呼び出すなどです。DOM の 2 つの部分が互いのレイアウトに影響しないことがわかっていても、明示的なコンテンツの制限がないと、2 つの部分の間に未知の依存関係があるために、ブラウザはページ全体を再レイアウトしなければならない場合があります。
ウェブ上のほとんどのページでは、明示的なモバイル ビューポートが設定されていますが、設定されていない場合、ブラウザが追加入力を待機している間にクリックごとに数百ミリ秒の余分な時間がかかるリスクがあります。ビューポートが正しく設定されていない場合、[ビューポートをモバイル向けに最適化する] 分析情報アラートが表示されます。
最後に、[CSS セレクタの統計情報を有効にする（遅い）] オプションを選択すると、[CSS セレクタのコスト] 分析情報が表示されます。スタイルの再計算のパフォーマンスの概要を確認できます。この分析情報を表示するには、[CSS セレクタの統計情報を有効にする（遅い）] オプションを有効にする必要がありますが、このオプションを有効にするとページのパフォーマンスが大幅に低下します。
レイアウトの安定性に関する分析情報
Cumulative Layout Shift（CLS）は、タイムライン内に独自のレイアウト シフト トラックを取得します。このトラックには、CLS スコアの計算に使用される個々のシフトが最大 5 秒のウィンドウ（クラスタ）にグループ化されて表示されます。
[レイアウト シフトの主な原因] 分析情報には、CLS が最も大きいクラスタがハイライト表示され、そのクラスタ内の個々のレイアウト シフトが一覧表示されます。リストまたはトラックの各シフトにカーソルを合わせると、ページのスクリーンショットが表示され、アニメーション化されたオーバーレイでシフトが可視化されます。
まとめ
分析情報は、Lighthouse の機能を [パフォーマンス] パネルの全コンテキストに組み込み、トレースをよりわかりやすくし、分析情報をその元のデータに関連付けることを目的としています。
Google では、現在の分析情報を積極的に改善しており、今後さらに追加する予定です。分析情報サイドバーをお試しいただき、改善すべき点や、他にご覧になりたい分析情報など、お気づきの点がございましたら、ぜひお知らせください。