パフォーマンス分析情報は、ウェブサイトのパフォーマンスに関する実用的な分析情報を提供し、DevTools の [パフォーマンス] パネルと Lighthouse の両方で利用できます。
DevTools の [パフォーマンス] パネル Lighthouse のパフォーマンス監査
ブラウザがページ上の要素と照合するのに時間がかかる複雑な CSS セレクタを特定します。
HTML ドキュメント リクエストに想定よりも時間がかかった理由を特定します。
単一のページ内で複数回読み込まれている同一の JavaScript モジュールまたはコードを特定します。
`font-display` CSS プロパティを評価して、カスタム フォントの読み込み中にテキストが確実に表示されるようにします。
JavaScript がブラウザにページのレイアウトの再計算を強制し、パフォーマンスの問題を引き起こす可能性があるタイミングを特定します。
AVIF や WebP などの最新の形式を使用したり、サイズを正しく設定したりするなど、画像読み込みを最適化する方法を提案します。
INP を改善するための最適化の機会を特定するのに役立つ INP のサブパートが表示されます。
ページの予期しない移動の原因となっている特定の DOM 要素を指摘し、累積レイアウト シフトに貢献します。
LCP を改善するための最適化の機会を特定するのに役立つ LCP のサブパートが表示されます。
LCP 画像リクエストに予想以上に時間がかかっている理由を特定します。
ほとんどの最新ブラウザでは速度が遅く、不要になる可能性がある古い JavaScript コードにフラグを設定します。
リクエストとレスポンスの多重化と速度を向上させるために、HTTP/2 や HTTP/3 などの新しいネットワーク プロトコルをチェックします。
ページの初期レンダリングをブロックしている主要な依存関係チェーンを特定します。
ページに多数の HTML 要素があり、レンダリングのパフォーマンスに影響する可能性がある場合に特定されます。
ページのビューポートが正しく設定されていることを確認し、モバイル デバイスでタップの遅延が 300 ミリ秒発生しないようにします。
ページの最初のレンダリングをブロックし、LCP を遅らせているリソースを特定します。
ページに読み込まれたサードパーティ リソースを一覧表示します。
ページに繰り返しアクセスしたときに不要なダウンロードが発生する可能性のある、最適でないキャッシュ ポリシーを特定します。