画像のlazyloadingとは？

ウェブページに多くの画像が含まれている場合、ページを開いた瞬間にすべての画像を読み込むと、初期読み込み時間が不必要に長くなります。遅延読み込み（Lazy Loading）は、ユーザーが見ようとしているときにのみ各画像を読み込む技術です。実装が簡単で、サイトのパフォーマンスとユーザー体験を大幅に向上させます。

Lazy loadingの定義

Lazy loading（文字通り「怠惰な読み込み」）とは、画面上ですぐに表示されないリソースの読み込みを遅らせることです。画像に適用すると、ページ読み込み時に表示される領域（ビューポート）にある画像のみが即座にダウンロードされます。他の画像は、ユーザーがスクロールするにつれて段階的に読み込まれます。

Lazy loadingなしでは、ブラウザはページを開いた瞬間にすべての画像をダウンロードします — ユーザーが見ることのない一番下の画像も含めて。

Lazy loadingはどのように機能するか？

画像のlazy loadingを実装するための主なアプローチが2つあります：

1. ネイティブHTML属性 loading="lazy"

2019年以降、モダンブラウザはシンプルなHTML属性でlazy loadingをネイティブサポートしています：

<img src="photo.jpg" alt="説明" loading="lazy">

ブラウザはユーザーのスクロール位置に基づいて、いつ画像を読み込むかを自動的に判断します。JavaScriptライブラリは不要で、現在推奨される方法です。

2. Intersection Observer API（JavaScript）

ネイティブ属性が標準化される前、開発者はIntersection Observer APIを使って画像がビューポートに入るタイミングを検出し、その時点で読み込みをトリガーしていました。このアプローチは、より高度な動作や画像入場時のアニメーションに今でも役立ちます。

Lazy loadingのメリットとは？

パフォーマンスと読み込み時間

起動時に読み込む画像数を減らすことで、lazy loadingはページの初期重量を減らし、表示を高速化します。Largest Contentful Paint（LCP）やTime to Interactive（TTI）などのパフォーマンス指標が改善されます。

帯域幅の節約

ページ下部の画像は、ユーザーが実際にそこに到達した場合にのみダウンロードされます。多くのビジュアルがある長いページでは、特にモバイルや低速接続の訪問者に対して、大幅な節約になります。

SEOとCore Web Vitals

GoogleはランキングにCore Web Vitalsを考慮しています。画像の読み込みに直接影響するLCPの改善は、検索結果での順位にプラスの影響を与える可能性があります。

Lazy loading：やってはいけないこと

Lazy loadingはすべての画像に適しているわけではありません。よくある2つのミスを避けましょう：

• ヒーロー画像やファーストビューの画像にloading="lazy"を絶対に適用しない — これらの画像は読み込み時に表示されており、表示を遅らせるとLCPとユーザー体験が低下します。
• widthとheight属性を省略しない — 寸法が定義されていないと、ブラウザは読み込み前に画像のスペースを確保できず、Cumulative Layout Shift（CLS）に悪影響を与えるレイアウトシフトが発生します。

豆知識：読み込み時に即座に表示される画像（バナー、ヒーロー画像、ロゴ）にはloading="eager"属性を使うか、属性を省略してください — それがブラウザのデフォルト動作です。

ブラウザ互換性

Lazy loadingと画像ホスティング

画像ホスティングサービスを使って画像を保存・配信する場合、即座に表示されない画像には必ずloading="lazy"属性を追加しましょう。高性能ホスティング（CDN、自動圧縮）とlazy loadingを組み合わせることで、ページの表示速度を最大化できます。

豆知識：質の高い画像ホスティングサービスは各画像に安定した直接URLを提供するため、lazy loadingの統合が簡単です。ソースURLを変更せずに<img>タグにloading="lazy"を追加するだけです。