6月4日リリース予定のChrome75にて、imgとiframeタグの、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>
imgとiframeのloading属性の指定で、遅延ロードの有効、無効を指定できます。デフォルトでは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のダウンロードを防ぐことができます。