ECサイトのLCP改善は“商品画像の最適化”から始まる

ECサイトのLCP（Largest Contentful Paint）は、多くの場合 商品画像 が対象となります。とくにファーストビューに大きく配置される商品写真やバナーが、LCPの測定対象として扱われるケースが大半です。つまり「ユーザーが最初に目にする“顔”の要素」が、Webサイトの速度評価を大きく左右しているのです。

なぜ商品画像がLCPのボトルネックになるのか

ECサイトのトップページや商品一覧ページでは、複数の高解像度画像が同時に読み込まれます。
ここで発生しがちな課題は以下のとおりです：

• 高解像度JPEGをそのまま使用 → 軽量化されておらず読み込みが遅い
• imgタグにサイズ指定なし → レンダリング前にレイアウトシフトが起きる
• 遅延読み込みの対象外 → ファーストビューに入らない画像も先に読み込み
• ファーストビューにも遅延読み込み → 逆に悪影響を及ぼす

結果として、ユーザーの目に見えるまでの時間が長くなり、LCPスコアが悪化してしまいます。

実際の改善アプローチ

• WebP/AVIFへの変換
  商品画像を次世代フォーマットに変換することで、JPEGの半分以下のサイズに抑えられる場合があります。
• サイズ指定の徹底
  を明記し、ブラウザが描画領域を事前に確保できるようにします。
• 適切な遅延読み込みの設定
  ファーストビュー以外の画像は loading=”lazy” を設定。ただし、LCP対象画像は遅延せず即座に読み込むことが重要です。
• CDNキャッシュの活用
  商品画像をCDNに置き、地理的に近いサーバーから配信することで、表示速度を均一化します。

ケーススタディ：商品一覧ページ

とあるECサイトでは、商品一覧ページに 一括カートイン機能 を実装していました。Ajaxによるカート連携は高速でしたが、画像最適化が不十分でLCPが遅延。改善策として以下を実施しました：

• 商品画像をWebPに変換
• 各画像に明示的なサイズを付与
• LCP対象となる1枚目の商品画像は priority を設定

その結果、LCPが 4.8秒 → 1.1秒 に短縮。Core Web Vitalsの合格率も大きく改善しました。

ECサイト運営者が次に取るべきアクション

LCP改善は複雑なJavaScriptの見直しから入る必要はありません。まずは 「ユーザーが最初に目にする商品画像を最適化する」 ことが出発点です。ECサイトにおける第一印象は売上にも直結するため、LCP対策は「速度改善＝ユーザー体験改善」として取り組む価値があります。