このページは Cloud Translation API によって翻訳されました。

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

ネットワークペイロードのサイズが大きいと、読み込み時間が長くなります。また、ユーザーに費用も発生します。たとえば、携帯データ通信の追加料金が発生する場合があります。そのため、ページのネットワークリクエストの合計サイズを減らすことは、サイトのユーザーエクスペリエンスとウォレットの両方に有益です。

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

Lighthouse には、ページでリクエストされたすべてのリソースの合計サイズがキビバイト（KiB）単位で表示されます。リクエストが最も多いものから順に表示されます。

HTTP Archive のデータに基づくと、ネットワークペイロードの中央値は 1,700～1,900 KiB です。最大のペイロードを検出できるように、Lighthouse は、ネットワークリクエストの合計が 5,000 KiB を超えるページを報告します。

合計バイトサイズを 1,600 KiB 未満に保つようにします。この目標は、Time to Interactive を 10 秒以内に抑えながら、3G 接続で理論上ダウンロードできるデータ量に基づいています。

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

必要になるまでリクエストを延期します。考えられるアプローチについては、PRPL パターンをご覧ください。
リクエストのサイズをできるだけ小さくするように最適化します。次のような手法があります。
リクエストをキャッシュに保存して、再訪問時にページがリソースを再ダウンロードしないようにします。（キャッシングの仕組みと実装方法については、ネットワークの信頼性に関するランディングページをご覧ください）。

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

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

記事のカテゴリに抜粋を表示する（「詳しく読む」リンクが一般的なソリューションの一つです）、ページに表示する記事の数を減らす、長い投稿を複数のページに分けて表示する、またはコメントを遅延読み込みするプラグインを使用することをご検討ください。

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