Edited at

Chrome 75 lazy loading 遅延ロードのネイティブサポート

6月4日リリース予定のChrome75にて、imgiframeタグの、lazy loading(遅延ロード)がネイティブ実装されます。詳しくは、Chromeの開発者である、Addy Osmaniさんのページに説明があります。

Addyさんはこちらの男性です。

https://www.youtube.com/user/addyosmani

以下、そのざっくり要約になります。

現状では画像の遅延ロードをする場合、lazysizesなどのJSライブラリを使用する必要がありましたが、Chrome75からは不要になる予定です。

遅延ロードというのは、オフスクリーン(スクロールしないと見えない領域)のimgやiframeのダウンロードをしないことでネットワーク使用量を減らし、webページをすぐにレンダリングすることでユーザ体験を向上するテクです。

<img src="celebration.jpg" loading="lazy" alt="..." />

<iframe src="video-player.html" loading="lazy"></iframe>

imgiframeloading属性の指定で、遅延ロードの有効、無効を指定できます。デフォルトではautoになります。


  • lazy 有効。オフスクリーンの場合はダウンロードしません。

  • eager 無効。これまで通りにオフスクリーンでもダウンロードします。

  • auto 遅延ロードするかどうかはブラウザが判断します。

srcsetで指定した画像や、pictureタグ内のimgタグに対しても機能します。

遅延ロードでダウンロードされなかったimgやiframeはユーザがスクロールを開始してスクリーンの見える部分(above-the-hold)に近づくとダウンロードを開始します。

どれくらい近づいたらかはブラウザの実装によります。あまり短すぎるとユーザは真っ白な画面に遭遇するリスクがありますし、逆に長すぎるとユーザが途中でスクロールをやめてしまい、無駄に終わる可能性もあります。

遅延ロードはChrome75だけの実装ですので(Firefoxも実装予定です)、他のブラウザではlazysizesなどのJSで対応する必要があります。ブラウザで遅延ロードがサポートされているかの判定は以下のようにします。

if ('loading' in HTMLImageElement.prototype) { 

// 遅延ロードをサポートしてます
} else {
// 遅延ロードをサポートしてません
// lazysizesなどで対応します
}

こちらに遅延ロードのデモのビデオがあります。

https://www.youtube.com/watch?v=bhnfL6ODM68

もしくはChrome Canaryでこちらのサンプルページを開いて遅延ロードを体験することができます。

https://mathiasbynens.be/demo/img-loading-lazy

遅延ロードを実行するためには、chrome://flagsのフラグ設定から、


  • Enable lazy frame loading

  • Enable lazy image loading

を有効にして、Canaryを再起動します。

遅延ロード実行の判定は、スクロールの距離とネットワークスピードに基づいて決定します。それの閾値はハードコードされています。

遅延ロードの実装によって、これまで動いていたiframeや広告のiframeに影響する可能性もあります。

Body.OnLoad()イベントがオフスクリーンのimgやiframeを待たずに発火することに注意してください。

Chromeの実装では、もしサーバがrangeリクエストに対応している場合、最初の2KBだけを取得します。最初の2KBに画像サイズの情報が含まれていれば、その情報を元にプレースホルダーの表示ができるからです。

ブラウザが遅延ロードをサポートしているかのヒントをサーバ側に送信する仕様も議論されています。これにより、無駄なJSのダウンロードを防ぐことができます。