膨大なネットワーク ペイロードを避ける

大規模なネットワーク ペイロードは、長い読み込み時間と強い相関関係があります。また、ユーザーは多くのモバイルデータ通信料を支払う必要があります。そのため、ページのネットワーク リクエストの合計サイズを減らすことは、サイトウォレットのユーザー エクスペリエンスにとって良いことです。

Lighthouse ネットワーク ペイロードの監査が失敗する仕組み

Lighthouse では、ページによってリクエストされたすべてのリソースの合計サイズが KiB 単位で表示されます。リクエストが最も多いものが最初に表示されます。

Lighthouse(大規模なネットワーク ペイロードを回避する)のスクリーンショット

HTTP Archive データに基づくと、ネットワーク ペイロードの中央値は 1,700 ~ 1,900 KiB です。最も大きなペイロードが表示されるよう、Lighthouse ではネットワーク リクエストの合計が 5,000 KiB を超えるページにフラグが設定されます。

ペイロード サイズを縮小する方法

合計バイトサイズを 1,600 KiB 未満に抑えるようにします。 この目標は、10 秒以下の操作可能時間を達成しながら、理論的に 3G 接続でダウンロードできるデータ量に基づいています。

ペイロードのサイズを抑える方法は次のとおりです。

スタック固有のガイダンス

Angular

JavaScript バンドルのサイズを最小限に抑えるには、ルートレベルのコード分割を適用します。また、Angular Service Worker でアセットを事前キャッシュすることも検討してください。

Drupal

レスポンシブ画像スタイルを使用して、ページに読み込まれる画像のサイズを減らすことを検討してください。ビューを使用して 1 つのページに複数のコンテンツ アイテムを表示する場合は、ページネーションを実装して、特定のページに表示されるコンテンツ アイテムの数を制限することを検討してください。

Joomla

記事カテゴリ内での抜粋を表示すること(「続きを読む」リンク)、特定のページに表示される記事の数を減らす、長い投稿を複数のページに分割する、コメントの遅延読み込みを行うプラグインなどを検討してください。

WordPress

投稿リストに抜粋を表示する(「more」タグを使用)、特定のページに表示される投稿の数を減らす、長い投稿を複数のページに分割する、コメントの遅延読み込みを行うプラグインを使用することを検討してください。

関連情報

膨大な量のネットワーク ペイロードを回避するための監査のソースコード