imgタグにloading=lazy属性を仕込んでみたら、PageSpeed Insightsで「オフスクリーン画像の遅延読み込み」の指摘が無くなった

img loading=lazy6

つい先週だが、SEOの情報発信で有名な海外SEO情報ブログにて「ネイティブLazyloadがウェブ標準になる」という情報がシェアされた:

ネイティブLazyloadを可能にするloading=lazy属性がウェブ標準に、Chrome以外のブラウザサポートに期待

ネイティブLazyloadの情報自体は昨年からアナウンスされていたが、今回はChromeブラウザに限らずウェブ標準になっていくという点が新しいようだ。

Lazyloadはその名の通り、画像をページのロード後に時間差で読み込む処理だ。今までLazyloadの導入はjsを使った実装が必要だったのだが、それがどんなブラウザでも

<img>タグにloading=”lazy”と書くだけで遅延読み込みが実装できる

ようになる可能性が出てきたわけで、何とも興味津々な話である。現時点ではChrome(Version 76以降)以外のブラウザではサポートされていないようだが、今後の動向に注目だ。

 

で、ここからが本題。

今回のアナウンスより少し前に、WordPressにもlazy属性を付与できるプラグインがGoogleから提供されるようになったので、プラグイン導入の前後で元々PageSpeed Insightsから指摘されていた

「オフスクリーン画像の遅延読み込み」

の指摘がどう変わるか確かめてみた。

もっと見る