1) Core Web Vitalsとは
LCP：最大コンテンツフルペイント（読み込み）。CLS：累積レイアウトシフト（視覚的安定性）。INP：次の描画までのインタラクション（応答性）。
2) LCPの改善
- LCP画像を最適化：WebP/AVIF、適切なサイズ、圧縮。
- プリロード：<link rel="preload" as="image">。
- CDN：エッジサーバーから提供し、レイテンシを削減。
- 遅延読み込みなし：LCP画像にはloading="lazy"を使用しないでください。
3) CLSの削減
- 寸法の指定：すべての画像にwidthとheightを設定。
- アスペクト比：CSSでaspect-ratioを使用してスペースを予約。
- フォントの読み込み：font-display: swapでテキストシフトを回避。
4) INPの最適化
画像の読み込みは直接影響しませんが、重い画像はメインスレッドをブロックする可能性があります。遅延読み込みと効率的なデコードを使用します。
5) レスポンシブ画像
srcsetとsizesで適切なサイズを提供し、不要なバイトを回避します。
6) 遅延読み込み
ビューポート外の画像にloading="lazy"を使用しますが、最初のビューポート内の画像には使用しないでください。
7) 測定とモニタリング
Lighthouse、PageSpeed Insights、Real User Monitoring（RUM）を使用して追跡し、反復改善します。