画像の遅延読み込み:完全ガイドとそれを実装する3つの方法

画像の遅延読み込み:完全ガイドとそれを実装する3つの方法

画像の遅延読み込み:完全ガイドとそれを実装する3つの方法
СОДЕРЖАНИЕ
02 июня 2020

画像の遅延読み込み:完全ガイド


Webでの機能性と対話性が高まるにつれ、過去数年間でWebページのサイズは着実に増加しています。 2018年初頭現在, 平均ページサイズ インターネット上で2メガバイトを超えていました!これと戦う方法は?画像の遅延読み込みと呼ばれる少し良い方法の1つです。.

このガイドでは、 画像の遅延読み込みの複雑さ, それを実装する3つの異なる方法について話し合います.

まずは、今後の目次から始めましょう。

  • 遅延読み込みが重要な理由?
  • 遅延読み込みとは?
  • 遅延読み込みの利点
  • 画像を遅延読み込みするときに考慮すべきこと
  • オプション1:最初から遅延読み込みを実装する (初心者向け:⭐/ 5​​)
  • オプション2:JavaScriptプラグインを使用する (初心者向け:⭐⭐/ 5)
  • オプション3:WordPressプラグインを使用する (初心者向け:⭐⭐⭐⭐⭐/ 5)
  • 結論

遅延読み込みが重要な理由?

Webページの巨大なペイロードは、主に画像、スクリプト、スタイルシート、フォント、ビデオで構成されています。ただし、画像は通常のウェブページのサイズの60%以上を占めます。画像はWebページのデザインにとっても重要であるため、画像を削除できるわけではありません.

最適化を行わない場合、ユーザーのWebブラウザは、ページを完全にレンダリングする前にすべてのリソースをダウンロードします。これは読み込み時間の増加につながり、人々を引き離す可能性があります. WooCommerceの見積もり ページ速度が100ミリ秒向上するごとに、eコマースWebサイトは収益を1%増やすことができます.

このようなシナリオでは、読み込み時間を最適化するために必要なことをすべて実行することは、理にかなっています。また、画像はWebページサイズの主な要因であるため、画像から開始することをお勧めします。これが遅延読み込みの出番です.

遅延読み込みとは?

遅延読み込みの仕組みを理解するために、CodeinWPで画像がどのようにレンダリングされるかを示す簡単なアニメーションGIFを以下に示します。.

画像の遅延読み込みのデモCodeinWPでの遅延読み込みのデモ

ページが読み込まれたときに、すべての画像がすぐにダウンロードされるわけではありません。下にスクロールして画像を表示すると、最初に画像がぼやけて表示され、実際の画像がバックグラウンドで読み込まれます。このぼやけた画像は、最終的な画像の数分の1の低解像度バージョンです。ユーザーが画像をスクロールするまでダウンロードとレンダリングを延期するこの現象は、まさに遅延読み込みと呼ばれるものです.

でも "怠惰な" 一般的に否定的に関連付けられています。遅延読み込みは実際には良い習慣であり、サイト全体を最適化することでページの読み込み時間を短縮します.

注意。この投稿では、画像の遅延読み込みのプロセスについて説明しますが、遅延読み込みは画像だけに限定されません。ビデオなどの他のリソースやコメントをレンダリングするときにも同じアイデアを使用できます(その方法に関するセクション全体があります)に この郵便受け)、さらにはフォント.

遅延読み込みの利点

ウェブページの読み込み時間は放棄の主な原因であるため、画像の遅延読み込みは、読み込まれるまでページにとどまるユーザーの増加に大きくつながり、最終的には売り上げやコンバージョンの増加につながる可能性があります.

画像の遅延読み込みのもう1つの大きなメリットは、サーバーの請求額が削減されることです。ビューアがスクロールする画像のみを提供し、ページの表示されなかった部分の帯域幅を節約します。画像はページの重みの主要な部分を形成するため、サーバーのコストを削減できる可能性があります.

すべての画像を事前に読み込むことは、読者にとっても有害です。ユーザーがWebの無制限のデータプランを使用している場合は、おそらく問題になりません。ただし、データが限られているプラ​​ンでは、画像を遅延読み込みして視聴者のデータを保存します.

画像を遅延読み込みするときに考慮すべきこと

正しい方法でWebサイトに遅延読み込みを実装することを決定したので、それを実行する方法に関するいくつかの重要な考慮事項について説明します.

遅延読み込みする画像を特定する

すべての画像が遅延読み込みに適しているわけではありません。たとえば、デザインの構造に不可欠なものを遅延ロードしたくないので、すべてを正しくレンダリングするためにロードする必要があります。.

遅延読み込みは、画面外にあり、ページの構造に寄与しない画像のみを検討する必要があります。通常、これらは  ページの本文に表示される要素.

画像のプレースホルダーを選択してください

次に検討すべきことは、ビューアがスクロールしたときに画像が読み込まれるときに表示される中間画像または色です。画像の読み込み時間は画像の大きさによって異なり、数秒かかることもあります。したがって、ロード時に使用するものを検討する必要があります.

これに関して開発者が通常取る方向は2つあります。

  • 画像の支配的な色を背景として使用する
  • 画像の低品質バージョンを使用する

低解像度のプレースホルダー遅延読み込みのプレースホルダーとしての画像の低品質バージョンの例

ここでの正しい選択は、サイトのデザインと、画像が読み込まれるのを待つときにユーザーに何を表示するかによって異なります。.

1つの手法は、画像がビューポートに入るとすぐにロードすることですが、それが行われる前にバッファ時間を追加して、ユーザーがプレースホルダを表示しないようにすることを検討できます.

画像をロードするときにページ構造を変更することに注意してください

画像が読み込まれる前は、0ピクセルのサイズで表示されている場合があります。これは設計構造を維持するのに理想的ではありません.

これにより、ページのレイアウトとテキストの位置を簡単に変更できます。簡単な解決策は、正しいサイズを画像にすぐに追加することです。これにより、ロード後、画像要素のサイズが同じままになります。.

上記の考慮事項を片付けて、WordPressサイトで遅延読み込みを実際に実装する方法を見てみましょう.

オプション1:最初から遅延読み込みを実装する

まず、プラグインを使用せずにこれを行う方法を見てみましょう。このオプションは、JavaScriptに慣れている方にお勧めです。理想的には、次の手順を実行する必要があります。

  1. ページの読み込み中に画像が読み込まれないようにする:画像のURLまたはパスを、  タグ、画像はページの読み込み中にブラウザによってダウンロードされます。ブラウザが画像をダウンロードしないようにするには、画像の場所をdata-src属性で指定する必要があります。  代わりにタグを付ける.
  2. JavaScriptにイベントハンドラー関数を登録して、読み込みとスクロールの2つのイベントの要素を確認します。.
  3. 要素がビューポートに入ると、data-src要素の値をsrc要素に読み込みます。これにより、ブラウザが画像を読み込みます。.

このプロセスの簡単な実装は、 ロビン・オズボーン そしてデモが利用可能です CodePen.

オプション1.1:交差オブザーバーAPIを使用する

交差点オブザーバーAPI 任意の時点でビューポートにあるDOM要素を識別するのに役立ちます。これは、イベントハンドラー関数を記述せずにレイジーロードを実装するよりクリーンな方法です。遅延ロードを実装するコードの行数も大幅に減少します。ただし、ブラウザの互換性は問題のままです.

Googleデベロッパーブログ 交差オブザーバーAPIの実装について このCodePenデモ.

オプション2:JavaScriptプラグインを使用する

上記の2つのオプションには、JavaScriptの中間レベルの知識が必要です。サーバーに負荷をかける重いプラグインを使用せずに遅延読み込みのより簡単な実装を探している場合は、プレーンなJavaScriptプラグインを試すことができます, bLazy.

の bLazyライブラリ 2 KB未満のサイズでは、ペイロードに追加の負荷がかかりませんが、遅延読み込みイメージを簡単に処理できます.

bLazyライブラリを使用するには、初期化する必要があります  次の属性を持つ要素:

  • クラス:すべてのクラスを設定  b-lazyへのタグ
  • src:プレースホルダー画像へのリンク
  • data-src:ロードする画像へのリンク
  • data-src-small:幅420ピクセル未満の画面に読み込む画像へのリンク

ほんの数行のコードでbLazyライブラリを初期化する必要があり、すべての画像は遅延読み込みによってレンダリングされます.

;(関数() {
//初期化
var bLazy = new Blazy();
})();

CodePenデモが利用可能です ここに.

オプション3:WordPressプラグインを使用する

遅延読み込みを可能にするオプションがいくつかあります。最も注目すべき点:

これらのプラグインはすべて、遅延ロードを自動的に処理します。それぞれにいくつかの素晴らしいサイド機能も付いています.

たとえば、WP Rocketによるレイジーロードは、YouTubeビデオをレイジーロードし、サムネイルに置き換えます.

Optimoleは、ThemeIsleファミリーへの最新の追加であることに加えて、堅牢なイメージ最適化(ここでテストしたように)その点でかなり高度な機能を備えています。たとえば、ユーザーの画面サイズに基づいて動的にサイズを変更できます.


Optimoleによる画像の最適化と遅延読み込み 画像の最適化 & Optimoleによる遅延読み込み

著者: Optimole

現在のバージョン:2.3.1

最終更新日:2020年4月21日

optimole-wp.zip


96%評価


50,000以上のインストール


WP 4.7+が必要

ほとんどのプラグインと同様に、遅延読み込みを行うには、プラグインをインストールして、プラグインのコントロールパネルで機能を有効にします。

画像の遅延読み込みの最適化

結論

この投稿では、画像の遅延読み込みの必要性と利点について説明しました。また、WordPress Webサイトに遅延読み込みを実装する3つの異なる方法についても説明しました。

  • JavaScriptにある程度の熟練がある場合は、最初から遅延読み込みを実装できます
  • プログラミングは知っているがプラグインが不要な場合は、軽量のJavaScriptライブラリであるbLazyがオプションです
  • ウェブサイトに画像を遅延読み込みするためのワンクリックソリューションが必要な場合は、Optimoleなどのプラグインを使用する必要があります

遅延読み込みについてどう思いますか?あなたのウェブサイトのパフォーマンスを改善するためにそれを使ってみましたか?

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector