お久しぶりです。WEBチームのウサナミです。
見る人によっては今更なネタかもしれませんが、ワードプレスがバージョン5.5でデフォルトでLazy-loadをサポートした事を今回は書こうと思います。

ちなみにサポートと言っても特定の条件下でimgタグに「loading=”lazy“」の記述をしてくれるだけなのですが・・・。

私がLazy-loadのサポートに気づいたのはつい最近なのですが、実際はバージョン5.5実装時、つまり2020年の時点ではサポートされていたようです。
気付かなかった言い訳みたいになりそうですが、特定の事を調べ続けている時って・・・方向性の違う情報って中々集まりにくいですよね・・・。

Lazy-load（遅延読込）とは？

Lazy-loadとはサイト内の特定のコンテンツをページ読み込み時には読み込ませずにスクロールして特定のコンテンツ部分に来た時に初めてそのコンテンツを読み込ませる技術です。
最初にページ全体を読み込ませる訳ではないので、こうする事でユーザーのページ表示速度体験を早める事が出来ます。
このLazy-loadはページ読み込みが遅いサイトで読み込みの高速化対策でよく使われているのを目にします。
最近だと、グーグルがLazy-loadを推奨しているのもあり、一般的なサイトでも使っているのを見かけるようになりました。

Lazy-loadと言われるとある程度知識がある人であれば、jsを利用して画像を遅延読込させるというイメージが強いかと思いますが、2019年辺りにグーグルがjsを使わなくても「loading=”lazy“」をimgタグに記載さえすれば遅延読込を行ってくれるよと発表した機能です。正式には“ネイティブlazy-load”というらしいのですが、混乱を避けるために当ブログではlazy-loadの表記で統一しています。

どうすれば動かせる？Lazy-loadを動かす方法

この便利なLazy-loadの機能ですが特定の条件を満たしているとimgタグに「 loading=”lazy“」のコードが自動で入ってくるようです。
その条件ですが”width”と”height”が設定されていると入ってくるようです。

なんで”width”と”height”を設定していないと自動でコードが入ってこないのか考えみたのですが、おそらく、画像の高さ（height）を事前に設定していないとLazy-loadが動いた時に画像のサイズをそのタイミングで取得するので、高さを設定していない高さ0の画像のところに画像サイズ分のコンテンツが急に入ってくるのです。なので、その急に入って来たコンテンツの高さ分その下のコンテンツが下へずれていく訳です。これを避けるためにheightの設定が必要なのではないかと私は思っています。

Lazy-loadに関するその他情報

全てのブラウザに対応している？

残念ながら現状全てのブラウザに対応している訳ではないようです。ただ元々サファリではサポートされていなかったのが、現状ではサポート対象になっていたり、そもそもこのLazy-loadを設定していてデメリットらしいデメリットが無いのと、実装が簡単という理由でこのLazy-loadを使わない手はないと私は思います。

iflameにも対応している？

特定のiflameでは機能しないようですが、どうやら現状いくらかのiflameでは対応が確認されているようです。
フッター付近にiflameを設定していたりするとLazy-loadが効くのは大変嬉しいですよね。自社でもフッター付近にグーグルマップのiflameを設定する機会が多いのでこれは大変嬉しいです。

意図的にLazy-loadを停止させられる？

勝手に入って来る「loading=”lazy“」の表記は「loading=”eager”」で無効化できるようです。ファーストビュー内の意図しない画像にLazy-loadが機能していて、ユーザー体験を損なっていた場合はこのコードで無効化するのがいいでしょう。

独自テンプレートでも動く？

試してみた所、home.phpの中に直書きしたimgタグでは動かず、エディターを使って、投稿ページ、固定ページを作成した場合は動きました。恐らくエディターを使って作成されたページでは自動で「loading=”lazy“」のコードが入ってくるようです。

ファーストビューの画像だけLazy-loadが動かないようになっている？

上でファーストビューについて少し触れましたが基本的には現状の最新のワードプレスであればファーストビューの画像であれば、デフォルトでLazy-loadが機能しないようになっているようです。大変便利ですね・・・と言いたい所ですが、検証してみた所、ファーストビューの画像に「loading=”lazy“」が入らないのではなく、一番最初の画像に対して「loading=”lazy“」のコードが入らないようになっているようです。ですので、そのあたりは要注意です。

プラグインのLazy-loadは必要なくなった？

これは人によって意見が分かれるようです。
プラグインのほうが優秀だという人をブログサイトで見かけたのですが、そこはもう好みという事なのでしょうか。