遅延読み込みとは何ですか? ユーザー エクスペリエンスはどのように向上しますか?

ほとんどの Web サイト所有者が無視している Web サイトの側面があるとすれば、それはページの読み込み時間です。 Web サイトの完璧なデザインを取得し、訪問者の関心を維持するためにさまざまな種類のコンテンツを追加するには、多くの時間とお金を費やします。 しかし、それだけでは訪問者をユーザーに変えるのに十分ではない場合はどうすればよいでしょうか?

研究によると、Web サイトの読み込みにかかる時間が 1 秒増えるごとに、訪問者が顧客に変わる可能性が減少します。 Portentによると、コンバージョンの確率は 1 秒の読み込みでは 40% ですが、次の読み込みでは 34%、3 秒では 29% に低下します。 「では、解決策は何だろう？」と疑問に思うかもしれません。

そこで、遅延読み込みの概念が登場します。これは、コンテンツの品質を犠牲にすることなく、Web サイトをより速く読み込む方法です。

この記事では、遅延読み込みについて、それを使用する理由、他の方法との比較について説明します。 さあ、始めましょう！

目次

• 遅延読み込みとは何ですか?
• 遅延読み込みの重要性
• 積極的な読み込みと遅延読み込み
• 遅延読み込みの仕組み
• 遅延読み込みの実装

遅延読み込みとは何ですか?

遅延読み込みは、Web サイトの必要な部分だけをすぐに読み込むことで時間を節約する方法です。 すべてを一度にロードするのではなく (時間がかかり、多くのリソースを使用する可能性があります)、このメソッドはコンテンツを少しずつロードします。

すぐには読み込まれない画像やビデオには、必要になるまでプレースホルダー要素が含まれることがよくあります。 たとえば、遅延読み込みでは、すべての画像が一度に読み込まれるわけではありません。 画面上に表示されるもののみがロードされます。 下にスクロールするまで残りは読み込まれません

すべてが読み込まれるのを待つ代わりに、画面上にすでに表示されているものをすぐに確認できます。

専門家のヒント:さまざまなブラウザーやデバイスで遅延読み込みがどのように機能するかを確認してください。これは、互換性の問題がないことを確認するためです。

遅延読み込みの重要性

遅延読み込みがコンバージョンの増加に役立つことはすでにわかっています。 しかし、メリットはそれだけではありません。 Web サイトに遅延読み込みを実装する必要があるその他の理由は次のとおりです。

パフォーマンスを最適化する

遅延読み込みにより、誰かが Web サイトにアクセスしたときのデータ転送が削減されます。 これは、インターネットが低速でデータ プランが小さいモバイル デバイスを使用しているユーザーにとって重要です。

帯域幅とサーバー負荷を軽減する

遅延読み込みによりデータが保存され、サーバーの作業が軽減されます。 これにより、不必要なコンテンツの読み込みが停止されるため、Web サイトの所有者とユーザーのコストが削減されます。

SEOを改善する

Google などの検索エンジンは、読み込みの速い Web サイトを優先するため、公式のランキング要素となっています。 遅延読み込み手法を使用すると、ページの読み込み速度を向上させ、直帰率を減らし、Web サイトのランキングを上位に導くことができます。

イーガーローディングとは何ですか?

Eager Loading は、Lazy Loading の正反対です。 最初に、メディア ファイル、スクリプト、スタイルなど、必要なすべてのリソースを一度に読み込みます。 これは、必要なページ要素がすべてすぐに利用できることを意味します。 そのため、ユーザーがスクロールしたり操作したりするときに追加の読み込みが発生することはありません。

熱心な読み込みは過去に使用されていた従来の方法であり、多くの Web サイトが現在でもそれを使用しています。

実装は簡単ですが、次のようないくつかの要因により、積極的な読み込みの関連性は低くなります。

Web ページのサイズが大きくなった

最近の Web サイトでは、よりリッチなメディアとインタラクティブな部分が使用されています。 これは、平均的な Web ページが以前よりもはるかに大きくなったことを意味します。 したがって、積極的にロードすると、初期ページのロード時間が長くなる可能性があります。 特にインターネット接続が遅いユーザーにとっては重要です。

パフォーマンスへの悪影響

ページの読み込み時間が長くなると、 First Contentful Paint (FCP)やLargest Contentful Paint (LCP)などの重要なWeb サイトのパフォーマンス測定に悪影響を及ぼす可能性があります。 これらは SEO とユーザー エクスペリエンスにとって重要です。

モバイルユーザーの台頭

モバイル ブラウジングが大量に使用されるようになったことで、最初から非常に高速に読み込むことが重要になりました。

積極的なロードと遅延ロード

以下に、Eager Loading と Lazy Loading の簡単な比較を示します。

遅延読み込みと積極的な読み込みは、リソース読み込みの 2 つの異なる方法であり、それぞれに長所と短所があります。 ただし、今日の技術的な観点から見ると、遅延読み込みは、その効率性、パフォーマンス上の利点、および優れたユーザー エクスペリエンスにより、ほとんどの最新の Web サイトで推奨される技術であると考えられています。

遅延読み込みの仕組み

Lazy Loading が 2 つの間でより良い結果を保証する理由がわかったので、次に、これをどのように実現するかを見てみましょう。

ユーザー ナビゲーションとインタラクション:遅延読み込みは、ユーザーが Web ページをどのように使用するかによって異なります。多くの場合、ユーザーがマウスをスクロールまたは移動すると開始されます。 スクロールすると、ブラウザは、表示されている領域に新しいコンテンツが必要であると推測します。 その後、それらのリソースの読み込みが開始されます。 遅延読み込みは、ボタンのクリックや項目の上にマウスを置くなど、他のアクションから開始することもできます。

画像の技術的実装:遅延読み込みは、コンテンツの種類によって動作が異なります。非常に一般的な画像の場合は、通常、低品質のプレースホルダーまたは単純な読み込みアイコンを表示することから始めます。 ユーザーが実際の画像の近くをスクロールすると、鮮明で高品質の画像が読み込まれます。 こうすることで、ユーザーはまだ見れない画像を待つ必要がなくなります。

さまざまな Web リソースのアプリケーション: 遅延読み込みは、画像だけでなくさまざまな要素に使用できる柔軟な方法です。ビデオ、iframe、さらには大量のスクリプトを必要とする要素でも同様に機能します。 必要な場合にのみこれらの要素を読み込むと、ページの読み込み速度が大幅に向上し、リソースを効率的に管理できるようになります。 これは、高解像度ビデオなどの重いリソースの場合に特に重要です。

遅延読み込みの実装

このパートでは、Web サイトに遅延読み込みを実装するさまざまな方法を説明します。

方法 1 – 遅延読み込みを手動で実装する

遅延読み込みを手動で実装する方法は、すべての人に適しているわけではありません。 これは複雑なので、少なくとも中級のコーディング知識が必要です。

これを行うには、主に HTML と JavaScript を使用します。 始める前に、WordPress サイトのテーマ ファイルにアクセスでき、自信を持って HTML と JavaScript を編集できることを確認してください。

このプロセスを進めるのに役立つ詳細なガイドは次のとおりです。

ステップ 1 : サイトをバックアップする

テーマファイルに変更を加える前に、エラーが発生した場合にデータが失われないように、必ず WordPress サイトをバックアップしてください。

ステップ 2 : テーマのfunction.phpファイルを編集する

• WordPress サイトのファイルにアクセスします (FTP クライアントまたはホスティング コントロール パネルのファイル マネージャーを使用)。
• /wp-content/messages/your-theme/に移動し、 functions.phpファイルを見つけます。
• 編集のためにfunctions.phpを開いてください。

ステップ 3 : 遅延読み込みスクリプトを追加する

function.phpに、Lazy Loading 用に JavaScript ファイルをエンキューする関数を追加します。 基本的な例を次に示します。

関数 add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

このコードは、テーマ ディレクトリ内のjsフォルダーにLazy-load.jsという名前の JavaScript ファイルがあることを前提としています。

ステップ 4 : JavaScript ファイルを作成する

• テーマ ディレクトリのjsフォルダーに、 lazy-load.jsという名前の新しいファイルを作成します。
• 遅延読み込みを処理するために JavaScript を追加します。 IntersectionObserver を使用した基本的な例を次に示します。

document.addEventListener(“DOMContentLoaded”, function() {

let LazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (ウィンドウ内の「IntersectionObserver」) {

let lagyImageObserver = new IntersectionObserver(function(entries, observer) {

エントリ.forEach(関数(エントリ) {

if (entry.isIntersecting) {

let LazyImage = エントリ.ターゲット;

レイジーイメージ.src = レイジーイメージ.データセット.src;

LazyImage.classList.remove(“怠惰”);

LazyImageObserver.unobserve(lazyImage);

}

});

});

LazyImages.forEach(function(lazyImage) {

LazyImageObserver.observe(lazyImage);

});

}

});

ステップ 5 : WordPress でイメージタグを更新する

遅延読み込みをサポートするようにイメージ タグを変更します。 PHP テンプレート内で、または投稿/ページ内で直接、イメージ タグを次のように変更します。

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”画像の説明”>

placeholder-image.jpg を低解像度の画像または読み込みグラフィックに置き換え、 original-image.jpg を実際の画像の URL に置き換えます。

専門家のヒント:レイアウトが安定した状態を保つために、遅延読み込みされた画像には応答性の高いプレースホルダーを使用してください。

ステップ 6 : 変更をテストする

• キャッシュ プラグインがインストールされている場合は、サイトのキャッシュを必ずクリアしてください。
• 次に、Web サイトにアクセスし、画像が遅延読み込みされるセクションまで下にスクロールします。
• スクロールしながら画像がスムーズに読み込まれるかどうかを確認してください。

ノート

• 実際の Web サイトでテストを行う前に、必ず最初に開発環境でテストしてください。
• これを行う際には、子テーマを作成することを検討してください。 テーマを更新すると、変更が上書きされる可能性があります。
• ビデオや iframe などの他のコンテンツ タイプの場合も、 src属性がdata-src属性に置き換えられ、ビューポート内で JavaScript 経由で読み込まれる同様のアプローチを使用できます。

この手法は、遅延読み込みを組み込む簡単な方法です。 より複雑な Web サイトや特定の要件がある場合は、より強力なソリューションまたはプラグインを検討することをお勧めします。

方法 2 – WordPress プラグインを使用して遅延読み込みを実装する

これは、WordPress プラグインを使用して遅延読み込みを安全に有効にできるため、2 つの方法のうち最も簡単です。 複数のプラグインを使用してこれを行うことができますが、この例ではWP-Optimizeを使用します。 WP-Optimize は、Web サイトの速度を向上させ、ユーザー エクスペリエンスを向上させる強力な WordPress プラグインです。

画像、iframe、ビデオを遅延読み込みに設定するシンプルで簡単な方法を提供します。 組み込みの Lazy Load 機能により、Web リソースの読み込みが表示されるまで自動的に遅延されるため、ページの読み込み時間が大幅に短縮されます。 ただし、これは WP-Optimize のプレミアム機能です。

機能を有効にするには:

• WordPress 管理者ダッシュボードから[WP-Optimize] > [画像]タブを開きます。
• 「画像の遅延読み込み」サブタブを開きます
• ここから、画像とビデオ/Iframe の両方の遅延読み込みを有効にすることができます

特定の画像、背景画像、ビデオ、または iframe の遅延読み込みを無効にする必要がある場合は、ここから有効にしてください。 特定の画像クラスをスキップすることもできます。

前後

Lazy Load を実装する前と後のサンプル Web サイトの速度をテストしました。 GTMetrix によると、Web サイトはすでにかなり高速で、 First Contentful Paint (FCP) の読み込み時間は1.5 秒でした。

Lazy Loading を有効にした後、FCP は 344 ミリ秒になり、以前よりも大幅に高速になりました。 結果はページに含まれるコンテンツの量によって異なりますが、ほとんどの場合、FCP スコアは向上します。

ページの読み込み時間を短縮する準備はできていますか?

ということで、これです！ 遅延読み込みとは何か、そして現代のサイトにおける遅延読み込みの重要な役割について話しました。 必要になるまで読み込みを待つことで、特にデータ量が限られている携帯電話でのページの読み込みが速くなり、インターネット データが節約され、ブラウジングがスムーズになります。

また、WordPress で遅延読み込みを使用する方法について、いくつかの役立つアドバイスも提供しました。 コードを使用して自分で行うことから、WP-Optimize のようなプラグインを使用することまで、すべてをカバーします。

遅延読み込みを Web サイトに追加してみて、それがパフォーマンスにどのような影響を与えるかを教えてください。 質問がありますか? コメントでお気軽に質問してください。

よくある質問

遅延読み込みは良いのか悪いのか?

遅延読み込みにはいくつかの利点があるため、一般的には良い方法であると考えられています。 必要な場合にのみコンテンツを読み込むことで、Web ページの読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。

UI の遅延読み込みとは何ですか?

UI での遅延読み込みとは、画像やビデオなどの視覚要素がユーザーのビューポート内にある (またはビューポートに近い) 場合にのみそれらを読み込む方法を指します。

遅延読み込みはSEOに影響しますか?

遅延読み込みを正しく実装すると、ページの読み込み時間が短縮され、ユーザー エクスペリエンスが向上するため、SEO にプラスの影響を与えることができます。これらはどちらも重要なランキング要素です。

すべての画像を遅延ロードする必要がありますか?

画面外にある画像を遅延読み込みすることは有益ですが、ページの読み込み時にすぐに表示される画像の場合は必要ありません。 これらの画像をすぐにロードすると、表示の遅延を防ぐことができます。

遅延読み込みにはどのような問題があるのでしょうか?

遅延読み込みに関する問題には、ユーザーがスクロールする際のコンテンツ読み込みの遅延、検索エンジンのインデックス作成が正しく実装されていない場合の潜在的な問題、すべてのブラウザーでサポートされているわけではない JavaScript への依存などが含まれます。