つい先週だが、SEOの情報発信で有名な海外SEO情報ブログにて「ネイティブLazyloadがウェブ標準になる」という情報がシェアされた：
ネイティブLazyloadを可能にするloading=lazy属性がウェブ標準に、Chrome以外のブラウザサポートに期待
ネイティブLazyloadの情報自体は昨年からアナウンスされていたが、今回はChromeブラウザに限らずウェブ標準になっていくという点が新しいようだ。
Lazyloadはその名の通り、画像をページのロード後に時間差で読み込む処理だ。今までLazyloadの導入はjsを使った実装が必要だったのだが、それがどんなブラウザでも
<img>タグにloading=”lazy”と書くだけで遅延読み込みが実装できる
ようになる可能性が出てきたわけで、何とも興味津々な話である。現時点ではChrome(Version 76以降)以外のブラウザではサポートされていないようだが、今後の動向に注目だ。
で、ここからが本題。
今回のアナウンスより少し前に、WordPressにもlazy属性を付与できるプラグインがGoogleから提供されるようになったので、プラグイン導入の前後で元々PageSpeed Insightsから指摘されていた
「オフスクリーン画像の遅延読み込み」
の指摘がどう変わるか確かめてみた。
さっそくWordPressのNative Lazyloadプラグインをダウンロード
WordPressのプラグイン名は”Native Lazyload”。こちらからダウンロードできる。
プラグインを有効化すると、以下のようにWordPress内のあらゆる画像(<img>タグ)にloading=”lazy”属性が付与されるようになる。
Native Lazyload導入前
Native Lazyload導入後
僕のブログはWordPressを使っているのだが、実はまだLazyloadを導入していなかったため、ネイティブLazyloadの導入に際して特に気をつけることが無かったのが幸いだった。既にjsで何らかのLazyloadを導入している場合は考慮が必要かもしれない。
ネイティブLazyload導入の前後でPageSpeed Insightsの変化
PSIの結果から言うと、点数自体は大きく変わらなかった。
が、「オフスクリーン画像の遅延読み込み」の指摘項目がキレイさっぱり消えた。
Native Lazyload導入前
Native Lazyload導入後
そのため、導入効果はあると言える。
ただ僕のブログの場合、点数に良い影響を与えるためには遅延読み込みよりも「レンダリングを妨げるリソースの除外」を先に潰す必要がありそうだ。
余談だが、ブラウザがネイティブLazyloadに対応していない場合、Native Lazyloadプラグインは普通にJavaScriptでLazyloadを実現させているようだった。ブラウザアップデート前にChrome検証ツールで画像読み込み時のNetwork通信を見てたら、プラグインに内臓されているjsを読んでいることがあったので。そりゃそうか。