画像の遅延読み込みを実装する

ページ内の画像をすべて一度にダウンロードすると、初期表示が遅くなります。ビューポート外の画像は後から読み込む「遅延読み込み」を実装することで、ファーストビューの表示速度を改善できます。

loading 属性を使う方法

<img loading="lazy"> を指定するだけで、ブラウザがビューポートとの距離に応じて読み込みタイミングを自動的に判断します。追加の JavaScript は不要で、もっとも手軽な実装方法です。ファーストビューに含まれる画像には指定しないよう注意してください。

Intersection Observer との組み合わせ

より細かい制御が必要な場合は Intersection Observer API を使います。data-src 属性に本来の URL を入れておき、要素がビューポートに入ったタイミングで src に差し替えます。閾値やマージンを調整することで、スクロール体験を損なわない読み込みタイミングを実現できます。