FirefoxがネイティブLazyloadをサポート、画像の遅延読み込みを簡単に実装可能に

[レベル: 上級]

正式版の Firefox 75 が画像のネイティブ Lazy load をサポートしました。

画像タグ (<img>) に loading="lazy" HTML 属性を追加するだけで、画像の遅延読み込みが Firefox で可能になります。
遅延読み込みさせることによりページの表示速度の向上が見込まれます。

ウェブ標準になった loading 属性を最初にサポートしたブラウザ

Lazy load(レイジー ロード)は、必要になったときにリソースの読み込みを開始する技術です。

たとえば、画像がスクリーンの外にあるときには読み込みません。
ユーザーにはまだ見えていないからです。
スクロールしてその画像がスクリーン領域に入りそうになったときに初めて読み込みを開始します。
不要なリソースの読み込みを遅らせることで、ページの表示速度を上げることができます。

一般的には、Intersection Observer API などを用いた JavaScript で Lazy load を実装します。
しかし、Google は Chrome 76 でネイティブ Lazy load を独自にサポートしました。
JavaScript のライブラリを必要とせずに、画像タグや iframe タグに loading 属性を付けるだけで、Lazyload が可能になります。

手軽に実装できるため非常に便利なのですが、サポートするブラウザは Chrome だけでした。
しかしながら、2020 年 2 月に loading 属性はウェブ標準となりました。
いち早くサポートしたブラウザが Firefox です。

たとえば、次のようにマークアップするだけで Firefox(と Chrome)で遅延読み込みを実行できます。

<img src="cute-cat.jpg" loading="lazy" alt="かわいいネコ" />

Chrome とは異なり、<iframe> タグのネイティブ Lazyload は Firefox はサポートしていません(iframe はまだウェブ標準になっていないため)。

Firefox はどちらかというと技術者などテック上級者の利用が多いブラウザのように思います(僕のブログでは、4〜5 %)。
それでも、ネイティブ Lazy load が有効になるユーザーが増えるのは良いことです。
Firefox に続いて、Safari がサポートしてくれることを切に願います。