このページは Cloud Translation API によって翻訳されました。

遅延読み込みのベストプラクティス

Jeremy Wagner

Rachel Andrew

画像と動画の遅延読み込みはパフォーマンスの測定が可能で、決して軽視すべきではありません。間違えた場合、想定外の結果になることもありますそのため、以下を維持することが重要です。念頭に置いてください

スクロールせずに見える範囲に注意

ページ上のすべてのメディアリソースをただし、この誘惑に抵抗する必要があります。雲の上に置かれているものは折りたたみ読み込みを遅らせるべきではありません。このようなリソースは通常どおり読み込まれます。

遅延読み込みでは、DOM がインタラクティブになるまでリソースの読み込みを遅らせるスクリプトの読み込みが完了して実行を開始したときに通知を受け取れます。ラベルの下の画像についてスクロールせずに見える範囲にある重要なリソースは、可能な限り早く表示されるようにします。<img>

もちろん、最近ではウェブサイトのスクロールせずに見える範囲がさまざまなサイズの画面に表示されます。スクロールせずに見える範囲にあるノートパソコンモバイルデバイスでは下に表示されるはずです。セキュリティに関する確実なアドバイスはあらゆる状況で最適な方法で対処できますまずページの重要なアセットのインベントリを作成し、考えています

また、折りたたみ線についてあまり厳格にしない方がしきい値を指定します。ユースケースによっては、スクロールしなければ見えない範囲にバッファゾーンを設けて画像表示が始まり読み込み時間がかなり前に読み込まれるようにします。たとえば、 Intersection Observer API を使用すると、rootMargin プロパティを新しい IntersectionObserver インスタンスを作成するときに、オプションオブジェクトが作成されます。この要素にバッファを効果的に渡し、遅延読み込み動作がトリガーされた後に要素はビューポートにあります。

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

rootMargin の値が CSS に指定した値と類似している場合これは margin プロパティであるためです。この例では、監視対象の要素の下余白（デフォルトではブラウザのビューポートですが、 root プロパティを使用して特定の要素に変更できます）は、256 に拡張されます。ピクセルです。つまり、このコールバック関数は、画像要素が 256 ピクセル以内に収まると画像の読み込みがユーザーが実際に目にするまでの時間です

Intersection Observe をサポートしていないブラウザでこれと同じ効果を得るには、スクロールイベント処理のコードを使用して、バッファを含めるための getBoundingClientRect チェック。

レイアウトシフトとプレースホルダ

メディアの遅延読み込みにより、プレースホルダが使用されない場合、レイアウトがシフトする可能性があります。こうした変更により、ユーザーにとって方向性を失い、負荷の高い DOM レイアウトがトリガーされる可能性があります。システムリソースを消費し、ジャンクの原因となります。少なくとも画像と同じ寸法の単色のプレースホルダをターゲット画像、または LQIP または SQIP: メディアのコンテンツを示します。指定することもできます。

<img> タグの場合、src は、開始されるまではまずプレースホルダを参照するようにします。属性は最終画像の URL で更新されます。poster 属性をプレースホルダ画像を指す <video> 要素。さらに、width と <img> タグと <video> タグの両方の height 属性。これによりプレースホルダから最終画像に移行してもレンダリングサイズは変わらないメディアが読み込まれるたびに要素のサイズが決まります。

画像のデコードの遅延

JavaScript で大きな画像を読み込んで DOM にドロップすると、ユーザーインターフェースが短時間応答しない状態になった時間を表します。decode を使用した画像の非同期デコードメソッドこのようなジャンクを減らすことはできますが注意: すべての地域ではまだ利用できるわけではなく、遅延読み込みのロジックが複雑になります。使用する場合は、確認する必要があります。以下の番組フォールバックで Image.decode() を使用する方法:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

こちらの CodePen のリンクをいくつか見てみましょうほとんどの画像がかなり小さい場合はあまり役に立たないかもしれませんが大きな画像を遅延読み込みして DOM に挿入します。

読み込まれない場合

なんらかの理由でメディアリソースの読み込みに失敗し、エラーが発生することがあります。発生しませんこれはどのような場合に発生する可能性がありますか。場合により異なります。ここでは例として、短期間（例: 5 日間など）の HTML キャッシュ保存ポリシーをユーザーがサイトにアクセスした、またはユーザーが古いタブを開いたままにしてコンテンツを読むために何度も戻ってくる場合です。このプロセスのある時点で、再デプロイが行われます。このデプロイ中に、ハッシュベースのバージョニングにより画像リソースの名前が変更された、または削除されたありますユーザーが画像を遅延読み込みするまでに、リソースは使用不可になり失敗します

このような事態は比較的まれですが、バックアップを取っておくことをおすすめします。遅延読み込みがうまくいかない場合に備えて画像の場合、このようなソリューションはこれを次のように使用します。

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

エラーの発生時に何をするかは、アプリケーションによって異なります。対象たとえば画像のプレースホルダの領域をユーザーが画像を再度読み込もうとするか、エラーメッセージクリックします。

他のシナリオも考えられます。何をするにせよ、エラー発生時にユーザーに通知し、場合によっては問題が起こったときに受け取れます

JavaScript の対応状況

JavaScript が常に利用できるとは限りません。トレーニング画像の遅延読み込み。次の場所に画像を表示する <noscript> マークアップを提供することを検討してください。 JavaScript を使用できない場合です。最も簡単なフォールバックの例は次のとおりです。 JavaScript がオフになっている場合に <noscript> 要素を使用して画像を提供する:

JavaScript を無効にしている場合は、プレースホルダ画像と <noscript> 要素に含まれる画像。これを回避するには、 <html> タグで no-js クラスを次のように指定します。

<html class="no-js">

次に、<head> のスタイルシートの前に 1 行のインラインスクリプトを配置します <html> から no-js クラスを削除する <link> タグを介してリクエストされる JavaScript がオンの場合:

<script>document.documentElement.classList.remove("no-js");</script>

最後に、CSS を使用して、Lazy クラスの要素を非表示にします。 JavaScript を使用できない:

.no-js .lazy {
  display: none;
}

プレースホルダの画像の読み込みが妨げられることはありませんが、あります。JavaScript をオフにしているユーザーは、プレースホルダ以上の情報が表示される意味のある画像コンテンツがなく、できます。

遅延読み込みのベスト プラクティス