短.be遅延読み込み (Lazy Loading) とは、Web ページのリソース (画像、動画、iframe など) を、ユーザーの画面に表示される直前まで読み込みを遅延させる最適化技術です。ページの初期読み込み時に必要なリソースだけを取得し、スクロールに応じて残りを順次読み込むことで、初期表示速度を大幅に改善します。
HTML の img 要素に loading="lazy" 属性を追加するだけで、ブラウザネイティブの遅延読み込みが有効になります。Chrome、Firefox、Safari、Edge の主要ブラウザーすべてがこの属性をサポートしています。JavaScript ライブラリを使わずに実装できるため、導入コストは極めて低いです。
遅延読み込みが Core Web Vitals に与える影響は大きいです。特に LCP (Largest Contentful Paint) の改善に直結します。ページ内に 50 枚の画像がある場合、遅延読み込みなしではすべての画像を同時にダウンロードしようとしますが、遅延読み込みを使えば画面に見えている数枚だけを先に読み込みます。その結果、初期表示時に転送するデータ量が減り、表示速度が大幅に向上します。
短縮 URL のリダイレクト先ページで遅延読み込みを実装することは、ユーザー体験の向上に直結します。キャンペーンリンクをクリックしたユーザーは即座にコンテンツを見たいと期待しているため、初期表示が遅いと離脱率が上がります。Google の調査によると、ページの読み込み時間が 1 秒から 3 秒に増えると、直帰率は 32% 増加します。
遅延読み込みの注意点として、ファーストビュー (スクロールせずに見える範囲) の画像には loading="lazy" を設定しないことが重要です。ファーストビューの画像を遅延読み込みにすると、LCP が悪化する逆効果になります。