パフォーマンスバジェットのための遅延読み込み戦略
遅延読み込みを使用してパフォーマンスバジェット内に収める。初期読み込みバジェット vs 合計ページバジェットを定義し、Intersection Observerパターンを実装し、遅延リソース読み込みのCore Web Vitalsへの影響を追跡。
Advanced
詳細な説明
遅延読み込みとパフォーマンスバジェット
遅延読み込みは、コンテンツリッチなページでパフォーマンスバジェットを満たすための主要なテクニックです。
二層バジェットアプローチ
| 層 | 含むもの | バジェット |
|---|---|---|
| 初期読み込み | ファーストビューコンテンツのみ | 300 KB |
| 合計ページ | スクロール後のすべてのリソース | 1200 KB |
遅延読み込みすべきもの
| リソースタイプ | 遅延読み込み？ | テクニック |
|---|---|---|
| ファーストビュー以下の画像 | はい | loading="lazy" |
| 動画埋め込み | はい | ファサードパターン |
| コメントセクション | はい | Intersection Observer |
| ソーシャルウィジェット | はい | インタラクション時に読み込み |
| チャットウィジェット | はい | 5秒後またはクリック時に読み込み |
遅延読み込みすべきでないもの
| リソースタイプ | 理由 |
|---|---|
| LCP画像 | 最も重要なメトリクスを遅延させる |
| クリティカルCSS | 初回レンダリングをブロック |
| ナビゲーションJS | ユーザーはナビゲートする必要がある |
| コアフォント | FOUT/レイアウトシフトを引き起こす |
ユースケース
遅延読み込みバジェットは、そうでなければパフォーマンスバジェットを大幅に超えるコンテンツリッチなページに重要です。20画像、ビデオ、ユーザーレビュー、レコメンデーションを含む商品ページは合計5 MBになるかもしれませんが、戦略的な遅延読み込みにより、ユーザーがスクロールするにつれてフル体験を提供しながら初期読み込みを400 KB以下に保てます。