一覧画像読み込みを後回しにする（ちょっと良いUIおれおれAdvent Calendar 2024 – 18日目）

端から全部読み込むと、場合によっては訪問者リソースの負担になるだけでなく早く見せたい部分の読み込み速度にも影響しちゃったりするので、一覧をスクロールして順々に見てくときは画像その他の読み込みを後回しになってると助かります。

いちおう HTML だけでもできて、まあ常に効果的というわけでもないですが、簡単なので選択肢に入れておくと何かのときに役立つかもです。

`loading="lazy"` で後回し

画像の <img> タグに loading="lazy" を付けるだけで後回しになります。かんたーん。

<img src="image.jpg" loading="lazy">

ここで「後回し」とは、スクロールとかで見えるようになるまで読み込みを行わないという動作を指します。最初から見えていれば最初から読み込まれます。

スクロール以外に例えば <details> の開閉なんかでも有効のようです。ブラウザーの実装によりますが、まあだいたい期待通りに動いてくれるでしょう。知らんけど。

同じく loading="lazy" が利きます。

<iframe src="extra.html" loading="lazy"></iframe>

商品一覧みたいなページで大量の項目を出力しているときは付けておくと良いかも。でも読み込み途中の状態が見えてしまうので嬉しくないかも？　スクロール距離の閾値を指定する方法はなさそうなので、必要なら JavaScript で実装する必要があります。

20 年前から変わらないねと言いたいところですが、現代では交差監視 IntersectionObserver API の利用が便利です。対象要素とスクロール画面（ビューポート）の交差を見てくれます。

かつて無限スクロールを実装したとき、1 ページ分を先行して読み込んでおいてスクロールで到達するたびにそれを即時表示、なんてやったのを思い出しました。このやり方だと後から増えるけど読み込みを待たされることがないので良いかなって。