このルールは、ページのスクロールせずに見える範囲のコンテンツを表示するのに追加のネットワークの往復が必要なことを PageSpeed Insights が検出した場合にトリガーされます。
概要
リクエストされたデータの量が初期の輻輳ウィンドウを超える場合、サーバーとユーザーのブラウザ間で追加の往復が必要になります。モバイル ネットワークのような遅延の多いネットワークの場合、これによってページの読み込みが大幅に遅れる可能性があります。
推奨される解決方法
ページの読み込みを速くするため、ページのスクロールせずに見える範囲のコンテンツの表示に必要なデータ(HTML マークアップ、画像、CSS、JavaScript)のサイズを制限します。次のような方法があります:スクロールせずに見える範囲の重要なコンテンツを最初に読み込むように HTML を構成する
ページの主要なコンテンツを最初に読み込みます。サーバーからの最初のレスポンスでページの重要な部分の表示に必要なデータがすぐに送信され、残りは後で送信されるように、ページを構成します。つまり、コンテンツのスクロールせずに見える範囲のスタイルを指定したインライン部分と、遅れてもよい部分の 2 つに CSS を分割する必要があります。
読み込みを速くするためにサイトを再構成する方法として、次の例を検討してください:
- HTML でメインのコンテンツを読み込む前にサードパーティのウィジェットを読み込んでいる場合は、メインのコンテンツを最初に読み込むように順序を変更します。
- サイトでナビゲーション用サイドバーと記事の 2 列で構成されたデザインを使用していて、HTML で記事より前にサイドバーを読み込んでいる場合は、記事を最初に読み込むことを検討します。
リソースで使用されるデータの量を減らす
さまざまな端末に適合し、重要なコンテンツを先に読み込むようにサイトを設計し直したら、次の手法を使って、ページの表示に必要なデータの量を削減してください:- リソースを圧縮(ミニファイ)する: HTML、CSS、JavaScript は、不要な空白やコメントを削除して圧縮することができます。リソース内の変数名を変更するツールを使用すると、さらに最適化できる場合があります。
- 可能な場合は画像の代わりに CSS の使用を検討します。
- 圧縮を有効にします。