LCP改善に効く画像最適化の実践ガイド｜Core Web Vitals対策

LCPが遅い原因の大半は「画像」にある

Google の Core Web Vitals（コアウェブバイタル）の中で、最も改善効果が実感しやすい指標が LCP（Largest Contentful Paint） です。LCP はページ内で最も大きな可視コンテンツが表示されるまでの時間を計測し、2.5秒以内が「良好」とされています。

PageSpeed Insights や Google Search Console でスコアを確認したことがある人なら、「LCP の改善が必要です」という警告を見た経験があるはずです。その警告の原因を分解すると、多くのケースで ヒーロー画像やバナー画像のファイルサイズが大きすぎること が根本にあります。

Web.dev の LCP ドキュメント によれば、LCP 要素の約70%は <img> タグまたは CSS 背景画像です。つまり、画像を適切に最適化するだけで LCP スコアが劇的に改善するケースは珍しくありません。

画像最適化で押さえるべき3つのポイント

1. ファイルサイズの圧縮

JPEG や PNG をそのままアップロードすると、カメラや Photoshop が出力した「生データ」がそのままユーザーのブラウザに届きます。スマートフォンで撮影した写真は 3〜6 MB になることも珍しくなく、これが LCP を直撃します。

品質を大きく落とさずファイルサイズを削減するには、可逆・非可逆圧縮の組み合わせが有効です。JPEG は品質 75〜85 程度、PNG はメタデータを除去するだけでも大幅に軽量化できます。

2. 次世代フォーマットへの変換

WebP は JPEG と比較して平均 25〜35% 小さいファイルサイズを実現しつつ、視覚品質はほぼ同等です。MDN Web Docs の WebP ガイド にも記載されているとおり、現代のブラウザは Safari を含めてほぼすべて WebP に対応しています。

AVIF はさらに圧縮率が高いものの、エンコードに時間がかかるため、まず WebP への移行を優先するのが現実的な順序です。

3. 表示サイズに合った解像度

4000×3000px の画像を CSS で 800px 幅に縮めて表示しているケースは非常に多く見られます。ブラウザがダウンロードするのはあくまで元ファイルなので、表示サイズに合わせてリサイズしてからアップロードすることが重要です。

<img> の srcset 属性を使えば、デバイスの画面解像度に応じて異なるサイズの画像を配信できます。ただし、その前提として「適切なサイズの画像ファイルが存在すること」が必要です。

実際の改善手順：画像最適化のワークフロー

以下のフローで進めると、作業漏れが少なく効率的です。

Step 1 — 現状把握 PageSpeed Insights（https://pagespeed.web.dev/）で対象ページを計測し、「LCP 要素」として指摘されている画像を特定します。「適切なサイズの画像」「次世代フォーマットでの画像の配信」などの提案が出ていれば、画像最適化が有効です。

Step 2 — ファイルを圧縮・変換 特定した画像ファイルをダウンロードし、圧縮ツールで処理します。このとき気になるのが プライバシーの問題です。業務で扱う画像（商品写真・社内資料のスクリーンショットなど）をクラウド型のツールにアップロードすると、ファイルがサーバーに送信・保存されるリスクがあります。

ブラウザ内だけで処理が完結する 画像圧縮ツール を使えば、ファイルはネットワークに出ないため、機密性の高い画像でも安心して圧縮できます。JPEG・PNG・WebP などの形式に対応しており、圧縮後のプレビューで品質を確認してからダウンロードできます。

Step 3 — サイズと形式を確認 圧縮後のファイルが表示幅に対して適切な解像度かどうか確認します。PC で最大 1200px 幅で表示するなら、画像も 1200px 以上ある必要はありません。

Step 4 — アップロードと再計測 最適化済みのファイルを CMS や FTP でアップロードし、再度 PageSpeed Insights で計測します。LCP の数値が改善しているかを必ず確認してください。

よくある落とし穴と注意点

圧縮しすぎによる品質劣化

JPEG の品質を 30 以下まで下げると、ブロックノイズが目立ち始めます。EC サイトの商品画像など、ディテールが重要なケースでは品質 75〜85 が現実的な下限です。圧縮ツールでプレビューを確認しながら調整する習慣をつけてください。

WordPress の自動リサイズ機能との関係

WordPress はアップロード時に自動でサムネイルを生成しますが、元画像のファイルサイズは変わりません。プラグイン（Smush・EWWW Image Optimizer など）を使うか、アップロード前に手動で圧縮しておくかのどちらかが必要です。

loading="lazy" の誤用

LCP 要素となるファビコン画像やヒーロー画像に loading="lazy" を付けると、逆にLCPが悪化します。loading="lazy" はスクロールしないと見えない画像（フォールド以下）にのみ適用してください。

フォーマット変換だけでは不十分

WebP に変換しても元が 5 MB の画像なら依然として重いままです。フォーマット変換と圧縮は必ずセットで実施することが原則です。

まとめ

LCP を改善する最短経路の一つは、画像の圧縮と適切なフォーマット選択です。手順を整理するとシンプルで、計測 → 圧縮・変換 → 差し替え → 再計測のサイクルを回すだけです。

ツール選びでは、業務上の機密保持が気になる場面も多いはずです。サーバーにファイルを送らない 画像圧縮ツール のようなブラウザ完結型のアプローチは、そうした場面での選択肢になります。

画像以外の要因（フォントの遅延・レンダーブロッキングなど）も LCP に影響するため、画像最適化で改善が一段落したら、次のステップとして JavaScript や CSS の最適化にも着手することを推奨します。