Core Web Vitalsのスコアを改善するために、画像をどのように最適化すべきですか？
画像の圧縮、WebPやAVIFなどの次世代フォーマットの採用、Lazy loading（遅延読み込み）の実装が不可欠です。特にCLSを防ぐためにHTMLでwidthとheight属性を必ず指定し、LCP向上のためにデバイスに応じた適切なサイズを表示させることが重要です。
画像は、読み込み速度の低下やCore Web Vitals（CWV）スコア悪化の最大の要因になりやすく、特にLCP（最大視覚コンテンツの表示時間）とCLS（累積レイアウトシフト）に大きな影響を与えます。LCPを改善するには、ヒーロー画像のファイルサイズとサーバー応答時間を削減する必要があります。JPEGやPNGよりも圧縮率に優れたWebPやAVIFといった最新フォーマットを活用しましょう。また、`srcset`属性を使用して、ユーザーの画面サイズに最適な画像のみをブラウザがダウンロードするように設定します。CLSについては、画像読み込み時の「ガタつき」が主な原因です。HTMLタグに`width`と`height`を明記するか、CSSのaspect-ratioプロパティを使用することで、画像がダウンロードされる前にブラウザが必要なスペースを確保できるようにします。さらに、ファーストビュー以外の画像にはネイティブの遅延読み込み（`loading="lazy"`）を適用し、クリティカルなコンテンツの読み込みを優先させます。最後に、CDNを活用してユーザーに近い場所から画像を配信することで、遅延を最小限に抑えることができます。
ステップバイステップガイド
WebP/AVIFへの変換
従来のフォーマットから、高画質・低容量を実現する次世代フォーマットへ切り替えます。
サイズの明示的指定
予期せぬレイアウトシフトを防ぐため、すべての<img>タグにwidthとheight属性を追加します。
Srcsetの実装
レスポンシブ画像属性を使用し、デバイスの画面サイズに応じた最適な解像度の画像を提供します。
Lazy Loadingの追加
スクロールせずに見えない位置にある画像の遅延読み込みを有効にし、初期レンダリングを高速化します。
ヒーロー画像の最適化
LCP向上を狙い、ファーストビューの最大画像は遅延読み込みさせず、プリロード（Preload）を設定します。
プロのヒント
- TinyPNGやSquooshなどのツールを使い、見た目の質を落とさずに画像を圧縮しましょう。
- アクセシビリティとSEO向上のため、画像内のテキストは避け、CSSとウェブフォントを使用してください。
- ブラウザに優先順位を伝えるため、LCP対象となる画像はプリロード設定を検討してください。
- CDNがブラウザに応じて最適な画像フォーマットを自動選択するように設定されているか確認しましょう。
pSeoMaticが役立つ理由
pSeoMaticはサイトのメディアアセットを詳細に分析し、Core Web Vitalsのスコアを下げている未最適化な画像を特定します。サイズ指定が漏れている画像や、容量が大きすぎる画像を正確にピンポイントで指摘するため、LCPとCLSを効率的に改善し、検索順位とユーザーエンゲージメントの向上を支援します。
pSeoMaticを無料で試す関連する質問
Lazy loadingはSEOに悪影響を与えますか？
いいえ、ブラウザのネイティブ機能やSEOに配慮したJSライブラリを使用して正しく実装されていれば、悪影響はありません。
ウェブ画像に最適なフォーマットは何ですか？
現時点ではAVIFが最も圧縮率が高く、次いでWebPが推奨されます。
画像による「レイアウトシフト」とは何ですか？
画像サイズが指定されていない場合、画像が読み込まれた瞬間に周囲のコンテンツが押し下げられ、表示が崩れる現象のことです。
関連ガイド
これを実行に移す準備はできましたか？
pSeoMaticは、データからSEOに最適化された数千のページを生成します。