膨大なネットワーク ペイロードを避ける
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
大規模なネットワーク ペイロードは、長い読み込み時間と強い相関関係があります。また、ユーザーは多くのモバイルデータ通信料を支払う必要があります。そのため、ページのネットワーク リクエストの合計サイズを減らすことは、サイトとウォレットのユーザー エクスペリエンスにとって良いことです。
Lighthouse ネットワーク ペイロードの監査が失敗する仕組み
Lighthouse では、ページによってリクエストされたすべてのリソースの合計サイズが KiB 単位で表示されます。リクエストが最も多いものが最初に表示されます。
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」タグを使用)、特定のページに表示される投稿の数を減らす、長い投稿を複数のページに分割する、コメントの遅延読み込みを行うプラグインを使用することを検討してください。
関連情報
膨大な量のネットワーク ペイロードを回避するための監査のソースコード
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2019-05-02 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2019-05-02 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2019-05-02 UTC。"],[],[]]