画像と動画の遅延読み込みはパフォーマンスの測定が可能で、 決して軽視すべきではありません。間違えた場合、 想定外の結果になることもありますそのため、以下を維持することが重要です。 念頭に置いてください
スクロールせずに見える範囲に注意
ページ上のすべてのメディア リソースを ただし、この誘惑に抵抗する必要があります。雲の上に置かれているものは 折りたたみ読み込みを遅らせるべきではありません。このようなリソースは 通常どおり読み込まれます。
遅延読み込みでは、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 をオフにしているユーザーは、プレースホルダ以上の情報が表示される 意味のある画像コンテンツがなく、 できます。