用語解説
遅延読み込みとは、ページ表示時に全リソースを一括読み込みせず、ユーザーがスクロールして対象要素がビューポートに近づいたタイミングで画像・動画などを読み込む技術です。
HTML標準のloading="lazy"属性で手軽に実装でき、初期ページ読み込みの軽量化と帯域節約に効果があります。
どんな場面で活用するか
- 画像が多いページの初期読み込みを高速化したい
- ページ下部の動画埋め込みを遅延させてLCPを改善したい
- スクロールしないユーザーへの不要なデータ転送を削減したい
よくある誤解
「ファーストビューの画像にもlazy loadingを適用すべき」は誤りです。LCP対象となるヒーロー画像にlazy loadingを設定するとスコアが悪化するため、スクロール不要な領域の画像には適用しないようにします。
判断のヒント
施策ポイントWordPress 5.5以降はデフォルトでloading="lazy"が付与されます。ヒーロー画像は明示的にloading="eager"を指定してLCPへの悪影響を防ぎましょう。
