【WordPress】画像をLazy Loadする方法|パフォーマンス改善とSEO対策の両立

【WordPress】画像をLazy Loadする方法|パフォーマンス改善とSEO対策の両立 WordPress

ページの表示速度は、ユーザー体験やSEO(検索エンジン最適化)に直結する重要な要素です。特に画像はページの読み込みを重くする原因となるため、Lazy Load(遅延読み込み)の導入が効果的です。本記事では、WordPressで画像のLazy Loadを実装する方法を初心者にもわかりやすく解説します。

WordPress 5.5以降は標準でLazy Load対応

WordPress 5.5以降、デフォルトですべての画像にloading="lazy"属性が自動で付与される仕様となっており、基本的な遅延読み込みはプラグインなしで実現できます。

<img src="image.jpg" alt="例の画像" loading="lazy">

この仕組みにより、ページ内の画像はビューポート(画面内)に入るまで読み込まれず、表示速度が向上します。

Lazy Loadが効かない場合のチェックポイント

テーマやプラグインによっては、loading="lazy"が意図どおり出力されないケースがあります。次の点を確認してみましょう。

  • 画像タグがテーマや独自HTMLでハードコーディングされていないか
  • <img>要素にloading="eager"などが明示されていないか
  • JavaScriptで画像を動的に挿入している場合

自作テーマで明示的にLazy Loadを適用する

独自テーマを作成している場合や、自動適用されないケースでは、テンプレートで以下のようにloading="lazy"属性を追加します。

<img src="<?php echo esc_url($image_url); ?>" alt="画像説明" loading="lazy">

旧バージョンや詳細制御が必要な場合はプラグインを活用

WordPress 5.4以前のバージョンや、細かい設定が必要な場合は専用のプラグインを利用すると便利です。代表的なプラグインには以下があります。

  • Lazy Load by WP Rocket:シンプルで軽量
  • a3 Lazy Load:詳細設定が可能で画像以外にも対応

プラグインをインストールするだけで自動的に画像タグが書き換えられ、スクロール時に画像が読み込まれるようになります。

SEOとUXへの影響は?

Lazy Loadは基本的にSEOに悪影響を及ぼすことはありません。Googleもloading="lazy"に対応しており、画像コンテンツを認識できます。ただし、ファーストビューに表示される画像については、Lazy Loadを適用しない方がUX・LCP(Largest Contentful Paint)の観点から好ましいケースもあります。

まとめ

WordPressでは、バージョン5.5以降で標準対応されたloading="lazy"属性により、画像の遅延読み込みが簡単に導入できます。表示速度の改善に直結するため、テーマに合わせて適切に対応しましょう。必要に応じてプラグインの活用やファーストビュー除外など、細かな最適化も検討することで、SEOとユーザー体験の両立が可能になります。