Googleは先頃、画像とiframeのネイティブな遅延ローディング(コード名"LazyLoad")のサポートを有効にする実験的フラグを新たに加えた、Google Chrome 74をリリースした。imgおよびiframe HTMLタグには、対応するリソースの遅延読み込み動作を設定するために、loading属性が新たに定義されている。表示されていないコンテンツのロードを遅延させることにより、データ使用量とメモリ使用量を削減すると同時に、コンテンツの最初の画面表示を高速化できる可能性がある。
Chrome 74では、設定された距離内にユーザがナビゲートするまで、表示ページ上にない画像やiframeのロードを遅延する機能(LazyLoad)がサポートされるようになった。ロードインの距離は、ネットワーク速度などの要因を考慮して、コンテンツが表示されるまでにロードが完了するように調整される。
LazyLoadを設定するために、Webデザイナは、<img>および<iframe>要素のloading属性を使用して、デフォルトの遅延読み込み動作のコントロールと参照が可能である。loading属性は3つの値をサポートする。
lazy：遅延読み込みの適切な候補を示す。eager：遅延読み込みには不適切な候補であることを示す。これらは即時ロードされる。auto：遅延ロードを実行するかどうかの判断を、ブラウザに委託する。loading属性にautoを使用することは、属性を未設定にすることと等価である。
LazyLoadは現在、Chromeでのみサポートされている。この機能のクロスプラットフォームサポートが必要な開発者は、ブラウザの機能検出を使用して、lazySizesやvanilla-lazyloadなど、既存の遅延読み込みライブラリを使用する必要がある。vanilla-lazyloadの作成者であるAndrea Verlicchi氏は、ハイブリッド遅延読み込みについて詳細に説明したブログ記事を書いている。ChromeチームのエンジニアリングマネージャであるAddy Osmani氏は、実用的な例も提供している。
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt=".."/>
<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll("img.lazyload");
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
let script = document.createElement("script");
script.async = true;
script.src =
"https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
document.body.appendChild(script);
}
</script>
LazyLoadを試すには、chrome://flagsに移動して、"Enable lazy frame loading"と"Enable lazy image loading"の両方をオンにすればよい。これにより、loading="lazy"とマークされたものに加えて、loading="auto"またはloading属性がセットされていなくても、遅延ロードに適した画像とiframeのLazyLoadがオンになる。
Googleは<img>および<iframe>のloading属性を、HTML標準の一部として含めるように提案している。