WordPressでサイトを作っていると、
- ページが重い
- 画像が多くて読み込みが遅い
こういった問題にぶつかります。 そこで重要になるのが👇
👉 「lazy（遅延読み込み）」 今回は、functions.phpだけで制御する方法を解説します。(※子テーマ推奨)
１）lazy（遅延読み込み）とは？
簡単に言うと「画面に表示されるタイミングで画像を読み込む」仕組み
通常はページを開いた瞬間に全画像を読み込みますが、 lazyを使うと
- 上にある画像 → すぐ読み込む
- 下にある画像 → 後で（スクロール時に）読み込む
👉 初期表示が軽くなる
２）実装方法（functions.php）
functions.phpの一番下に以下をそのまま追加してください
// 読み込み遅延コード（function用）※1枚だけlazyを除外する
add_filter('wp_omit_loading_attr_threshold', function () {
return 1;
});
このコードの意味
これは
「最初の1枚を除いて、lazy(遅延読み込み)を付与してね」という呪文。
何故最初の１枚を除外するか
ファーストビューに１枚目の画像が見えている場合、
「そこは最初から読み込んでくれないと困る」わけだ。
だから、最初から見えている部分は初期表示してね。という意味で
１枚目を除外している。
だから最初の３枚を除外したい場合には
return 3;
になるし、逆に全部lazyにしたい場合は
return 0;
にすれば良い。※ただし非推奨（ファーストビューが遅くなる）
３）最後に（確認方法）
画像にlazyが付いているかどうかの確認方法だが（chromeの場合）
１）画像を右クリック⇒検証
２）imgに「loading="lazy"」とついていればご明算
