スクロールせずに見える範囲のコンテンツのサイズを削減する

このルールは、スクロールせずに見える範囲のコンテンツを表示するために追加のネットワークのラウンド トリップが必要であることを PageSpeed Insights が検出した場合にトリガーされます。

概要

必要なデータの量が初期の輻輳ウィンドウ（通常 14.6 KB 圧縮）を超えると、サーバーとユーザーのブラウザの間で追加のラウンド トリップが必要となります。このため、モバイル ネットワークなどレイテンシの高いネットワークでは、ページの読み込みに大幅な遅延が発生する可能性があります。

推奨事項

ページの読み込み速度を上げるには、スクロールせずに見える範囲のコンテンツを表示するために必要なデータ（HTML マークアップ、画像、CSS、JavaScript）のサイズを制限します。 これにはいくつかの方法があります。

スクロールせずに見える範囲の重要なコンテンツが最初に読み込まれるように HTML を構成する

最初にページのメイン コンテンツを読み込みます。サーバーからの最初のレスポンスは、ページの重要な部分のレンダリングに必要なデータをすぐに送信し、残りの部分は遅延するようにページを構成します。つまり、CSS を 2 つの部分（コンテンツの ATF 部分のスタイル設定を行うインライン部分と、遅延できる部分）に分割する必要があります。

読み込みを高速化するためにサイトを再構成する方法の例を以下に挙げます。

  • HTML がメイン コンテンツを読み込む前にサードパーティのウィジェットを読み込む場合は、メイン コンテンツが最初に読み込まれるように順序を変更します。
  • ナビゲーション サイドバーと記事からなる 2 列デザインのサイトで、HTML で記事の前にサイドバーが読み込まれる場合は、最初に記事を読み込むことを検討してください。

リソースで使用されるデータの量を減らす

複数のデバイスで適切に動作するようにサイトのデザインを変更し、重要なコンテンツを最初に読み込むようにしたら、ページのレンダリングに必要なデータの量を減らすために、次の手法を使用します。

フィードバック

このページはお役に立ちましたか？