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

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

概要

リクエストされたデータの量が初期の輻輳ウィンドウ（通常は圧縮状態で 14.6 KB）を超える場合、サーバーとユーザーのブラウザとの間で追加のラウンド トリップが必要になります。モバイル ネットワークのような遅延の多いネットワークの場合、これによってページ読み込みが大幅に遅延する可能性があります。

推奨される解決方法

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

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

ページの主要なコンテンツを最初に読み込みます。サーバーからの最初のレスポンスで重要なページ部分のレンダリングに必要なデータがすぐに送信され、残りは後で送信されるように、ページを構成します。つまり、スクロールせずに見える範囲のコンテンツのスタイルを指定するインライン部分と、遅れてもよい部分の 2 つに CSS を分割する必要があります。

次の例を参考にして、読み込みを速くするためにサイトを再構成する方法を検討します。

  • メインのコンテンツより先にサードパーティのウィジェットを読み込む HTML の場合は、メインのコンテンツを最初に読み込むように順序を変更します。
  • ナビゲーション用サイドバーと記事の 2 カラムデザインを使用するサイトで、HTML が記事より前にサイドバーを読み込んでいる場合は、記事を最初に読み込むことを検討します。

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

さまざまな端末で問題なく動作し、重要なコンテンツを先に読み込むようにサイトを設計し直したら、次の手法を使って、ページのレンダリングに必要なデータの量を減らします。