20
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-14

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

20
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?