[レベル: 上級]
Safari がバージョン 15.4 でネイティブ Lazy-load をデフォルトでサポートします。
ネイティブ Lazy-load は、画像の <img> 要素または iframe の <iframe> 要素に loading 属性を付けることにより、ブラウザの機能として遅延読み込みを実現する機能です。
JavaScript によるライブラリを必要としません。
HTML タグで実装できます。
Chrome が、2019 年 8 月にリリースされたバージョン 76 で初めてネイティブ Lazy-load をサポートしました。
もともとは Google 独自の機能でしたが 2020 年 2 月にはウェブ標準になっています。
また、ネイティブ Lazy-load は Google 検索で推奨される遅延読み込みの技術でもあります。
Safari でネイティブ Lazy-load がデフォルト有効に
正確には、ネイティブ Lazy-load を Safari はすでにサポートしていました。
しかし試験機能としての提供であり、利用するにはユーザーが明示的に有効にする必要がありました。
一般ユーザーが試験機能を有効にするとは思えず、実質的にはサポートしていないも同然です。
2021 年 11 月 15 日にリリースされた Safari Technology Preview 135 では、デフォルトでネイティブ Lazy-loading が有効になっていました。
この時点で正式機能になるのではという期待が膨らみました。
そして、いよいよ Safari でもネイティブ Lazy-load がデフォルトで機能するようになりました。
ただし今のところは、画像 (<img> 要素) でのみ標準サポートします。
ネイティブ Lazy-load の OS 要件
Safari 15.4 でネイティブ Lazy-load が機能するわけですが、OS に条件があります。
- macOS Monterey 12.3
- iOS 15.4
- iPadOS 15.4
つまり、OSが（現時点での）最新バージョンである必要があります。
【UPDATE (2022/03/17)】
macOS Big Sur と macOS Catalina にも Safari 15.4 がリリースされました。
Safari で幅広くネイティブ Lazy-load が機能するようになるまでにはまだしばらく時間がかかりそうですかね。
それでも嬉しいニュースであることに変わりはありません。
この記事を書いている時点で、ネイティブ Lazy-load をデフォルトでサポートするメジャーブラウザは次のとおりです。
スマホ版・PC 版ともです。
- Chrome
- Edge
- Firefox ※
<img>要素のみ - Safari ※
<img>要素のみ
今や、メジャーなブラウザではネイティブ Lazy-load が使われるということですね！