画像の遅延読み込み

Jeremy Wagner
Rachel Andrew

画像が <img> 要素として HTML にインラインで表示されるため、ウェブページに表示される可能性があります CSS の背景画像として使うことができますこの投稿では、両方のタイプの画像を遅延読み込みする方法を説明します。

インライン画像

最も一般的な遅延読み込みの候補は、<img> 要素で使用される画像です。 インライン画像には遅延読み込みと これらを組み合わせて使用することで、ブラウザ間で最適な互換性を確保できます。

ブラウザレベルの遅延読み込みを使用する

Chrome と Firefox はどちらも、loading 属性を使用した遅延読み込みをサポートしています。 この属性は <img> 要素と <iframe> 要素に追加できます。 値 lazy は、画像がビューポートにある場合はすぐに読み込むようブラウザに指示します。 ユーザーが他の画像の近くをスクロールしたときに取得します

MDN の loading フィールドを参照 ブラウザの互換性 ブラウザ サポートの詳細の表をご覧ください。 ブラウザで遅延読み込みがサポートされていない場合、この属性は無視されます。 画像は通常どおりすぐに読み込まれます

ほとんどのウェブサイトでは、この属性をインライン画像に追加すると、パフォーマンスが向上します ユーザーがスクロールできないような画像を読み込むのを防ぎます 大量の画像があり、遅延読み込みをサポートしていないブラウザのユーザーにもメリットがもたらされるようにしたい場合 次に説明する方法のいずれかと組み合わせる必要があります。

詳しくは、ウェブ向けのブラウザレベルの遅延読み込みをご覧ください。

Intersection Observer を使用する

<img> 要素の遅延読み込みをポリフィルするには、JavaScript を使用して、要素 表示されなくなります。存在する場合、その src（場合によっては srcset）属性は次のようになります。 には、目的の画像コンテンツの URL が入力されます。

遅延読み込みコードを作成したことがある方は、タスクを scroll や resize などのイベント ハンドラを使用します。このアプローチは 最新のブラウザの方がパフォーマンスが高く、 要素の表示のチェックを効率的に行うには、 Intersection Observer API を使用します。

Intersection Observer は、さまざまなリソースに依存するコードよりも使いやすく、読みやすいです。 オブザーバーを登録すれば、必要なイベント ハンドラを 要素を簡単に作成できます。すべて あとは、要素を表示したときにどうするかを決めるだけです。 遅延読み込みされる <img> 要素に対して、次の基本的なマークアップ パターンがあるとします。

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

このマークアップに関しては、次の 3 つの点に注意する必要があります。

  1. class 属性。これは、次の要素で要素を選択します。 使用できます。
  2. src 属性。次の場合に表示されるプレースホルダ画像を参照します。 最初にページが読み込まれます。
  3. プレースホルダの属性である data-src 属性と data-srcset 属性 要素がビューポートに配置された後に読み込む画像の URL を含むものです。

次に、JavaScript で Intersection Observer を使用して遅延読み込みを行う方法を見てみましょう。 画像を次のマークアップ パターンで使用します。

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

ドキュメントの DOMContentLoaded イベントが発生すると、このスクリプトは DOM に対してクエリを実行し、 クラスが lazy の <img> 要素。Intersection Observer を利用できる場合は、 img.lazy 要素が開始したときにコールバックを実行する新しいオブザーバーを作成します。 表示されなくなります。

Intersection Observer はすべての最新ブラウザで利用できます。 そのため、loading="lazy" のポリフィルとして使用することで、ほとんどの訪問者が遅延読み込みを利用できるようになります。

CSS の画像

<img> タグはウェブページで画像を使用する最も一般的な方法ですが、画像 CSS を介して呼び出すこともできます。 background-image プロパティ（および他のプロパティ）を指定します。ブラウザレベルの遅延読み込みは、CSS 背景画像には適用されません。 そのため、背景画像を遅延読み込みする場合は、他のメソッドを検討する必要があります。

場所に関係なく読み込まれる <img> 要素とは異なり CSS での画像読み込み動作を、より細かく 投機。ドキュメントと CSS オブジェクトが モデル とレンダリング 木 ブラウザは、CSS がドキュメントにどのように適用されるかを確認し、 外部リソースのリクエストに使用できます。ブラウザが CSS ルールを決定している場合 外部リソースに関するものは、現在ドキュメントに ブラウザは要求しません。

この投機的動作を使用すると、CSS での画像の読み込みを遅らせることができます。 JavaScript を使用して要素がビューポート内にあるかどうかを判別する 次にその要素にクラスを適用し、スタイル設定を適用して 使用できます。これにより、必要なときにイメージがダウンロードされます。 初期読み込み時ではなく例として、このスライド内の要素に ヒーローの背景画像（大）:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

div.lazy-background 要素には通常、ヒーロー背景が含まれます。 呼び出すことができます。ただし、この遅延読み込みの例では、 visible による div.lazy-background 要素の background-image プロパティ クラスがビューポート内にあるときに要素に追加されます。

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

ここから、JavaScript を使用して要素がビューポートにあるかどうかを確認します（ Intersection Observer!）を作成し、visible クラスを その時点の div.lazy-background 要素によって画像が読み込まれます。

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

Largest Contentful Paint（LCP）への影響

遅延読み込みは優れた最適化であり、画像の読み込みを実際に必要なときまで遅らせることで、全体的なデータ使用量と起動時のネットワーク競合の両方を削減します。これにより、起動時間を短縮し、画像のデコードに必要な時間を短縮してメインスレッドの処理を減らすことができます。

ただし、遅延読み込みは、ウェブサイトの Largest Contentful Paint LCP に悪影響を及ぼす手法です。避けたいことの 1 つは、起動時にビューポートにある画像を遅延読み込みすることです。

JavaScript ベースの遅延ローダーを使用する場合、ビューポート内の画像の遅延読み込みは避けてください。このようなソリューションでは、src 属性と srcset 属性のプレースホルダとして data-src 属性または data-srcset 属性を使用することが多いためです。ここでの問題は、ブラウザのプリロード スキャナが起動時に画像を検出できないため、これらの画像の読み込みが遅延することです。

ブラウザレベルの遅延読み込みを使用してビューポート内の画像の遅延読み込みをしても、逆効果になることがあります。ビューポート内の画像に loading="lazy" を適用すると、画像がビューポートにあることをブラウザが認識するまで遅延し、ページの LCP に影響する可能性があります。

起動時にビューポートに表示される画像を遅延読み込みしないでください。このパターンは、サイトの LCP に悪影響を及ぼし、ひいてはユーザー エクスペリエンスに悪影響を及ぼします。起動時に画像が必要な場合は、遅延読み込みをしないようにして、起動時にできるだけ短時間で読み込みます。

ライブラリの遅延読み込み

可能な限りブラウザレベルの遅延読み込みを使用することをおすすめしますが、それを使用できない状況（多くのユーザーが古いブラウザを使用している場合など）では、次のライブラリを使用して画像の遅延読み込みを行うことができます。

  • lazysizes は 画像や iframe を遅延読み込みする読み込み用ライブラリです。使用されるパターンは、 この例のコードサンプルとよく似ており、 <img> 要素に対する lazyload クラスです。次の要素で画像 URL を指定する必要があります。 data-src 属性または data-srcset 属性（内容が入れ替えられる） src 属性または srcset 属性にそれぞれ格納します。Intersection を使用 Observer は（ポリフィル可能）、 プラグインを 動画の遅延読み込みなどを行います。遅延サイズの使用について詳細を確認する。
  • vanilla-lazyload は 軽量なオプションです。画像、背景画像、動画、iframe、 使用できます。Intersection Observer を利用し、レスポンシブな画像をサポートしています。 ブラウザレベルの遅延読み込みを有効にします。
  • lozad.js: 別の軽量なライブラリ Intersection Observer のみを使用するオプションが用意されています。そのため パフォーマンスが高く 古いブラウザで使用するには、ポリフィルする必要があります。
  • React 固有の遅延読み込みライブラリが必要な場合は、 react-lazyload。この間、 Intersection Observer は使用しませんが、一般的な遅延手法を使用できます。 React でアプリケーションを開発するのに慣れている人のために、画像を読み込むことをおすすめします。