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

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

概要

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

推奨される解決方法

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

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

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

読み込みを速くするためにサイトを再構成する方法として、次の例を検討してください:

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

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

さまざまな端末に適合し、重要なコンテンツを先に読み込むようにサイトを設計し直したら、次の手法を使って、ページの表示に必要なデータの量を削減してください: