画面外画像の遅延読み込み

Silktide は、訪問者がまだ見られない画像、つまりページのさらに下、最初の画面より下にある画像をページがダウンロードしているかどうかをチェックします。そのような画像を先に読み込むと、訪問者が実際に見ているコンテンツの読み込みが遅れます。

解決策はです。すべての画像をページの読み込み直後にダウンロードするのではなく、ブラウザが各画像を、スクロールして表示される直前に取得します。

重要な理由

ページを読み込むとき、ブラウザが使える帯域幅には限りがあり、ダウンロードするすべての画像が他のリソースと帯域幅を奪い合います。3画面分下にある画像に帯域幅を使うと、訪問者が待っている見出し画像やテキスト、ボタンの表示が遅れます。

画像が多い長いページでは、無駄が大きくなります。最初の画面だけを読んで離脱する訪問者は、見てもいない数十枚の画像のために、時間とモバイルデータ通信量を費やすことになる場合があります。

修正方法

最初の画面より下にある画像に loading="lazy" を追加します。ブラウザはこれをネイティブにサポートしているため、スクリプトは必要ありません。

<!-- ページのかなり下にあるため、訪問者が近づくまで読み込まない -->
<img src="team-photo.jpg" alt="私たちのチーム" loading="lazy" width="800" height="600">

ページの上部、特に最大の画像には遅延読み込みを設定しないでください。訪問者が最初に見るものの表示が遅れ、改善よりも悪影響のほうが大きくなります。
現在、多くの CMS やフレームワークは画像を自動的に遅延読み込みします。使用しているものが対応していない場合は、テンプレートを編集する前に設定やプラグインを確認してください。
遅延読み込みする画像には明示的な寸法を指定して、画像の表示時にページがずれないようにします。画像サイズの明示を参照してください。

Silktide のテスト方法

速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザでページを読み込みます。
初回読み込み中にダウンロードされ、表示領域より完全に下に配置されていて、まだ遅延されていない画像を特定します。
画面外にある各画像について、遅延可能なダウンロードサイズを報告します。
遅延可能な合計サイズに基づいてページを評価します。約 30 KB で評価が下がり、100 KB 以上で低評価になります。

トラブルシューティング

画像が画面に表示されています

「画面外」とみなされる範囲は画面によって異なります。Silktide は速度テスト用に設定されたデバイスでテストするため、デスクトップのスクロールせずに表示できる範囲の横にある画像が、より小さいでは最初の画面より下になる場合があります。遅延読み込みは安全です。訪問者が画像に近づくとすぐに読み込まれます。

スクリプトですでに遅延読み込みしています

古いスクリプトベースの方法では、ダウンロードが早すぎる場合や、他のプラグインによって追加された画像が対象にならない場合があります。報告された画像には、画面外にある状態で実際にダウンロードされたものが正確に示されます。ネイティブの loading="lazy" が、最も簡単で確実な修正方法です。