WordPressで画像を簡単に遅延ロードする方法（2つの方法）

ブログ投稿に画像がたくさん使われているような、読み込みの遅いページを待ちたい人はいません。たとえ画像が魅力的に見えても、それを見るまでの待ち時間は訪問者をイライラさせるものです。

そこで役立つのが遅延読み込みだ。これは、必要なときだけ画像を読み込む巧妙なトリックです。ページ上のすべての画像を一度に読み込むのではなく、サイト訪問者がスクロールダウンして画像が表示されるまで待ちます。

つまり、ページの読み込み時間が短縮され、訪問者がより快適になり、サイトのSEOも向上するのです。

WordPressサイトに遅延ロードを追加するのは、思っているより簡単です。この投稿では、より高速で効率的なサイトをお楽しみいただけるよう、その手順をご紹介します。

なぜWordPressで画像を遅延ロードするのか？

WordPressの画像をレイジーローディングすることで、サイトを高速化し、より良いユーザーエクスペリエンスを提供することができます。

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

Googleなどの検索エンジンも、読み込みの遅いサイトは好みません。高速なサイトが検索結果で上位に表示されるのはこのためです。

WordPressサイトでは、他のウェブ要素に比べて画像の読み込みに最も時間がかかります。投稿記事にたくさんの画像を追加すると、それぞれの画像がページの読み込み時間を長くします。

この状況に対処する一つの方法は、BunnyCDNのようなCDNサービスを利用することです。CDNは、ユーザーに最も近いWebサーバーから画像をダウンロードさせ、サイトの読み込み速度を低下させます。

しかし、画像は依然として読み込まれ、ページ全体のロード時間に影響を与えます。この問題を解決するには、サイトに遅延ロードを実装することで画像の読み込みを遅らせることができます。

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

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

ユーザーがページをスクロールすると、サイトにはブラウザの表示エリアに表示される画像が読み込まれます。

レイジーローディングはWordPressブログにとって非常に有益です：

• ウェブページの最初の読み込み時間を短縮し、ユーザーがサイトをより速く見ることができるようになります。
• 表示された画像のみを配信することで帯域幅を節約し、WordPressのホスティングサービス費用を節約することができます。

WordPress 5.5のリリースでは、遅延読み込みが初期設定として追加されました。

ただし、画像の遅延ロードや背景画像の遅延ロードをカスタマイズしたい場合は、WordPressプラグインを使用する必要があります。

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

方法1：WP RocketでWordPressの画像を遅延ロードする

WordPressで画像を遅延ロードするには、WP Rocketプラグインを使用することをお勧めします。このプラグインは、WordPressのキャッシュプラグインの中で最も優れており、画像の遅延読み込みを簡単に有効にすることができます。

それはさておき、それはあなたが複雑な専門用語を知ったり、専門家の設定を構成することなく、あなたのページの速度を最適化するのに役立ちます非常に強力なプラグインです。

初期設定の推奨キャッシュ設定はすべて、WordPressサイトを大幅にスピードアップします。

まず最初にWP Rocketプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

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

WordPressダッシュボードの設定 ” WP Rocketに行き、’Media’タブをクリックするだけです。そして、’LazyLoad’セクションまでスクロールし、’Enable for images’と’Enable for iframes and videos’の横にあるボックスにチェックを入れます。

詳しくは、WordPressにWP Rocketを正しくインストール・設定する方法をご覧ください。

方法2：OptimoleでWordPressの画像を遅延ロードする

この方法では、無料のOptimoleプラグインを使用します。WordPressの画像圧縮プラグインの中でもトップクラスのもので、画像の遅延読み込みを簡単に有効化できます。

毎月5,000人以上の訪問者がある場合は、Optimoleのプレミアム版が必要です。詳しくは、Optimoleのレビューをご覧ください。

まず、Optimoleプラグインをインストールし、有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化すると、APIキーのサインアップを求める画面が表示されます。この画面は管理メニューのOptimoleにナビゲーションしても表示されます。

記載されているメールアドレスが正しいことを確認し、「Create & connect your account」ボタンをクリックしてください。または、既存のユーザーであれば、「すでにAPIキーを持っています」ボタンをクリックしてください。

プラグインがOptimoleに接続するまで、数秒間お待ちください。その後、プラグインが自動的に画像の最適化を開始し、訪問者の端末に最適な画像が表示されるようになります。

その間に「設定」タブをクリックして、遅延ロードを設定することができる。

ここで、’Scale images and & Lazy load’ 設定が有効化されていることを本当に〜してもよいですか？これにより、訪問者の画面サイズに基づいて画像が生成され、読み込み速度が向上します。

次に、’Advanced’ メニューオプションをクリックし、’Lazyload’ を選択します。この画面では、画像の遅延ロード方法をカスタマイズするためのいくつかの設定があります。

まず、’Exclude first number of images from lazyload’ 設定を調整します。これにより、投稿やページの上部にある画像が遅延ロードされなくなり、フォールドより上にある画像が常に表示されるようになります。

すべての画像を遅延ロードさせたい場合は0に設定する。

Optimoleには他にもいくつか高度な遅延ロード設定があり、確認することができます。これらの設定は初期設定で有効化されています。

1つ目は「画像の拡大縮小」設定です。これは、訪問者の画面サイズに合わせて画像を拡大縮小し、ページの読み込みを高速化します。

その後、「背景画像の遅延ロードを有効化」設定が表示されます。これにより、サイト上で最も大きな画像である背景画像が遅延ロードされます。

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

これらの設定をカスタマイズし続け、あなたのサイトや画像に最適な設定を確認することができます。

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

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

遅延読み込みはサイトの読み込み速度を向上させるのに役立ちますが、WordPressの画像を最適化する方法は他にもいくつかあります。

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

また、WordPressの画像サイズとファイル形式を適切に選択することも重要です。JPEGは写真や色の多い画像に、PNGはシンプルな画像や透過画像に、GIFはアニメーション画像に適しています。

WordPressで画像を遅延ロードする方法について、この投稿がお役に立てれば幸いです。また、チュートリアル「 画質を落とさずにウェブ用に画像を簡単に最適化する方法」や、専門家が選ぶWordPressのベストファイルアップロードプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.