メインビジュアル1枚を最適化したらLCPが9秒→2.9秒になった話

2026年3月6日

WordPressサイトのLCPをメインビジュアル最適化で改善した結果を示すまめすけ

まめすけ

LCPが遅い…でも何を改善すればいいの？

LCP（Largest Contentful Paint）はPageSpeed Insightsの中でも特にスコアへの影響が大きい指標です。そしてLCPの原因の多くは「画像」です。

このブログ「ウェブlog」では、トップページのメインビジュアル画像を最適化しただけでLCPが9.2秒→2.9秒、スコアが11点改善されました。

この記事では「LCPとは何か」の基礎から、無料ツールSquooshを使った画像最適化の手順、WordPressプラグインConvertor for Mediaとの使い分け（Squoosh・Converter for Media 使い方付き）までをわかりやすく解説します。

まず結果から

指標	最適化前	最適化後	変化
総合スコア（モバイル）	83点	94点	+11点
LCP	4.5秒	2.9秒	-1.6秒
FCP	1.1秒	1.1秒	変化なし
Speed Index	3.3秒	3.1秒	微改善

この計測はOMGF導入後の状態をベースにしています。画像最適化単体での効果です。

LCPとは何か

LCP（Largest Contentful Paint）は、ページの中で最も大きい要素が画面に表示されるまでの時間を計測した指標です。

LCPの評価基準	判定
2.5秒以下	良好
2.5秒〜4.0秒	改善が必要
4.0秒以上	Poor（遅い）

ほとんどのWordPressサイトでは、LCPの対象になる要素はトップページの「メインビジュアル（ヒーロー画像）」です。つまりメインビジュアルが重いと、それだけでLCPが悪化します。

LCPが遅い主な原因

画像ファイルサイズが大きすぎる
画像の形式がJPEG・PNGのままでWebP化されていない
画像の解像度が表示サイズに対して大きすぎる
サーバーのレスポンスが遅い
レンダリングをブロックするリソースがある

今回のケースでは「ファイルサイズが1MB・解像度が2000px」という画像を使っていたことが主な原因でした。

最適化前のメインビジュアル画像の状態

項目	最適化前	目標
ファイルサイズ	約1MB	200KB以下
解像度（横幅）	2000px	1200px程度
ファイル形式	JPEG	WebP

モバイル表示では2000pxもの横幅は必要ありません。また1MBという重さはモバイル回線では読み込みに数秒かかります。これがLCP9秒超えの主因でした。

Squooshで画像を最適化する手順

Squooshはブラウザ上で動作する無料の画像最適化ツールです。インストール不要でその場で画像を圧縮・変換できます。

URL：https://squoosh.app

STEP

Squooshにアクセス

ブラウザでhttps://squoosh.app を開き、最適化したい画像をドラッグ＆ドロップするだけで読み込めます。

STEP

出力形式をWebPに変更

画面右側の「Compress」セクションで出力形式を選択できます。

「MozJPEG」と書かれているドロップダウンをクリック
「WebP」を選択

STEP

画像サイズを縮小

画面右側の「Resize」をクリックして展開します。

「Width」に 1200 と入力（縦横比は自動で維持されます）
「Apply」をクリック

STEP

品質を調整

WebPの品質（Quality）はデフォルトで75程度が設定されています。画面左が元の画像、右が変換後のプレビューです。見た目を確認しながら品質を調整してください。

ブログのメインビジュアルなら75〜85程度がおすすめ
左右を見比べて大きな差がなければOK

STEP

ダウンロード

画面右下の「↓」ボタンをクリックしてダウンロードします。ファイルサイズが大幅に減っていることを確認してください。

画像は200KB以下を目標にしましょう。1MBの画像でも適切に設定すれば100〜150KB程度まで圧縮できます。

最適化した画像をWordPressに適用する

メインビジュアルの差し替え手順（SWELL の場合）

STEP

外観 → カスタマイズ → トップページ → メインビジュアル

STEP

既存の画像を削除して最適化済みのWebP画像をアップロード

STEP

保存 → キャッシュクリア → PageSpeed Insightsで再計測

テーマによってメインビジュアルの設定場所は異なります。お使いのテーマの設定画面をご確認ください。

Converter for Mediaとの使い分け

WordPressには「Converter for Media」のような画像自動変換プラグインがあります。Squooshとどう使い分ければいいのでしょうか。

	Squoosh	Converter for Media
用途	個別の画像を手動で最適化	アップロード時に自動変換
リサイズ	できる	Pro版のみ
形式変換	WebP・AVIF等	WebP（無料版）
手間	1枚ずつ手動	自動（ほぼ不要）
おすすめ場面	メインビジュアルなど重要な1枚	記事内の画像を一括管理

おすすめの使い方

メインビジュアルなど特に重要な画像 → Squooshで手動最適化（サイズ・品質を細かく調整）
記事内の画像 → Converter for Mediaで自動変換（手間ゼロ）
過去にアップロードした画像 → Converter for Mediaの一括最適化機能を使う

まとめ

LCPが遅い原因の多くはメインビジュアル画像の重さです。今回の検証では1MBのJPEG画像をWebPに最適化するだけでLCPが9.2秒→2.9秒、スコアが11点改善されました。

やること	ツール	難易度	効果
メインビジュアルをWebP・適切サイズに最適化	Squoosh（無料）	低	大
記事画像を自動WebP変換	Converter for Media	低	中
過去の画像を一括最適化	Converter for Media	低	中