Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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のダウンロードを防ぐことができます。

tfutada
シリコンバレー、ニューヨーク(NTTデータUSA)、インド(マヒンドラサティヤム)、ベトナム(フリー)を経て、現在は東南アジアのオフショア開発のコンサルティング会社経営 Kubernetes, GCP, Go, Python, R, Swift, Kotlin, ReactJS 英語(TOEIC895)
https://note.mu/tafutafu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away