遅延読み込み(Lazy Load)
遅延読み込み(Lazy Load)は、画面に表示される直前まで画像や動画の読み込みを遅らせる仕組みです。初期表示を軽くする効果があります。
① 仕組みと導入方法
WordPress 5.5以降は、多くの画像に標準でloading="lazy"属性が自動付与されます。より高度な制御をしたい場合は、キャッシュプラグイン(WP Rocket・LiteSpeed Cache等)の遅延読み込み機能や、専用プラグインで対応できます。
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="説明">
② LCP画像の自動除外(WordPress 6.3以降)
WordPress 6.3(2023年公開)以降、コアが自動的にページ内で「LCP画像」(画面内で最も大きなコンテンツ要素になりそうな画像)を判定し、その画像にはloading="lazy"を付与しない仕組みが搭載されています。さらに、判定された画像にはfetchpriority="high"属性も自動的に付与され、ブラウザに優先的な読み込みを指示します。
つまり最新版のWordPressコアだけでも、多くのサイトでLCP画像の遅延読み込み回避は自動的に行われています。ただし、この判定はテーマやページビルダーのマークアップ次第で外れることがあるため、次項の「注意点」もあわせて確認してください。
③ 注意点
LCP画像には設定しないファーストビューに表示される最初の主要画像(LCP画像)に遅延読み込みを設定すると、かえって表示が遅くなります。詳しくはCore Web Vitals完全ガイドを参照してください。
- キャッシュ・高速化プラグインとの競合:WP Rocket等の遅延読み込み機能を独自に有効化している場合、WordPressコアの自動判定と重複・競合することがあるため、いずれか一方に統一することが望ましい
- ページビルダー・カスタムマークアップの影響:Elementor等で構築した背景画像やカスタムHTML内の画像は、コアの自動判定対象外になる場合がある
- Lighthouse等で確認:「LCP image was lazily loaded」といった警告が出ていないか、PageSpeed InsightsやLighthouseのレポートで確認するとよい
④ よくある質問(FAQ)
LCP画像を自分で遅延読み込みから除外する設定は必要ですか?
WordPress 6.3以降はコアが自動的にLCP画像(画面内の最大コンテンツ要素)を判定し、遅延読み込みの対象から除外するとともにfetchpriority="high"を付与します。そのため多くの場合、手動設定は不要です。ただしキャッシュプラグイン等がこの自動判定を上書きしていないか確認しておくと安心です。
遅延読み込みを設定するとSEOに悪影響はありますか?
適切に設定されていれば悪影響はなく、むしろページの読み込み速度が改善しSEOにプラスに働きます。ただしLCP画像を誤って遅延読み込みの対象にしてしまうと、LCPスコアが悪化し逆効果になるため注意が必要です。
動画にも遅延読み込みは設定できますか?
はい、iframeで埋め込まれた動画(YouTube等)にも遅延読み込みを設定できます。多くの高速化プラグインは画像だけでなく動画埋め込みの遅延読み込みにも対応しています。