画面外のイメージおよび iframe を自動的に遅延読み込みする Chrome のライトモードユーザー向け Lazy-loading について

この記事は Addy Osmani、Scott Little、Raj T - lazy な Chrome エンジニアたちによる Chromium Blog の記事 "Automatically lazy-loading offscreen images & iframes for Lite mode users" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


Chrome 76 で、イメージおよび iframe のネイティブ遅延読み込みを導入しました。これは `loading` 属性に基づいて行われ、デベロッパーによるオプトインとなります。Chrome 77 では、ライトモード（データセーバー）を有効にしている Android 版の Chrome ユーザーに対して、自動的にイメージおよび iframe のネイティブ遅延読み込みのメリットがもたらされます。

ライトモードを利用すると、ユーザーのデータ使用量を最大 60% 削減できます。削減のほとんどは、ユーザーがリクエストしたページをダウンロード前に圧縮することによって実現します。


通常、ウェブページには、下の方にあって画面に入りきらないイメージや埋め込みコンテンツが存在します。ユーザーが下までスクロールしてそういったコンテンツを表示することはほとんどありません。現在、端末はこのようなコンテンツを読み込むためにリソースを使う必要があります。データプランが限られているユーザーや、ネットワーク接続状態が悪いユーザーにとって、この点は問題です。


ユーザーが Chrome for Android でライトモードを有効にしている場合、画面外にあるイメージおよび iframe の近くにスクロールするまで、読み込みが先送りされます。これは、デベロッパーが何もしなくても実行されます。自動遅延読み込みにより、ネットワークのデータ使用量やメモリの消費量を抑えることができます。さらに、ユーザーの目に見えるコンテンツが優先されるので、サイトのスピードが上がる可能性もあります。


私たちの実験では、イメージおよび iframe のネイティブ遅延読み込みによって、1 ページあたりのダウンロード バイト数（75 パーセンタイル）が最大 10% 削減されました。また、ダウンロードされる合計バイト数（中央値）は 8% 少なくなっています。さらに、自動遅延読み込みによって First Contentful Paint（最初のコンテンツの描画）の中央値が 1～2%、First Input Delay（最初の入力までの遅延）の 95 パーセンタイルが 2%、ページあたりのメモリ削減量の中央値が 0.7% 改善されました。将来的には、さらにメリットが増えることが予想されます。


Chrome のネイティブ遅延読み込みには、先送りしたコンテンツの読み込みがどのくらいで開始されるかを表す距離しきい値があります。このしきい値はそれぞれ異なり、実質的な接続タイプなどの要素によって決まります。この距離は、コンテンツが見えるようになるまでにほぼ読み込みが完了するように選ばれます。


`loading` 属性の値が `auto` に設定されている <iframe> や <img> にも、ライトモードの自動遅延読み込みが適用されます。<picture> 要素や CSS の背景画像も含まれます。


重要な点として、イメージおよび iframe の自動遅延読み込みは、ライトモードを有効にしているユーザーのみに適用されることを覚えておいてください。ライトモードは、接続環境が悪い地域や、接続に多額の費用がかかる地域で多用されています。この機能によって特にメリットを受けることができるのは、そういった地域のユーザーであると確信しています。ライトモードをオンにしているユーザーの割合を知りたい場合は、アナリティクスのSaveData JavaScript API から近似値をモニタリングできます。




Reviewed by Eiji Kitamura - Developer Relations Team