Webサイトの遅延読み込みをカスタマイズするための最良の方法
公開: 2019-07-29遅延読み込みは、ユーザーが後でWebページにアクセスしたときに、一部の画像またはWebページ要素の読み込みを延期するために使用されます。 これは通常、スクロールしなければ見えない位置にある画像やWebサイト要素に対して行われます。 アイデアは、Webページ全体を一度にロードするのではなく、ユーザーが下にスクロールし続けるときにWebページの一部をロードするというものです。
遅延読み込みを使用する主な利点は、ウェブサイト全体の読み込み時間を短縮できることです。 遅延読み込みは、訪問者がすぐに見たり読んだりできる上部を最初に読み込むことで、Webサイトのパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させます。 訪問者があなたのウェブページに来て、長く待たなければならないとき、彼らは彼らの興味を失い、去ってしまうかもしれません。 ただし、残りのWebページをロードしているときに、すぐに見たり読んだりできるものを提供すると、Webサイトに夢中になり続けることができます。 遅延読み込みの2番目の利点は、コストの削減です。 画像は、Webサイトの訪問者がWebサイトの特定のセクションにアクセスした場合にのみダウンロードされます。 したがって、訪問者が下にスクロールしない場合、デバイスにダウンロードされるデータが少なくなり、コストを節約できます。
これらの利点により、遅延読み込みはWebサイトのユーザーエクスペリエンスと効率を向上させる優れた方法です。
Webサイトの遅延読み込みは、CSSbackgroundプロパティを使用する方法と<img>タグを使用する方法の2つの方法でカスタマイズできます。 ただし、<img>タグ方式は、この手法が使いやすいため、2つのうちでより一般的です。
<img>タグプロパティ：
<img>タグを使用すると、ブラウザはsrc属性を使用して画像の読み込みをトリガーします。 コードの最初の画像であるか100番目の画像であるかは関係ありません。 ブラウザがsrc属性を受け取ると、画像の読み込みがトリガーされます。 したがって、これらの画像をレイジーロードするには、画像のURLをsrc以外の属性に追加します。 たとえば、画像のURLをdata-src属性に配置すると、src属性が空であるため、ブラウザは画像の読み込みをトリガーしません。
前払いの読み込みが停止したので、画像をいつ読み込む必要があるかをブラウザに通知する必要があります。 ビューポートに入るとすぐに画像の読み込みをトリガーしたいと思います。 画像がビューポートに入るタイミングを確認するには、次の2つの方法があります。
1. JavaScriptイベントの使用：
この手法では、イベントリスナーは、ブラウザーでのイベントのサイズ変更、方向の変更、およびスクロールに使用されます。 スクロールイベントは最も明白なものです。 ユーザーがいつWebページをスクロールしたかを確認するために使用されます。 'orientationChange'イベントと'resize'イベントは、遅延読み込みに等しく不可欠です。 ブラウザウィンドウのサイズが変更されると、サイズ変更イベントがトリガーされます。 'orientationChange'イベントは、デバイスがポートレートモードからランドスケープモードに、またはその逆に回転したときに発生します。 このような場合、画面に表示される画像の数が変わるため、画像の読み込みをトリガーする必要があります。
これらのイベントのいずれかが発生すると、まだ読み込まれていないページに存在するすべての画像が検索されます。 現在ビューポートにあるWebページに存在するアンロードされたすべての画像をチェックすることにより、すぐにロードする必要がある画像を見つけます。 これは、現在のドキュメントのスクロールトップ、ウィンドウの高さ、および画像のトップオフセットを使用して行われます。
画像がビューポートに入った場合、data-src属性から画像のURLを取得し、それをsrc属性に配置して画像の読み込みをトリガーします。 次に、このクラスは画像の読み込みを遅延させるため、画像から遅延クラスを削除する必要があります。 すべての画像が読み込まれると、イベントリスナーが削除されます。
スクロールの場合、スクロールイベントは継続的にトリガーされます。 したがって、パフォーマンスを向上させるために、遅延読み込みの実行を抑制する小さなタイムアウトを追加できます。
2.交差オブザーバーAPIの使用：
Intersection Observer APIは、ブラウザの比較的新しいAPIです。 この手法により、要素がビューポートに入るタイミングを非常に簡単に検出できます。 この手法は、以前の方法と比較して、複雑な数学を使用せずに優れたパフォーマンスを提供します。
まず、遅延読み込みが必要なすべての画像にオブザーバーをアタッチする必要があります。 APIは、画像がビューポートに入ったことを検出すると、data-srcからURLを選択し、「isIntersecting」メソッドを使用してそれをsrc属性に配置して、画像の読み込みをトリガーします。 その後、オブザーバーを削除するとともに、レイジークラスも削除されます。
Intersection Observer APIは、JavaScriptイベントを使用する場合と比較して、スクロール時にサイトの動作が遅くなることなく、すばやく機能します。 イベントリスナーの手法では、わずかな遅延を追加するタイムアウトを追加する必要がありました。 ただし、IntersectionObserverAPIはすべてのブラウザでサポートされているわけではありません。 したがって、イベントリスナーはユーザーに人気のある選択肢になっています。
CSS背景プロパティ：
CSS背景画像をロードするために、ブラウザは、CSSスタイルが既存のドキュメントに存在するDOMに適用されるかどうかを決定するために、ドキュメントオブジェクトモデル（DOM）とともにCSSオブジェクトモデル（CSSOM）を構築する必要があります。 CSSルールが要素に適用されない場合、ブラウザは背景画像をロードしません。
この手法では、要素がビューポートに到達したときに背景画像のCSSプロパティを適用します。 CSSにはIDbg-image（背景画像）の要素があります。 クラスlazyが画像に追加されると、CSS手法で、bg-imageプロパティをオーバーライドしてnoneにします。
CSSでは、＃bg-imageを単独で使用するよりも.lazyクラスを＃bg-imageに追加することをお勧めします。 最初に、ブラウザはbackground-image：noneを要素に適用します。 Webページをスクロールすると、イベントリスナーまたは交差オブザーバーがビューポートに存在する画像を検出し、.lazyクラスを削除します。 bg-imageプロパティが背景画像の読み込みをトリガーする要素に適用されるため、これはCSS手法には適用されません。
だから、ここにあなたがあなた自身の怠惰なローディングウェブサイトをカスタマイズすることができる2つの方法があります。 これらの手法はどちらも、並外れた結果をもたらします。 ただし、簡単な手法が必要な場合は、<img>タグを使用する必要があります。 WordPressユーザーがWordPressWebサイトで遅延読み込み画像をカスタマイズするために利用できるプラグインはたくさんあります。 これらのプラグインを使用してWordPressWebサイトの画像を最適化し、遅延読み込みを行うと、Webサイトのパフォーマンスが向上し、優れたエクスペリエンスが提供され、SEOにも役立ちます。