[レベル: 上級]
loading=lazy 属性で実装するネイティブ Lazyload がウェブ標準になりました。
Chrome 以外のブラウザのサポートが期待されます。
The lazy loading attribute (<img loading="lazy") is now officially a web standard 🎉
Thanks to @domfarolino and other community members!https://t.co/fMqFq8gBVs pic.twitter.com/fFotntnBlD
— Houssein Djirdeh (@hdjirdeh) February 12, 2020
The specification for native image lazy-loading has been merged into the HTML standard! https://t.co/Dl2gtLqSrn 🎉
Huge thanks to @domfarolino @annevk @zcorpan and many others! About: https://t.co/r6YthBCuEO pic.twitter.com/sKa6EnTgpn
— Addy Osmani (@addyosmani) February 12, 2020
Chrome 以外のブラウザのサポートに期待
loading=lazy 属性は、JavaScript のライブラリを必要とせず、この HTML 属性を img タグや iframe タグに追加するだけで遅延読み込みを可能にします。
Google が開発し、Chrome 76 が初めてサポートしました。
だれでも簡単に Lazyload を構成できるので非常に優れものなのですが、欠点は Chrome しかサポートしない点です。
しかし、ウェブ標準になったので今後は Chrome 以外のサポートが期待できます。
Firefox がさっそくテスト実装
Firefox の開発版、Firefox Nightly が loading=lazy 属性をさっそくテスト実装したとのことです。
Native image lazy-loading (<img loading=lazy>) working in @FirefoxNightly! An early look… 🦊 pic.twitter.com/yX0nHr2VSp
— Addy Osmani (@addyosmani) February 13, 2020
Microsoft Edge そしてなんと言っても Apple の Safari もサポートしてくれると最高ですね。
プラットフォームを問わず Lazyload を実装するには、IntersectionObserver (と polyfill) を利用することが依然として推奨です。
それでも、メジャーなブラウザがネイティブ Lazyload をサポートする日がそう遠くない将来にやってくるかもしれません。
現状では Chrome のみのサポートであったとしても、すべての画像と iframe には loading=lazy 属性を今から追加しておくといいでしょう。
WordPress には自動でこの属性を追加する （Google 製の）プラグインも公開されています。
また、WordPress 本体が loading を標準でサポートする計画もあります。