Core Web Vitalsのための画像最適化

# 画像の最適化がCore Web Vitalsに与える影響 GoogleのCore Web Vitalsは、検索ランキングに直接影響する3つの指標です。そして画像？それらは3つすべてに影響します。 ## LCP（Largest Contentful Paint） **目標: < 2.5秒** ヒーロー画像は通常、LCP要素です。最適化するには: 1. **LCP画像をプリロード**: `` 2. **WebPを使用** — 30%小さく = 30%高速読み込み 3. **レスポンシブ画像** — 2000pxの画像をモバイルに提供しない 4. **優先度ヒント** — ヒーロー画像に `fetchpriority="high"` ## INP（Interaction to Next Paint） **目標: < 200ミリ秒** メインスレッドでの重い画像処理がインタラクションをブロックします: 1. **折り返し線以下の画像を遅延読み込み** 2. **非同期デコード** — `decoding="async"` 3. **ブラウザツールを使用** — 処理はWeb Workersを介してメインスレッド外で行われます ## CLS（Cumulative Layout Shift） **目標: < 0.1** サイズのない画像がレイアウトシフトを引き起こします: 1. **常に幅/高さを指定** — HTMLまたはCSSで 2. **アスペクト比ボックスを使用** — 画像読み込み前にスペースを確保 3. **コンテンツ注入を避ける** — 既存コンテンツの上に画像を読み込まない ## 実世界での影響 最適化前: - LCP: 4.2秒 ❌ - CLS: 0.25 ❌ - INP: 380ミリ秒 ❌ 画像最適化後: - LCP: 1.8秒 ✅ - CLS: 0.02 ✅ - INP: 120ミリ秒 ✅ ## AmberPicの利点 当社のツールは以下を支援します: - アップロード前の画像圧縮（より小さなLCP） - 最新フォーマットへの変換（より高速なデコード） - レスポンシブブレークポイントの一括リサイズ（適切なサイズ） --- *画像がCDNに到達する前に最適化 — [AmberPicを試す](/ja/compress/)。*