WordPressで画像を簡単に遅延読み込みする方法（2つの方法）

ウェブサイトの表示速度が遅いのは誰にとっても不快なものです。ページの読み込みに時間がかかりすぎると、訪問者はコンテンツを見る前に離れてしまいます。

画像は、読み込み速度が遅くなる主な原因であることがよくあります。帯域幅を最も消費し、パフォーマンスと検索ランキングを低下させます。

私たちは何百ものサイトの速度を最適化してきましたが、遅延読み込みは私たちが推奨する最も効果的な簡単な改善策の1つです。ユーザーが実際にスクロールして画像を見るまで、画像の読み込みを停止します。

このガイドでは、WordPressで簡単に遅延読み込み画像を設定して、サイトの速度を即座に向上させる方法を説明します。

WordPressで画像を遅延読み込みする理由

WordPressの画像を遅延読み込みすると、ウェブサイトの表示速度が向上し、ユーザーエクスペリエンスが向上します。

低速なウェブサイトを好む人はいません。実際、ウェブサイトのパフォーマンスに関する調査によると、ページの読み込み時間が1秒遅れると、コンバージョンが7%減少し、ページビューが11%減少し、顧客満足度が16%低下することがわかりました。

Googleのような検索エンジンも、遅いウェブサイトを好みません。だからこそ、高速なサイトは検索結果でより上位にランク付けされるのです。

WordPressサイトでは、他のウェブ要素と比較して、画像の読み込みに最も時間がかかります。記事に多くの画像を追加すると、各画像がページの読み込み時間を増加させます。

この状況に対処する1つの方法は、CDNサービス（BunnyCDNなど）またはよりシンプルなオプション（Envira CDNなど）を使用することです。CDNを使用すると、ユーザーは最も近いウェブサーバーから画像をダウンロードでき、ウェブサイトの読み込み時間を短縮できます。

ただし、画像は引き続き読み込まれ、ページの全体の読み込み時間に影響します。この問題を回避するには、ウェブサイトに遅延読み込みを実装して画像の読み込みを遅延させることができます。

画像の遅延読み込みはどのように機能しますか？

すべての画像を一度に読み込むのではなく、遅延読み込みではユーザーの画面に表示されている画像のみをダウンロードします。他のすべての画像はプレースホルダー画像または空白スペースに置き換えられます。

ユーザーがページを下にスクロールすると、ブラウザの表示領域に表示されている画像がウェブサイトによって読み込まれます。

遅延読み込みは、WordPressブログに非常に役立ちます。

• 初期ウェブページの読み込み時間を短縮するため、ユーザーはより速くサイトを確認できます。
• 表示される画像のみを配信することで帯域幅を節約できるため、WordPressホスティングのコストを節約できます。

WordPressのネイティブ遅延読み込みとは何ですか？

WordPress 5.5以降、プラットフォームにはデフォルトで「ネイティブ遅延読み込み」が組み込まれています。これは、WordPressが自動的にimgタグにloading="lazy"というHTML属性を追加することを意味します。

これは、最新のブラウザ（Chrome、Firefox、Safariなど）に、ユーザーが画像に近づくまで画像の読み込みを遅延させるように指示します。

WordPressがこれを自動的に行う場合、なぜプラグインが必要なのですか？

ネイティブの遅延読み込みは素晴らしいスタートですが、完璧ではありません。訪問者のブラウザが画像の読み込みを決定することに完全に依存しています。WP Rocketのような専用プラグインは、次のような理由でより優れたパフォーマンスを提供します。

• ネイティブのWordPressではできない、背景画像の遅延読み込み。
• iframeと動画を特に遅延読み込みします。
• デフォルトのブラウザの動作よりも高速に画像を読み込む高度なスクリプトを使用します。

2つの異なるプラグインを使用してWordPressで画像を遅延読み込みする方法を見てみましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプできます。

方法1：WP RocketでWordPressの画像を遅延読み込みする

WordPressで画像を遅延読み込みするには、WP Rocketプラグインを使用することをお勧めします。これは市場で最高のWordPressキャッシュプラグインであり、画像遅延読み込みを簡単にオンにできます。

それ以外にも、複雑な専門用語を知らなくても、エキスパート設定を構成しなくても、ページの速度を最適化できる非常に強力なプラグインです。

デフォルトの推奨キャッシュ設定すべてが、WordPressウェブサイトの表示速度を大幅に向上させます。

まず、WP Rocketプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

画像の遅延読み込みを有効にするには、いくつかのチェックボックスをオンにするだけです。動画の遅延読み込みも有効にでき、サイトの速度をさらに向上させることができます。

WordPressダッシュボードの**設定 » WP Rocket**に移動し、「メディア」タブをクリックするだけです。次に、「遅延読み込み」セクションまでスクロールし、「画像に遅延読み込みを有効にする」と「iframeと動画に遅延読み込みを有効にする」の横にあるチェックボックスをオンにします。

詳細については、WordPressでWP Rocketを適切にインストールして設定する方法に関するガイドを参照してください。

方法2：OptimoleでWordPress画像を遅延読み込みする

この方法は、無料のOptimoleプラグインを使用します。これは、画像遅延読み込みを簡単に有効にできる最高のWordPress画像圧縮プラグインの1つです。

トラフィックが無料プランの制限を超えた場合は、Optimoleのプレミアムバージョンが必要になります。詳細については、完全なOptimoleレビューをご覧ください。

まず、Optimoleプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベートすると、APIキーのサインアップを求める画面が表示されます。管理メニューの**Optimole**に移動しても、この画面を見つけることができます。

メールアドレスが正しいことを確認し、「アカウントを作成して接続」ボタンをクリックしてください。または、既存のユーザーの場合は、「APIキーをすでに持っています」ボタンをクリックしてください。

プラグインがOptimoleに接続するまで数秒待つ必要がある場合があります。その後、プラグインは自動的に画像を最適化し始め、訪問者はデバイスに最適な画像を見ることができるようになります。

それが完了するのを待っている間に、「設定」タブをクリックして遅延読み込みを設定できます。

ここでは、「画像をスケーリングして遅延読み込み」設定が有効になっていることを確認する必要があります。これにより、訪問者の画面サイズに基づいて画像が生成され、読み込み速度が向上します。

次に、「詳細設定」メニューオプションをクリックし、「遅延読み込み」を選択します。この画面には、画像の遅延読み込み方法をカスタマイズできるいくつかの異なる設定があります。

まず、「遅延読み込みから最初の数枚の画像をオプトアウトする」設定を調整できます。

これにより、投稿やページの上部にある画像が遅延読み込みされなくなります。これにより、ファーストビューの画像が即座に読み込まれ、Largest Contentful Paint（LCP）スコアが向上し、SEOが改善されます。

すべての画像を遅延読み込みさせたい場合は、これを 0 に設定できます。

Optimoleには、確認できるその他の高度な遅延読み込み設定がいくつかあります。これらの設定はデフォルトで有効になっています。

1つ目は「画像のサイズ変更」設定です。これにより、訪問者の画面サイズに合わせて画像が調整され、ページの読み込みが速くなります。

その後、「背景画像の遅延読み込みを有効にする」設定が表示されます。これにより、ウェブサイトで最大の画像である可能性のある背景画像が遅延読み込みされます。

もう1つの設定は、埋め込み動画やiframeの遅延読み込みです。多くの埋め込み動画コンテンツがある場合は、この設定をオンにしておく必要があります。動画の代わりにプレースホルダー画像が読み込まれます。プレースホルダーがクリックされると、完全な動画が読み込まれます。

これらの設定をさらにカスタマイズして、ご自身のウェブサイトと画像に最適なものを見つけることができます。

プラグインの設定を終了する前に、必ずページ下部にある「変更を保存」ボタンをクリックしてください。

遅延読み込みの一般的な問題のトラブルシューティング

遅延読み込みを有効にすると、画像が消えたり、ぼやけて表示されたりすることがあります。

一般的な修正方法は次のとおりです。

1. 画像が表示されない

これは、2つの遅延読み込みプラグインが同時にアクティブになっている場合（例：WP Rocketとテーマに組み込まれた遅延読み込み）によく発生します。競合を避けるために、1つの方法のみを使用するようにしてください。

2. ファーストビューの画像が遅れて表示される

ロゴやヘッダー画像がページの他の部分よりも遅れて表示されると、ユーザーエクスペリエンスが悪化する可能性があります。上記の方法で述べたように、これを修正するために、ページ上の最初の2〜3枚の画像を遅延読み込みから除外する必要があります。

3. レイアウトシフト（CLS）

画像の読み込み時にコンテンツが「ジャンプ」すると、SEOスコアが低下します。これを防ぐには、すべての画像に定義済みのwidthおよびheight属性が設定されていることを確認してください。WordPressはこれを自動的に行いますが、一部のテーマでは上書きされる場合があります。

遅延読み込み画像に関するよくある質問

WordPressでの遅延読み込みについて、まだいくつかの質問があるかもしれません。ここでは、よく受ける質問とその回答をご紹介します。

1. WordPressは自動的に画像を遅延読み込みしますか？

はい、WordPress 5.5のリリース以降、画像に対する基本的な遅延読み込みはデフォルト機能となっています。ただし、このネイティブ機能は限定的であり、背景画像、iframe、または動画には適用されません。すべてのメディアが最適化されていることを確認するために、WP RocketやOptimoleのような専用プラグインの使用をお勧めします。

2. 遅延読み込みはSEOに良いですか？

もちろんです。遅延読み込みはページの読み込み速度を大幅に向上させます。これはユーザーエクスペリエンスの重要な要素です。Googleのような検索エンジンは高速なウェブサイトを好むため、遅延読み込みで速度を改善すると、検索ランキングでサイトが大きく上昇する可能性があります。

3. WordPressで最も優れた遅延読み込みプラグインは何ですか？

総合的なパフォーマンスと使いやすさのために、WP Rocketをお勧めします。これは市場で最高のパフォーマンスプラグインであり、数回のクリックだけで強力で簡単な遅延読み込み機能が含まれています。優れた無料の代替手段を探しているなら、Optimoleは堅牢な遅延読み込みオプションも提供する優れた選択肢です。

4. WordPressで動画を遅延読み込みできますか？

はい、できますし、すべきです！これは、多くの埋め込み動画コンテンツを特徴とするページの速度を向上させる素晴らしい方法です。WP RocketとOptimoleの両方で、動画の遅延読み込みを簡単に有効にでき、ユーザーが再生をクリックするまでプレースホルダー画像に置き換わります。

5.画面上部の画像は遅延読み込みすべきですか？

一般的に、ページの最上部（ファーストビュー）にある画像は遅延読み込みから除外するのがベストプラクティスです。これにより、訪問者が最初に目にするものが即座に読み込まれ、素晴らしい第一印象を与えることができます。Optimoleのようなプラグインを使用すると、この理由から、最初の数枚の画像を遅延読み込みから簡単に除外できます。

6. WordPressのネイティブ遅延読み込みを無効にするにはどうすればよいですか？

特定のプラグインを使用したい場合で、WordPressのネイティブ遅延読み込みが干渉しないようにしたい場合は、テーマのfunctions.phpファイルに簡単なコードスニペットを追加するか、WPCodeのようなコードスニペットプラグインを使用して無効にすることができます。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

WordPress画像を最適化するためのボーナスのヒント

遅延読み込みはウェブサイトの読み込み速度の向上に役立ちますが、WordPressの画像を最高のパフォーマンスのために最適化するには、他にもいくつかの方法があります。

例えば、TinyPNGやJPEGminiのようなツールを使用してウェブサイトにアップロードする前に画像を圧縮することをお勧めします。OptimoleやEWWW Image Optimizerのような自動画像圧縮プラグインを使用することもできます。

適切なファイル形式を選択することも重要です。JPEGやPNGが一般的ですが、WebPのような次世代フォーマットの使用を強くお勧めします。これらのファイルタイプは、優れた圧縮率と品質を提供し、サイトの読み込み速度を大幅に向上させます。

この記事がWordPressで画像を遅延読み込みする方法を学ぶのに役立ったことを願っています。また、画質を損なわずにウェブ用の画像を簡単に最適化する方法に関するチュートリアルや、WordPress向けの最高のファイルアップロードプラグインの専門家による選び方もご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。