ネイティブLazy-loadのしきい値をChromeが改良。ビューポートからの距離を短くし、遅延読み込みが適用されやすく

[レベル: 上級]

Chrome がネイティブ Lazy-load を適用する際のしきい値を Google は改良しました。

ネイティブ Lazy-load を適用する画像/iframe のビューポートからの距離を従来よりも短くしました。
つまり、ネイティブ Lazy-load がより適用されやすくなります。

3000px から 1250px へ短縮

これまでは、ビューポート(スクリーンに見えている領域)から 3000px 以上離れている画像と iframe がネイティブ Lazy-load の機能により Chrome は遅延読み込みしました。
これからは 1250px になります。

少し乱暴な言い方をすると、以前は、たとえ見えていなくてもページのずっと下にないと画像は遅延読み込みされませんでした。
改良後は、そんなに下になくても遅延読み込みされます。
したがって、より多くの画像(と iframe)が遅延読み込みの対象になるので、ページの読み込み速度が改善される機会が増えます。

一般的に利用されている Lazy-load 用の JavaScript ライブラリ、たとえば LazySizes とほぼ同等の動作をするようになったということです。

最新版の Chrome 85 から旧バージョンの 79 までさかのぼって、この変更が適用されます。

なお 3000px ⇒ 1250px は 4G のような高速回線の場合です。
3G のような低速回線では 4000px ⇒ 2500 px になります。

ビューポートしきい値の変更は今のところ Chrome だけに限られます。
しかし、ネイティブ Lazy-load は画像、iframe ともにウェブ標準になっており、Chrome 以外のブラウザにも実装されています。
ほかのブラウザでもしきい値を変更するように Google は呼びかけています。

画像のサイズを指定する

しきい値の改良をアナウンスすると同時に、ネイティブ Lazy-load の利用に関して Google はいくつか追加情報を提供しています。

まず、<img> タグの画像には必ず width 属性と height 属性を付けます。
理由は CLS を防ぐためです。

widthheight がなくても、ネイティブ Lazy-load は機能しますが、レイアウトのズレを防止するためにも付けることが推奨されます。

width/height が CSL 防止に役立つ理由は Web担当者Forum の連載コラムで解説しました。

ビューポート内の画像にはネイティブ Lazy-load しない

初めからビューポートに表示される画像と iframe にはネイティブ Lazy-load を使わないのが理想です。

最初から表示すべきなのに遅延読み込みが指定されていると、ブラウザに余分な処理が必要になります(具体的には IntersectionObserver の介入)。
「表示を待てと命令されたけど、すぐに表示していいんじゃん!」というようなイメージですかね。

実質的には、Chrome では問題になるような不都合は発生しないものの、可能であれば、最初からビューポートに表示する要素には loading=lazy を追加しないのが推奨です。

JS の Lazy-load と併用

ネイティブ Lazy-load をサポートしないブラウザは、loading=lazy を無視します。
遅延読み込みは起こらず、通常どおりに画像や iframe を読み込みます。

すべてのブラウザで Lazy-load したい場合は、フォールバックとして、Lazy-load 用の サードパーティ製 JavaScript ライブラリを利用する必要があります。

その JavaScript が設定するしきい値が ネイティブ Lazy-load よりも大きければ、ネイティブ Lazy-load 側のしきい値に Chrome は従います。
JavaScript のしきい値のほうが小さければ、JavaScript 側のしきい値に Chrome は従います(しきい値に従うだけであって、実際の画像がどのタイミングで表示されるかは設定にもよる)。

そのほかにも、多くの FAQ を掲載しています。
特に開発系の方は読んでおくといいでしょう。

ネイティブ Lazy-load がどんどん使いやすくなっています。
あなたはもう実装していますか?