使い方例
ポートフォリオページの画像にlazy loadingを適用し、LCPが1.2秒改善した。
Lazy Loading
定義
Lazy Loadingは、ユーザーが実際に必要とするまでリソースの読み込みを延期する最適化技法です。画像、iframe、動画などに適用されます。
使い方例
- HTMLの
loading="lazy"属性をimgタグに追加 - Intersection Observer APIでJavaScript実装
- Above the Foldの画像には適用しない（LCP悪化を防ぐ）
- 背景画像にも遅延読み込みを適用
FAQ
よくある質問
- Lazy Loadingとは何ですか？
- 画面に表示される直前まで画像やコンテンツの読み込みを遅延させる手法です。初期表示速度の改善に効果があります。
- Lazy LoadingのSEO効果は？
- ページの読み込み速度が改善されるため、Core Web Vitalsスコアが向上し、間接的にSEO評価が上がります。ただし重要な画像に適用すると逆効果です。