遅延読み込みを使うと、ウェブページ上の画像をモバイル表示向けに最適化できます。遅いネットワークや処理能力の低い端末など、モバイル表示でよくある課題への対策になります。
遅延読み込みには、主に 2 つの利点があります。
- ページ読み込みが速くなる — ページを開いたときに一度に読み込むのではなく、ユーザーがスクロールしたタイミングで画像を読み込みます。
- 画像配信のコストが下がる — Cloudflare Images を使う場合、ユーザーが実際に見た画像の読み込み分だけ課金されます。遅延読み込みでは、ビューに入っていない画像は課金対象の Images リクエストに数えられません。
遅延読み込みは、Chrome、Safari、Firefox、Opera、Edge を含む主要なブラウザーでネイティブに対応しています。
loading 属性を変更しないと、ほとんどのブラウザーはページ上のすべての画像を取得し、デフォルトではビューポートに近い画像を優先します。loading 属性を変更すると、この動作を上書きできます。
<img> タグの loading 属性には、lazy と eager の 2 つがあります。
ほとんどの画像には遅延読み込みを推奨します。遅延読み込みでは、画像などのリソースはビューポートから一定の距離に達するまで読み込みを延期します。しきい値に達しない画像は読み込まれません。
<img> タグの loading 属性を "lazy" に変更する例です。
<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />ビューポート内にある画像には、遅延読み込みではなく先行読み込みを推奨します。先行読み込みは、ページ上の位置に関係なく、最初のページ読み込み時にアセットを読み込みます。
<img> タグの loading 属性を "eager" に変更する例です。
<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />