遅延負荷による最適化速度

それは驚くべきではない画像は、ウェブサイトの重い部分の1つは、読み込みになる.あなたのウェブサイトのローディングを最適化するために行うことができます最高のものの一つは怠惰な負荷にすることができますように多くのイメージとして、今あなた自身のJavascriptを使用せずに行うことができますネイティブ怠惰な負荷のおかげで.

JavaScriptなしでイメージを非同期に読み込む方法
非同期の読み込みイメージは、ブラウザのビューポート(または直前)に表示されるときにのみ画像を読み込みます.これの利点は、ウェブサイトの初期のペイントの中では見られないすべてのイメージをロードする必要がないので、あなたのサイトが最初に速くロードされるということです.おかげでwell supported ネイティブloading 属性を使用すると、JavaScriptライブラリを追加するのを避けることができます(または独自のスクリプトを書く)ときに画像をビューポートにしてロードすることを検出する.

使用loading 属性
読み込み属性に使用できる3つの値があります.

デフォルト値.属性を設定しないことと同じです.

熱心に-すぐにリソースを読み込みます.

lazy -ビューポート内のリソースを読み込みます.

一般的に言って、折り目より上に座る資源と折り目の下に座る資源のための怠惰な価値のために熱心な価値を使うのは意味があるでしょう.または、折り目の上に画像に読み込み属性を含めることはできません.

読み込み属性を使用したイメージマークアップ
それで、あなたのイメージマークアップは、ロード属性を使用する必要がありますか?以下が例です.

<img src="image.jpg" alt="..." width="200" height="200" loading="lazy" />

あなたがイメージ局面を指定する怠惰を使うとき、それは重要ですwidth and height 属性またはインラインスタイル内で.設定が設定されていない場合、レイアウトシフトが発生する可能性があります.

Loading属性を画像要素で使用する

<picture>
  <source srcset="large.jpg 1x, larger.jpg 2x" media="(min-width: 800px)" />
  <img src="image.jpg" alt="..." />
</picture>

ブラウザのいずれかのソースから読み込むイメージを決定します.The loading 属性はフォールバック要素にのみ含める必要があります.

古いブラウザのための遅延読み込みサポート
それをサポートしていない古いブラウザの場合はloading 属性は無視されます、そして、あなたのイメージは最初のページ訪問のウェブサイトの残りでロードされます.もちろん、私たちは、できるだけ多くのウェブサイトの訪問者に、彼らがどんなブラウザーであっても、怠惰な荷を提供するのを見なければなりません.では、サポートされていないブラウザでユーザにどのようにこれを提供できますか?唯一の方法は、同じ機能を提供するためにJavaScriptのフォールバックを読み込むことです.私たちがしたくないことは、私たちのスクリプトをサポートされているブラウザの上にあります.それで、我々は何をすることができますか?ユーザーがこのスニペットを使用してサポートされているブラウザ上にあるかどうかを検出します.

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

すべてをまとめる

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazyload the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

現在、我々は、我々がウェブサイトの中でロードするために必要とするイメージを最適化する古いブラウザーのためにフォールバックを提供している間、生来の怠惰な荷を利用するために固いすべての解決策を持っています.