Lighthouse では、ページの読み込み中に行われたネットワーク リクエストの数と転送されたデータの量が報告されます。
- Total 行の Requests と Transfer Size の値は、Image、Script、Font、Stylesheet、Other、Document、Media 行の値を加算して計算されます。
- [第三者] 列は [合計] 行の値に考慮されません。その目的は、サードパーティのドメインからのリクエストの合計数と転送サイズの合計を把握できるようにすることです。サードパーティのリクエストは、他のリソースタイプの組み合わせである可能性があります。
リソース数と転送サイズを削減する方法
リソース数が多い場合や転送サイズが大きい場合、負荷パフォーマンスに及ぼす影響は、リクエストされるリソースの種類によって異なります。
CSS と JavaScript
CSS ファイルと JavaScript ファイルのリクエストは、デフォルトでレンダリング ブロックになっています。つまり、すべての CSS リクエストと JavaScript リクエストが完了するまで、ブラウザは画面にコンテンツをレンダリングできません。これらのファイルのいずれかが低速なサーバーでホストされている場合、その単一のサーバーによってレンダリング プロセス全体が遅延する可能性があります。実際に必要なコードのみを配信する方法については、JavaScript を最適化する、サードパーティ リソースを最適化する、CSS を最適化するをご覧ください。
影響を受ける指標: すべて
画像
画像のリクエストは、CSS や JavaScript のようにレンダリング ブロックではありませんが、読み込みパフォーマンスに悪影響を及ぼす可能性があります。よくある問題は、モバイル ユーザーがページを読み込んだ後、画像の読み込みは開始しているものの、完了に時間がかかるように見えるケースです。画像の読み込みを高速化する方法については、画像を最適化するをご覧ください。
影響を受ける指標: First Contentful Paint、First Meaningful Paint、Speed Index
フォント
フォント ファイルを非効率的に読み込むと、ページの読み込み中にテキストが見えなくなることがあります。ユーザーのデバイスで使用可能なフォントをデフォルトに設定し、ダウンロードが完了したらカスタム フォントに切り替える方法については、フォントを最適化するをご覧ください。
影響を受ける指標: First Contentful Paint
ドキュメント
HTML ファイルのサイズが大きい場合、ブラウザは HTML の解析と解析済みの HTML から DOM ツリーの構築により多くの時間を費やすことになります。
影響を受ける指標: First Contentful Paint
Media
アニメーション GIF ファイルは非常に大きいことがよくあります。アニメーションの読み込み時間を短縮する方法については、GIF を動画に置き換えるをご覧ください。
影響を受ける指標: First Contentful Paint
パフォーマンス バジェットを使用して回帰を防止する
リクエスト数と転送サイズを減らすようにコードを最適化したら、パフォーマンス バジェットを設定するで回帰を回避する方法をご確認ください。