以前は画像の遅延読込みを行うにJavaScriptを使って実現していました(JavaScriptでWebブラウザに特別な処理を行わせていたわけです)。WordPressではそれ用のプラグインが何種類かありますので、さほど面倒な話ではありませんでした。
ネイティブLady Load
しかし、最近はWebブラウザ自体がLazy Loadをサポートしています。これをネイティブLady Loadと呼ぶそうです。これを使えばJavaScriptを使うことなく、Lady Loadを実現できます。WordPressはバージョン5.5からネイティブLady Loadに対応しています。余計なプラグイン(JavaScript)を使う必要がないので、その分ページが軽くなります。
参考ページ:
実例
例えばこのページのこの画像。
これは、普通に画像を貼り込んだだけです。ブロックエディタ上ではこんな感じ。
「HTMLで編集」で見るとソースコードはこうです。
ご覧のとおり、単にimgタグで画像のURLを指定しているだけです。
しかし、これを実際に表示し、そのときのソースコード、つまり、Webサーバが送信したもの(=Webブラウザが受信したもの)はこうです。
ご覧のとおり、imgタグに「loading=”lazy”」が追加されています。WordPressが自動で追加したもの(これがネイティブLady Load対応)です。
Webブラウザの対応状況
とはいえ、ネイティブLazy Load自体はWebブラウザの機能ですから、Webブラウザが対応していないと使えません。2021年3月現在での各Webブラウザの対応状況はこちら。
ざっくり言えば、ChromeとEdgeが対応しており、Firefoxは部分的対応です。Firefoxの「部分的」というのは画像だけしか対応していないということのようです(iframeなどには未対応)。Safariは実験的対応という位置づけで、ユーザが設定を行えば使えるようになっています(Mac、iPhoneとも)。
引用元(最新データ)はこちら。
まだ対応していないWebブラウザがあるとはいえ、Lazy Loadはウェブ標準となっているそうですので、各ブラウザとも対応してくるでしょう。
プラグインは不要に
WordPress自体がネイティブLazy Loadに対応したので、最早Lazy Loadのプラグインは不要です。対応していないWebブラウザもあるとはいえ、早晩対応してくるでしょうし、未対応であっても画像が表示されなくなるわけではなくて、遅延読み込みされずにすぐに読まれるというだけのことです。
上にも書いたように、余計なプラグインはない方が処理速度の面で有利ですのでLazy Load系のプラグインはやめてしまってもよいのではないかと思います。
PageSpeed Insightsで指摘される?
Lazy Load系のプラグインを止めてPageSpeed Insightsでチェックしてみました。
おや?「オフスクリーン画像の遅延読込み」が指摘されています。ご丁寧に「Lazy-loadプラグインをインストールせよ」とのアドバイスまであります。PageSpeed InsightsはネイティブLazy Loadに対応していないのでしょうか?
この下を見るとこういう感じで対象画像(=Lazy Loadの指定がないもの)が列挙されていました。
見ての通り、WordPress Popular Postsプラグインによって表示されているアイキャッチ画像です。WordPressに記事として貼り込んだ画像はLazy Loadの指定があるけれど、WordPress Popular Postsが表示する画像にはそれが指定されていないということのようです。
WordPress Popular PostsでLazy Loadするには?
そうすると、やはりLazy Load系のプラグインを使わざるを得ないかと思ったのですが、WordPress Popular Postsの設定を改めて確認したところ、Lazy Loadの項目がありました。
上のようにLazy Loadが「いいえ」になっていましたので、当然の結果です。
「はい」にして「適用」を押します。これで画像をチェックしてみます。
ちゃんと「loading=”lazy”」の属性が付加されています。
PageSpeed Insightsでも指摘が消えました。と言いたいところですが、まだ残っています。他の画像ですが。
これらは、アフィリエイトのバナーです。これくらいなら手動で「loading=”lazy”」を付けてもいいかもしれませんね。細かくえ言えば「アフィリエイトタグ」の改変になってしまうので、ASPに確認してからの方が安全だろうとは思います(プラグインを使ってLazy Loadに対応するのも、結果的にはアフィリエイトタグの改変になることには変りないです)。