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" があると評価してくれます。

PageSpeed Insights のスクリーンショット

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

対応ブラウザ

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

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

2022年1月現在の Can I use のスクリーンショット

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

まとめ

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。