大規模なネットワーク ペイロードは、長い読み込み時間と強い相関関係があります。また、ユーザーは多くのモバイルデータ通信料を支払う必要があります。そのため、ページのネットワーク リクエストの合計サイズを減らすことは、サイトとウォレットのユーザー エクスペリエンスにとって良いことです。
Lighthouse ネットワーク ペイロードの監査が失敗する仕組み
Lighthouse では、ページによってリクエストされたすべてのリソースの合計サイズが KiB 単位で表示されます。リクエストが最も多いものが最初に表示されます。
![Lighthouse(大規模なネットワーク ペイロードを回避する)のスクリーンショット](https://developer.chrome.com/static/docs/lighthouse/performance/total-byte-weight/image/a-screenshot-the-lightho-5edd6e4e68e25.png?authuser=4&hl=ja)
HTTP Archive データに基づくと、ネットワーク ペイロードの中央値は 1,700 ~ 1,900 KiB です。最も大きなペイロードが表示されるよう、Lighthouse ではネットワーク リクエストの合計が 5,000 KiB を超えるページにフラグが設定されます。
ペイロード サイズを縮小する方法
合計バイトサイズを 1,600 KiB 未満に抑えるようにします。 この目標は、10 秒以下の操作可能時間を達成しながら、理論的に 3G 接続でダウンロードできるデータ量に基づいています。
ペイロードのサイズを抑える方法は次のとおりです。
- 必要になるまでリクエストを延期します。考えられるアプローチについては、PRPL パターンをご覧ください。
- リクエストができるだけ少なくなるように最適化します。考えられる手法は次のとおりです。
- ページが繰り返しアクセスされてリソースが再度ダウンロードされないように、リクエストをキャッシュに保存します。(キャッシュの仕組みとその実装方法については、ネットワークの信頼性に関するランディング ページをご覧ください)。
スタック固有のガイダンス
Angular
JavaScript バンドルのサイズを最小限に抑えるには、ルートレベルのコード分割を適用します。また、Angular Service Worker でアセットを事前キャッシュすることも検討してください。
Drupal
レスポンシブ画像スタイルを使用して、ページに読み込まれる画像のサイズを減らすことを検討してください。ビューを使用して 1 つのページに複数のコンテンツ アイテムを表示する場合は、ページネーションを実装して、特定のページに表示されるコンテンツ アイテムの数を制限することを検討してください。
Joomla
記事カテゴリ内での抜粋を表示すること(「続きを読む」リンク)、特定のページに表示される記事の数を減らす、長い投稿を複数のページに分割する、コメントの遅延読み込みを行うプラグインなどを検討してください。
WordPress
投稿リストに抜粋を表示する(「more」タグを使用)、特定のページに表示される投稿の数を減らす、長い投稿を複数のページに分割する、コメントの遅延読み込みを行うプラグインを使用することを検討してください。