検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >ウェブサイトのパフォーマンスを高めるための怠zyなロード画像のための5つのテクニック

ウェブサイトのパフォーマンスを高めるための怠zyなロード画像のための5つのテクニック

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-08 09:30:11158ブラウズ

5 Techniques for Lazy Loading Images to Boost Website Performance

最新のWebアプリケーションでは、画像が最も一般的に使用されるコンテンツタイプの1つになりました。背景画像を使用すると、アプリケーションの視覚効果が向上する可能性がありますが、画像サイズが大きすぎるとアプリケーションのパフォーマンスに大きく影響します。

最適化後も、画像はまだ多くのスペースを占有する可能性があり、ユーザーがあまりにも長く待つことができます。ユーザーがコンテンツへの迅速なアクセスのエクスペリエンスを取得しない場合、忍耐を失い、他のWebサイトに目を向ける傾向があるため、効率的な画像読み込みスキームが重要です。

この記事では、ウェブサイトを最適化し、ユーザーエクスペリエンスを向上させるのに役立つ5つの怠zyな画像読み込み方法を紹介します。これらの方法は、背景画像、インライン画像、バナー画像など、あらゆる種類の画像に適しています。

キーポイント

  • 画像の読み込みは、写真を非同期にロードすることにより、ウェブサイトのパフォーマンスを改善します。これは、モバイルデバイスと遅いネットワークを使用するユーザーにとって特に重要です。
  • ネイティブのレイジーロードは、ほとんど余分なオーバーヘッドを持たないHTMLを使用する簡単な方法ですが、すべてのブラウザがこの機能をサポートするわけではありません。交差点オブザーバーAPIは、実装しやすく効果的な方法ですが、すべてのブラウザもそれをサポートするわけではありません。
    • Lozad.jsやYall.jsなどのJavaScriptライブラリは、画像、ビデオ、IFRAMEの怠zyなロードを迅速かつ簡単に実装できます。交差点オブザーバーAPIを使用していますが、ブラウザの互換性を考慮する必要があります。
    • 中程度のWebサイトに似ていますが、怠zyな高解像度の写真を読み込んでいる間、最初にぼやけた低解像度の写真を表示します。これは、網膜スクリーンもサポートするCraig Bucklerによって提案された高性能方法など、さまざまな方法で実現できます。

怠zyなロードとは何ですか？

怠zyな画像読み込みは、ウェブサイトに画像を非同期的に読み込むことを意味します。コンテンツは、ページが完全に読み込まれた後、または画像がブラウザウィンドウに表示される場合にのみ、必要に応じてロードできます。これは、ユーザーが下部までスクロールしない場合、ページの下部にある画像がロードされず、最終的にアプリケーションのパフォーマンスが向上することを意味します。

ほとんどのWebサイトでは、HTMLで怠zyなロードを有効にする方法を知ることが重要です。たとえば、HD写真でお気に入りのWebサイトを閲覧してみてください。すぐに、ウェブサイトが限られた数の画像のみをロードしていることがわかります。ページを下にスクロールすると、プレースホルダーの画像は実際の画像にすばやく置き換えられます。

unstplash.comの怠zyな読み込み例

5 Techniques for Lazy Loading Images to Boost Website Performance なぜ画像の怠zyなロードを実装する必要があるのですか？

怠zyなロード画像の方法を学ぶことは、特に多くの視覚的なコンテンツを持つページで、Webパフォーマンスを最適化するために不可欠です。ウェブサイトの怠zyなロード画像を検討する必要がある理由は次のとおりです。

1 あなたのウェブサイトがJavaScriptを使用してコンテンツを表示するか、ユーザーに何らかの機能を提供する場合、DOMをすばやくロードすることが重要です。スクリプトは通常、DOMが完全にロードされた後に実行を開始します。多数の画像を備えたWebサイトでは、怠zyな読み込み（または非同期にロードされている画像）は、ユーザーがウェブサイトを閲覧し続けるか、離れ続けるかどうかを判断する場合があります。

    • 2帯域幅を保存します

ほとんどのレイジーロードソリューションは、ユーザーがウィンドウ内で画像が表示される場所にスクロールする場合にのみ画像をロードするため、ユーザーがその場所に到達しない場合、これらの画像は決してロードされません。これは、多くの帯域幅の節約を節約できることを意味します。これは、ほとんどのユーザー、特にモバイルデバイスと遅いネットワークを使用しているユーザーにとって非常に有益です。 画像の怠zyなロードは、ウェブサイトのパフォーマンスを改善するのに役立ちますが、それを行うための最良の方法は何ですか？

    完璧な方法はありません。
    • JavaScriptに習熟している場合は、独自の怠zyなロードソリューションを実装することは問題ではありません。独自のコードを書くことほど制御するものはありません。

または、ウェブを閲覧してそれを行う方法を見つけるか、ディスカッションフォーラムに参加してアイデアを共有することができます。私は同じことをして、これらの5つの興味深い方法を見つけました。

1

ユーザーがWebページをスクロールした場合、画像とIFRAMEのネイティブレイジーロードは、コンテンツを直接ロードする方法です。画像とiframeに

属性を追加するだけです。

ご覧のとおり、JavaScriptの必要はありません。また、通常のHTMLを使用して、属性の値を動的に置き換えません。このアプローチは、余分なオーバーヘッドなしでHTMLに怠zyな負荷を追加する完璧な例です。

「ロード」プロパティを使用すると、ユーザーがページ上の対応する位置にスクロールするまで、オフスクリーン画像とiFrameの読み込みを遅らせることができます。 「ロード」は、次の3つの値のいずれかをとることができます：

loading="lazy"

怠zy：怠zyなロードに非常に適しています
<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

eager：指定されたコンテンツをすぐにロードするようブラウザに指示しますsrc

Auto：怠lazにロードするかどうかにかかわらず、オプションをブラウザに残します。

    このメソッドは比類のないものです。オーバーヘッドはほとんどなく、HTMLの怠zyなロード画像のクリーンでシンプルな方法です。ただし、ほとんどの主流のブラウザは「ロード」プロパティを適切にサポートしていますが、執筆時点ではまだ完全なサポートがありません。
  • ブラウザのサポートワークアラウンドを含む、このHTMLレイジーロード画像のパワーに関する詳細な記事、Addy Osmaniの「ネイティブイメージのレイジーロードのWeb！」をお見逃しなく。
    • 2
  • 交差点オブザーバーAPIは、怠zyなロード画像やその他のコンテンツに使用できる最新のインターフェイスです。
以下は、MDNのこのAPIの紹介です：

交差点オブザーバーAPIは、祖先要素またはトップレベルのドキュメントウィンドウを使用して、ターゲット要素の交差変化を非同期的に観察する方法を提供します。

言い換えれば、交差点オブザーバーAPIは、ある要素と別の要素の交差点を非同期に監視します。

Denys Mishunovは、交差点オブザーバーに関する優れたチュートリアルを書き、それを怠zyなロード画像に使用しました。彼の解決策は次のとおりです

画像ライブラリを怠zyなロードしたいとします。各画像のマーキングは次のとおりです

ここで、画像へのパスは
<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>
属性に含まれており、

属性ではありません。その理由は、data-srcを使用すると、画像がすぐにロードされることを意味しますが、これはあなたが望むものではありません。 src CSSでは、100pxなどの各画像のsrc値を指定できます。これにより、各画像プレースホルダー（

属性のないIMG要素）に垂直方向の寸法が与えられます。

min-height次に、JavaScriptドキュメントでは、構成オブジェクトを作成し、srcインスタンスに登録する必要があります。 

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>
最後に、すべての写真を反復して、これらをこの

インスタンスに追加できます。 intersectionObserver

このソリューションの利点は、実装しやすく、効率的で交差するのが簡単であることです。オブザーバーは、ほとんどのコンピューティング作業を実施しています。 
<code class="language-css">img {
  min-height: 100px;
  /* more styles here */
}</code>

ブラウザのサポートの観点から、IE 11およびOpera Miniを除くすべての主流のブラウザは、最新のバージョンの交差点オブザーバーAPIをサポートしています。 iterationObserver

交差点オブザーバーAPIとこの実装の詳細については、Denysの記事の詳細について詳しく知ることができます。 
<code class="language-javascript">// 创建配置对象：rootMargin和threshold是接口公开的两个属性
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// 使用intersectionObserver实例注册配置对象
let observer = new IntersectionObserver(function(entries, self) {
  // 迭代每个条目
  entries.forEach(entry => {
    // 只处理相交的图片。isIntersecting是接口公开的属性
    if(entry.isIntersecting) {
      // 将图片路径从data-src复制到src的自定义函数
      preloadImage(entry.target);
      // 图片现在已就位，停止观察
      self.unobserve(entry.target);
    }
  });
}, config);</code>

3 lozad.js

lozad.js javascriptライブラリの怠zyなロード

怠zyな画像読み込みを実装するための迅速かつ簡単な代替手段は、JSライブラリがあなたのためにほとんどの作業を行わせることです。

lozad.jsは、依存性のない純粋なJavaScriptを使用する高性能、軽量、および構成可能なレイジーローダーです。ユーザーがスクロールするときにJavaScript、写真、ビデオ、IFRAMEを怠zyなロードするための優れたツールです。

5 Techniques for Lazy Loading Images to Boost Website Performance NPM/YARNを使用してLozadをインストールし、選択したモジュールパッカーを使用してインポートできます。

または、CDNを使用してライブラリをダウンロードして、HTMLページの下部にある

に追加するだけです。

次に、基本的な実装については、タグのリソースにクラスを追加してください：

最後に、JSドキュメントにLozadをインスタンス化します：
<code class="language-javascript">const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});</code>
<code class="language-bash">npm install --save lozad

yarn add lozad</code>

Lozad Githubリポジトリでライブラリを使用するすべての詳細を見つけることができます。

lozadは、交差点オブザーバーAPIについて知りたくない場合、またはさまざまなコンテンツタイプの迅速な実装を探している場合に最適なオプションです。 lozad 

<code class="language-javascript">import lozad from 'lozad';</code>

あなたが中程度の読者である場合、あなたはサイトが投稿のメイン画像をどのようにロードするかに気付いたに違いありません。最初に表示されるのは、画像のぼやけた低解像度のコピーであり、その高解像度バージョンは怠zyなロードです：

CSSとJavaScriptを使用して、HTMLで怠zyなロード画像を使用すると、同様の効果を得ることができます。

5 Techniques for Lazy Loading Images to Boost Website Performance

中程度のウェブサイト上のぼやけたプレースホルダーの写真
5 Techniques for Lazy Loading Images to Boost Website Performance
中程度のウェブサイト上の高解像度の怠zyなロード写真

この楽しいぼかし効果を画像に追加することができます。

私のお気に入りの方法は、Craig Bucklerメソッドです。このソリューションのすべての利点は次のとおりです

    パフォーマンス：CSSの463バイトと圧縮JavaScriptコードの1007バイトのみ。
    • 網膜画面をサポートします。
    • 依存関係なし：jQueryやその他のライブラリとフレームワークは必要ありません。
  • レガシーブラウザとJavaScriptの障害に対処するために徐々に強化されました。
    • 「独自のプログレッシブイメージローダーを構築する方法」の関連情報をすべて読み取り、プロジェクトのGitHubリポジトリにコードをダウンロードできます。

5

Yall.jsは、ユーザーがスクロール中に交差点オブザーバーAPIをLazy Load JavaScriptに使用する機能が豊富なJavaScriptライブラリです。写真、ビデオ、Iframesをサポートし、必要に応じて従来のイベントハンドラーテクノロジーに巧妙に戻ります。 ドキュメントにyallを含める場合、次のように初期化する必要があります。

次に、怠zyな単純なIMG要素をロードするには、タグで以下を実行する必要があります。

次のポイントに注意してください：

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

クラスを要素に追加します。 

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

の値は、プレースホルダー画像です。

    怠zyな負荷にしたい画像のパスは、
  • プロパティにあります。 lazy
  • yall.jsの利点は次のとおりです src
    • 交差点オブザーバーAPIを使用して優れたパフォーマンスを取得します。
  • data-src優れたブラウザーサポート（IE11に戻ります）。
他の依存関係は必要ありません。

    yall.jsが提供できるものとより複雑な実装について詳しく知るには、Githubのプロジェクトページを自由にチェックしてください。
  • 結論
    • プロジェクトで実験とテストを開始できる5つの怠zyな読み込み方法があります。怠zyなロード画像を理解することは、どのWeb開発者にとっても貴重なスキルです。このSitePointフォーラムに参加することで、Image Optimizationの詳細を学ぶか、専門知識を他の人と共有できます。

怠zyな画像の読み込みについてよく尋ねる質問

写真の怠zyなロードとは何ですか？

Lazy Loadingは、画像などの特定の要素を必要になるまで怠zyなロードでWebページのパフォーマンスを向上させるために使用されるWeb開発技術です。レイジー画像の読み込みは、画像がユーザーのウィンドウに入るときにのみロードされるか、Webページに表示されることを意味します。ページが最初にレンダリングされたときにすべての画像をロードするのではなく、すべての画像をロードするのではありません。

怠zyなロード写真の利点は何ですか？

  • ウェブサイトのパフォーマンスの改善
  • 初期ページのレンダリングをスピードアップし、帯域幅の使用量を減らします。
  • ユーザーエクスペリエンスを強化します。
  • サーバーの負荷を削減し、Webアプリケーションの全体的な効率を向上させます。

htmlで怠zyなロード画像をするにはどうすればよいですか？

HTMLの画像に怠zyなロードを追加するには、「ロード」プロパティを使用できます。 「ロード」プロパティは、画像をロードするときに制御できる標準のHTMLプロパティです。 HTMLの怠zyなロード画像を有効にするには、「ロード」プロパティの値を「怠zy」に設定し、IMG要素に追加します。これにより、ブラウザがウィンドウに入ろうとしているときにのみ画像をロードするように指示されます。例は次のとおりです。

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

怠zyな写真をロードしても大丈夫ですか？

はい、Web開発で怠zyな読み込み画像HTMLを使用することは、以下の理由で有益な実践と見なされます。非必須画像読み込みのロードを遅らせることにより、初期ページのレンダリングを高速化し、ユーザーエクスペリエンスを改善します。このアプローチは帯域幅を節約し、データプランが限られているか、インターネット接続が遅いユーザーにとって有益です。さらに、ページの読み込み速度を上げて増分強化の原理に準拠することにより、検索エンジン最適化（SEO）にプラスの影響を与えます。認識されたレイテンシを削減し、ロード中に視覚的な手がかりを提供することにより、怠zyなロードは、特にモバイルデバイスで、よりスムーズで効率的な閲覧体験を提供するのに役立ちます。

画像のロードが怠けているかどうかを知るにはどうすればよいですか？

HTMLでレイジーロード画像を正しく実装したことを確認するには、HTMLソースコードを確認するか、ブラウザー開発者ツールを使用できます。画像を右クリックしてチェックまたはチェック要素を選択することにより、開発者ツールパネルの画像を表すIMG要素を確認できます。 IMG要素に「負荷」属性が存在するかどうかを見つけます。 「ロード」プロパティが「怠zy」に設定されている場合、画像が怠zyになるように構成されていることを意味します。ブラウザ開発者ツールを使用すると、画像のプロパティをチェックすることで、画像の怠zyな読み込みステータスをすばやく決定できます。

JavaScriptを使用して怠zyな画像の読み込みを実現する方法は？

javaScriptを使用して怠zyな画像読み込みを実現するには、lozad.jsやyall.jsなどのライブラリを使用するか、交差点オブザーバーAPIを使用して独自のカスタムソリューションを作成できます。これらのライブラリを使用すると、要素がウィンドウに入ったときに監視してコンテンツをオンデマンドでロードし、その時点でそれらをロードできます。

怠zyな画像の読み込みはSEOに影響しますか？

はい、怠zyな画像の読み込みはSEOにプラスの影響を与える可能性があります。ページの読み込み時間を増やし、最初にロードする必要があるデータの量を減らすことにより、怠zyなロードは、あなたのウェブサイトが検索エンジンの結果でより良いランキングを得るのに役立ちます。より高速なページ速度は、Googleなどのエンジンを検索することで知られているランキング要因であり、怠zyなロードは、ウェブサイトの画像が全体的なパフォーマンスを遅らせないようにすることでこれを容易にすることができます。

ネイティブのレイジーロードとJavaScriptベースの怠zyなロードの違いは何ですか？

ネイティブの怠zyなロードは、<img alt="ウェブサイトのパフォーマンスを高めるための怠zyなロード画像のための5つのテクニック" >および<iframe></iframe>タグの「ロード」属性に対するブラウザの組み込みサポートに依存しています。この方法はシンプルで、追加のJavaScriptを必要としません。一方、JavaScriptに基づく怠zyなロード（通常、Lozad.jsやIntersection Observer APIなどのライブラリを使用して実装されています）は、より柔軟性とカスタマイズを提供します。

写真の怠zyなロードの不利な点はありますか？

主な欠点は、ユーザーがページの下にスクロールすると画像が読み込みを遅らせる可能性があることです。さらに、一部の古いブラウザは怠zyなロードをサポートしていない場合があります。

WordPressで怠zyなロード写真はできますか？

はい、WordPressで写真を簡単にロードすることができます。現在、多くのテーマはデフォルトでネイティブのレイジーロードをサポートしていますが、「WP Rocketによるレイジーロード」や「Smush」などのプラグインを使用して、エンコードなしで怠zyなロードを実現することもできます。

以上がウェブサイトのパフォーマンスを高めるための怠zyなロード画像のための5つのテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css html npm yarn for auto 接口 并发 JS 对象 事件 dom 异步 github 搜索引擎 WordPress SEO iframe
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSサイジングユニットの概要次の記事：CSSサイジングユニットの概要

関連記事

続きを見る