2022年から使ってゆくHTML 〜loading 属性〜

こんにちは森田です。
先日 iOS と macOS がアップデートされ色々と新機能が追加されました。

参考：New WebKit Features in Safari 15.4 

その中で、HTMLに待望の loading 属性がネイティブでサポートされました。
これで主要なブラウザは全てloading 属性をサポートしたので今年からは遠慮なく使っていけそうです。

loading 属性とは

loading 属性 は img 要素や iframe 要素に使用する属性です。（現在 Safari は img 要素のみサポート）

画像やアイフレームを読み込むタイミングを指定できます。主に遅延読み込みに使います。

<img src="image.png" alt="●●" loading="lazy" />

遅延読み込みはページスピードの改善も当然ながら Core Web Vitals のスコア改善にも大きな効果があるので、これがブラウザネイティブで使えるのは

以前、このブログの Core Web Vitals を改善した際も遅延読み込みでスコアが大幅に上がりました。

loading 属性に使用できる値

loading 属性に使用できる値は現在3つあり、以下となります。

lazy

遅延読み込みを実行します。
ビューポート内にある画像のみを読み込み、それ以外の画像はビューポート内に入るまで読み込まれません。

ビューポート内と表現しましたが、実際にはビューポートに入る前に読み込まれます。

eager

eagerはビューポート内など関係なくすぐに読み込みます。
今までのブラウザの動作です。

auto

ブラウザに読み込みを任せます。
loading 属性がないと対応しているブラウザは auto として実行されるみたいです。

auto とは何がオートかと軽く調べましたが、Chrome は通信速度などから判断して遅延読み込みを実行するみたいです。

参考：Browser-level image lazy-loading for the web

全て lazy 指定でいいのでは？

全て lazy を指定しておけばビューポート内であれば読み込まれるし、ビューポート外は遅延読み込みされるのでそれでいいのでは？と思いましたが、ビューポート内でもレンダリングが遅延されるために表示が遅くなるようです。

PageSpeed Insights ではファーストビュー内に loading="lazy" があると評価してくれます。

ファーストビュー内で表示される画像は eagerを明示的に指定した方が良さそうですね。

対応ブラウザ

冒頭でも書いた通り iOS と macOS がサポートされたことによりほぼ全てのブラウザで使うことができます。

なにしろ iOS で使えるようになったのは大きいですね。
ファーストビュー以外の img 要素には必ず使うようにしたいです。

IE11などサポートしていないブラウザでも遅延読み込みにならないだけですので遠慮なく使っていいと考えます。

まとめ

今年からは img 要素には必ず付けるレベルで使っていこうと思います。