EagleLand

img要素とiframe要素のlazyload属性

Published at 2018-08-18

<img> 要素と <iframe> 要素に lazyload 属性を定義する Pull Request が whatwg/html に出されている。

Web における画像の遅延ロード

Web でロードするリソースは増える一方で、中でも画像が占める割合は大きい。ロードした HTML ドキュメントに <img> 要素があれば、ブラウザは即座に画像をダウンロードしようとする。これらの画像が大きければ大きいほど、初期ロードにおけるネットワークのコストと占めるメモリの割合が大きくなる。こうした問題を背景に、画像を遅延ロードする様々なアプローチが取られてきた。

今回追加されようとしている lazyload 属性はこうした処理をブラウザネイティブで出来るようにする提案である。この属性は <img> 要素だけでなく <iframe> 要素でも有効化され、Above The Fold にないこれらの要素が参照するリソースをむやみにロードせずに済む。

Chromium ではそれぞれ実装が進められており、<iframe lazyload="on"><img lazyload="on"> は Chrome 70 以降で、それぞれ以下のフラグをオンにすると機能を有効化できる(前者は Chrome 68 から、らしい)。

「その要素がビューポートに入ったらロードする」という機能は、Blink LazyLoad Design Doc というドキュメントで説明されており、さらに <iframe> 要素と <img> 要素それぞれのメカニズムは LazyFrames と LazyImages に細分化されている。内部デザインが気になる人はそちらを参照して欲しい。

タイトルと URL をコピーしました