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

[レベル: 上級]

loading=lazy 属性で実装するネイティブ Lazyload がウェブ標準になりました。
Chrome 以外のブラウザのサポートが期待されます。

Chrome 以外のブラウザのサポートに期待

loading=lazy 属性は、JavaScript のライブラリを必要とせず、この HTML 属性を img タグや iframe タグに追加するだけで遅延読み込みを可能にします。
Google が開発し、Chrome 76 が初めてサポートしました。

だれでも簡単に Lazyload を構成できるので非常に優れものなのですが、欠点は Chrome しかサポートしない点です。

しかし、ウェブ標準になったので今後は Chrome 以外のサポートが期待できます。

Firefox がさっそくテスト実装

Firefox の開発版、Firefox Nightlyloading=lazy 属性をさっそくテスト実装したとのことです。

Microsoft Edge そしてなんと言っても Apple の Safari もサポートしてくれると最高ですね。

プラットフォームを問わず Lazyload を実装するには、IntersectionObserver (と polyfill) を利用することが依然として推奨です。
それでも、メジャーなブラウザがネイティブ Lazyload をサポートする日がそう遠くない将来にやってくるかもしれません。

現状では Chrome のみのサポートであったとしても、すべての画像と iframe には loading=lazy 属性を今から追加しておくといいでしょう。
WordPress には自動でこの属性を追加する (Google 製の)プラグインも公開されています。
また、WordPress 本体が loading を標準でサポートする計画もあります。