.png?q=75&fm=webp)
「LCPの問題: 2.5秒超」の原因と改善方法を解説
ある日突然、Googleサーチコンソールから届いた「LCPの問題: 2.5秒超」の警告。
何が問題なのか分からず、不安になっていませんか?
この記事では、専門知識がなくても3分で原因を特定し、30分で改善に着手できる具体的な方法を、初心者にも分かりやすく解説します。
LCPの問題: 2.5秒超とは?
LCP(Largest Contentful Paint)の問題: 2.5秒超とは、Googleサーチコンソールで表示される警告で、ウェブページの最も大きなコンテンツ(メイン画像やテキストブロック)の表示完了に2.5秒以上かかっている状態を指します。
Googleは、ユーザー体験の指標として2.5秒以内を「良好」と評価しており、これを超えるとSEO評価が下がり、検索順位の低下やユーザーの離脱率上昇につながります。
主な原因は、重い画像ファイル、最適化されていないCSS/JavaScript、サーバー応答の遅延などです。この問題を放置すると、サイトのトラフィックやコンバージョン率に悪影響を及ぼすため、早急な改善が必要です。
そもそもLCPって?評価基準は?
LCP(Largest Contentful Paint)とは、「ページ内で最も大きなコンテンツが表示されるまでの時間」を測る指標です。
ユーザーが「ページが読み込まれた」と体感する速度を数値化したもので、Googleが重視するCore Web Vitals(コアウェブバイタル)の1つです。
つまり、ファーストビュー(最初に見える画面)で最も目立つコンテンツの表示速度がLCPです。
この数値が遅いと、ユーザーは「重いサイト」と感じ、すぐに離脱してしまいます。
参考記事:LCPとは?
LCPの評価基準
評価 | 秒数 | 判定 |
|---|---|---|
良好 | 2.5秒以内 | SEO評価◎ |
改善が必要 | 2.5〜4.0秒 | 要対策 |
不良 | 4.0秒超 | SEO悪影響 |
LCPは秒数で測定され、Googleは以下の3段階で評価します。
良好(2.5秒以内): SEO評価が高く、ユーザー体験も良好。この基準を目指しましょう。
改善が必要(2.5〜4.0秒): 対策が必要な状態。放置すると検索順位に悪影響が出始めます。
不良(4.0秒超): 深刻な問題。ユーザーの離脱率が大幅に上昇し、SEO評価も低下します。
この評価は、実際のユーザーのアクセスデータ(フィールドデータ)に基づいており、特にモバイル環境での速度が重視されます。
2.5秒はギリギリの合格ラインなので、余裕を持って2.0秒以下を目標にすることが理想的です。
LCPの対象となる要素
LCPで測定されるのは、ビューポート内(画面に最初に表示される範囲)で最も大きな要素です。
具体的には以下が対象となります。
- 画像(
<img>タグ) - 動画のサムネイル
- 背景画像(CSS)
- 大きなテキストブロック
ファーストビュー外(スクロールしないと見えない部分)の要素は測定対象外です。
そのため、メインビジュアルやヒーロー画像が最もLCPに影響します。多くの場合、サイトトップの大きな画像がLCP要素となっています。
LCPが2.5秒を超えて起きる問題
LCPが2.5秒を超えると、さまざまな問題が発生します。
SEOの順位、コンバージョン低下や離脱率の上昇など大きく影響を及ぼします。
SEO順位の低下
LCPが2.5秒を超えると、ページエクスペリエンスの評価が下がり、検索結果での表示順位が低下します。
実際のデータでは、LCP問題があるサイトは平均10〜20位のランキング下落が報告されています。
特に競合が多いキーワードでは、わずかな速度差が1ページ目と2ページ目の分かれ目になります。
さらに、Googleは「モバイルファーストインデックス」を採用しているため、モバイルでのLCP速度が特に重要です。
検索流入の減少は、サイト全体のトラフィック喪失に直結するため、早急な改善が必要です。
コンバージョン率の急降下
ページの表示速度とコンバージョン率(CVR)には強い相関関係があります。
Google の調査によると、ページ読み込み時間が1秒から3秒に増えると、直帰率が32%上昇します。
さらに、表示速度が1秒遅れるごとに、コンバージョン率は約7%低下するというデータがあります。
Amazon の事例では、わずか0.1秒の遅延で売上が1%減少すると報告されています。
特にECサイトや申込フォームでは、LCPが4秒を超えるとCVRが最大40%も悪化します。
ユーザーは「遅い=信頼できない」と判断し、購入や問い合わせを諦めてしまうのです。速度改善は、直接的な売上向上施策と言えます。
ユーザー離脱率の上昇
ページの読み込みが遅いと、ユーザーは待ちきれずにサイトを離れてしまいます。
Google の調査では、モバイルページの読み込みに3秒以上かかると、53%のユーザーが離脱することが判明しています。
さらに、5秒を超えると離脱率は90%まで跳ね上がります。
Pingdom の分析によると、ページ読み込み時間が2秒から5秒に増えると、直帰率は50%から75%へ急上昇します。
わずか3秒の違いで、訪問者の4分の1が失われる計算です。
特にモバイルユーザーは忍耐力が低く、外出先での閲覧では回線速度も不安定なため、LCP問題の影響を強く受けます。
せっかく広告費をかけて集客しても、遅いページでは入口で顧客を逃がしている状態なのです。
LCP問題を特定する方法と手順
サーチコンソールで警告を受け取った後、以下の手順で問題を特定します。
Step1:Search Consoleで問題ページを確認
まずはSearch Consoleで問題のページを確認するところから始めます。
手順は下記の通り。
- Google Search Consoleにログイン
- 左メニューから「エクスペリエンス」→「ウェブに関する主な指標」をクリック
- 「モバイル」タブを選択(モバイルが優先)
- 「改善が必要」または「不良」の項目をクリック
- 問題のあるURL一覧が表示されます
- 代表的なURL(トップページや主要ページ)をコピー
Google Search Consoleにログインし、左メニューの「エクスペリエンス」から「ウェブに関する主な指標」を開きます。
「モバイル」タブで「改善が必要」または「不良」をクリックすると、LCP問題のあるURL一覧が表示されます。
モバイルの方がアクセスも多く影響力も高いため、モバイルを先に確認しましょう。
モバイル確認後にPCも別途確認していくと良いでしょう。
ここで重要なのは、実際のユーザーデータに基づいた評価であることです。
複数ページが表示される場合は、トップページやアクセス数の多い主要ページのURLをコピーしましょう。
Step2:PageSpeed Insightsで原因分析
Step1でコピーしたURLをPageSpeed Insightsに貼り付けて「分析」をクリックします。約30秒で結果が表示されます。
- PageSpeed Insightsにアクセス
- コピーしたURLを貼り付けて「分析」をクリック
- 「モバイル」のスコアを確認
- 「Largest Contentful Paint」の秒数をチェック
- 下にスクロールして「診断」セクションを確認
- 「LCP要素」の項目で、どの画像やテキストが原因か特定
まず「モバイル」タブのスコアを確認し、「Largest Contentful Paint」の秒数をチェックしましょう。
次に下にスクロールして「診断」セクションへ進みます。
ここで最も重要なのが「LCP要素」の項目です。
実際にどの画像やテキストが表示を遅らせているか、具体的な要素が表示されます。
多くの場合、ヘッダー画像やメインビジュアルが原因です。
さらに「改善できる項目」では、「画像要素の最適化」「レンダリングを妨げるリソース」などの具体的な問題点が示されます。
この情報が次の改善作業の指針となります。
Step3: 原因を判別
PageSpeed Insightsの診断結果から、LCP問題の主な原因を3つのカテゴリーに分類します。
主に下記がよくある主な原因になります。
- 「画像要素の最適化」→ 画像が原因
- 「レンダリングを妨げるリソース」→ CSS/JavaScriptが原因
- 「サーバーの応答時間」→ サーバー/ホスティングが原因
「画像要素の最適化」「適切なサイズの画像」が表示される場合。ファイルサイズが大きい、形式が最適化されていないことが原因です。
「レンダリングを妨げるリソース」「使用していないJavaScript」が表示される場合。コードの読み込みがページ表示をブロックしています。
「サーバーの応答時間を短縮」が表示される場合。ホスティング性能やTTFB(初期応答時間)に問題があります。
ほとんどのケースで画像が原因です。
まずは画像最適化から着手すると、最も効果的に改善できます。
【画像が原因】の改善方法(最重要)
まずLCPを遅くさせる大きな要因として画像があります。
まずはここから改善を行っていきましょう。
参考記事:画像の最適化(速度改善)
画像形式の最適化
画像形式を変更するだけで、画質を落とさず30〜80%のファイルサイズ削減が可能です。
従来のJPEG/PNG形式から、次世代フォーマットのWebPに変換すると、読み込み速度が劇的に向上します。
さらに新しいAVIF形式なら、WebPよりさらに20%軽量化できます。
画像形式の比較
形式 | サイズ | 対応状況 | 推奨度 |
|---|---|---|---|
JPEG | 100% | 全ブラウザ◎ | △ 旧形式 |
PNG | 120% | 全ブラウザ◎ | △ 透過以外不向き |
WebP | 30〜50% | 95%以上◎ | 推奨 |
AVIF | 20〜40% | 90%以上◯ | 2025年注目 |
WordPressであれば、WWW Image Optimizerプラグインを導入、Shopifyの場合はAvif/WebP Image Optimizerアプリを導入しましょう。
実装コード
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明">
</picture>表示させるためのコードは上記を参考に設置してみてください。
WebP非対応ブラウザには自動でJPGが表示されます。
画像サイズの最適化
表示サイズより大きすぎる画像は、無駄なデータ通信でLCPを悪化させます。適切なサイズに調整することが重要です。
適正サイズの計算式: 表示サイズ × デバイスピクセル比(DPR)
例えば、800pxで表示する画像なら、Retina対応で1600pxが最適です。
4000pxの画像を使うのはデータの無駄遣いになります。
レスポンシブ画像を実装すれば、デバイスに応じて最適なサイズを自動配信できます。
レスポンシブ画像のソース例
<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, 800px"
src="medium.jpg" alt="説明">
PC向けは表示幅の2倍、スマホ向けは750〜1125pxで十分です。
Photoshop、Canva、オンラインリサイズツールで簡単に調整可能。適切なサイズ調整だけで、画像の読み込み時間を50〜70%削減できます。
画像圧縮の実施
画像のファイルサイズを圧縮することで、見た目の品質を保ちながら読み込み速度を大幅改善できます。
圧縮には2種類あります。ロスレス圧縮は画質劣化なしで10〜30%削減、ロッシー圧縮はわずかな劣化で50〜80%削減できます。
写真には品質70〜85%のロッシー圧縮が最適で、肉眼では劣化がほぼ分かりません。
おすすめツールは、オンラインならTinyPNGやSquoosh、WordPressならShortPixelやEWWW Image Optimizerです。
実例では、2MBの画像を200〜400KBまで削減でき、読み込み時間が80%短縮されます。
圧縮は最も簡単で効果的なLCP改善策です。
画像の遅延読み込みの実装
遅延読み込み(Lazy Loading)は、画面外の画像を後から読み込む技術で、ファーストビュー以外の画像を後から読み込ませることで表示速度が改善されます。
ただ、使い方を間違えると逆効果になります。
ポイントとしては、ファーストビュー(最初に見える範囲)の画像には適用しないことです。
LCP要素となるメイン画像に遅延読み込みを設定すると、表示が遅れてLCPが悪化します。
正しい実装
<!-- メイン画像: 優先読み込み -->
<img src="hero.jpg" fetchpriority="high" alt="メイン">
<!-- 下部画像: 遅延読み込み -->
<img src="content.jpg" loading="lazy" alt="説明">WordPress 5.5以降は標準で遅延読み込みが有効なので、LCP画像を除外する設定が必須です。
適切に実装すれば、初期読み込みが30〜50%高速化します。
参考記事:遅延読み込みとは、LCPリクエストの検出とは
CDNの活用
CDN(Content Delivery Network)は、世界中のサーバーから最も近い場所でコンテンツを配信し、画像の読み込み速度を劇的に改善します。
Cloudflareなどのサービスの導入で実装が可能です。
主要CDNサービス
Cloudflare(無料プランあり)
最も人気。無料で基本的なCDN機能が使え、設定も簡単。画像最適化機能も搭載。
下記のようなサービスもあります。
画像特化CDN
- Cloudinary - 自動最適化、形式変換
- imgix - デバイス別の最適配信
- Cloudflare Images - 高速画像配信
海外からのアクセスでは50〜70%の高速化、国内でも20〜30%の改善が期待できます。特にグローバルサイトには必須です。
参考記事:CDNとは
【CSS・JavaScript起因】の改善方法
画像を最適化してもLCPが改善しない場合、CSS・JavaScriptがページの表示をブロックしている可能性があります。
これらのファイルは、ブラウザが読み込みと実行を完了するまで、画面表示を遅らせる「レンダリングブロック」を引き起こします。
それぞれの改善方法を紹介していきます。
参考記事:レンダリングブロックとは
CSS最適化
CSSファイルは、読み込みと解析が完了するまでページ表示をブロックします。
最適化で大幅な高速化が可能です。
下記にそれぞれ最適化の方法をご紹介します。
参考記事:CSSの高速化
クリティカルCSSのインライン化
ファーストビュー(最初に見える範囲)の表示に必要なCSSだけをHTML内に直接記述し、残りは後から読み込む手法です。
これにより、初期表示を待たせずに画面を表示できます。
<style>
/* ファーストビューに必要なCSSのみ */
.hero { display: block; height: 500px; }
</style>
<link rel="preload" href="style.css" as="style"
onload="this.rel='stylesheet'">通常、外部CSSファイルの読み込み完了まで画面は真っ白ですが、クリティカルCSSをインライン化すれば即座に表示されます。
Critical CSS Generatorで自動抽出でき、WordPressならAutoptimizeプラグインで簡単に実装可能です。LCPを0.5〜1秒改善する効果があります。
未使用CSSの削除
Webページには、実際には使われていないCSSコードが大量に含まれていることがあります。これらを削除すれば、ファイルサイズを大幅に削減できます。
テーマやフレームワーク(Bootstrap等)を使うと、実際に使うのは全体の20〜40%程度。
残り60〜80%は無駄なコードです。これを削除すれば、CSSファイルサイズが30〜60%削減できます。
不要なCSSを確認するには、Chrome DevToolsの「Coverage」タブで、F12キーを押して開き、リロードすると未使用コード(赤色表示)が一目で分かります。使用率50%以下なら削減の余地が大きいです。
WordPressならAutoptimizeやAsset CleanUpプラグインで自動削除。開発者はPurgeCSSをビルドプロセスに組み込むと効率的です。
CSS の圧縮(Minify)
CSS圧縮(Minify)とは、改行・スペース・コメントを削除してファイルサイズを縮小する手法です。機能は一切変わらず、コードが1行にまとまります。
ファイルサイズが20〜40%削減され、読み込み時間が短縮されます。
WordPressユーザーには、プラグイン導入が最も簡単です。
WP Rocketなら設定画面で「CSSファイルを縮小化」にチェックを入れるだけ、Autoptimizeなら「CSSコードを最適化」を有効化するだけで完了します。
一度設定すれば、以降は自動的にすべてのCSSが圧縮されます。
手動で圧縮する場合は、CSS MinifierなどのオンラインツールにCSSコードをコピペして「Minify」をクリックし、圧縮されたコードをダウンロードして元ファイルと置き換えます。
プログラマーや開発環境がある方は、GulpやWebpackなどのビルドツールに圧縮プラグインを組み込めば、ビルド時に自動圧縮されます。
WordPress以外のサイトでもプラグイン導入が最速で、技術知識不要で即効果が出ます。
JavaScript最適化
JavaScriptは、CSSよりもさらに深刻なレンダリングブロックを引き起こします。
defer/async属性を追加するだけで劇的に改善するケースが多く、難しいコード変更は不要です。
また、第三者スクリプト(外部サービスのコード)を遅延読み込みすることで、LCPを1〜3秒改善できます。
下記で具体的な方法を紹介します。
参考記事:JavaScript最適化
defer/async属性の使い分け
JavaScriptの読み込み方法を変えるだけで、ページ表示速度が劇的に改善します。
通常の<script>タグはHTML解析をブロックしますが、defer/async属性を追加すると非同期読み込みが可能です。
読み込み方法の違い
読み込み方法 | HTML解析 | ダウンロード | 実行タイミング | 実行順序 |
|---|---|---|---|---|
通常(属性なし) | 停止 | 順番待ち | 即座に実行 | 保証 |
defer | 継続 | 並行処理 | HTML解析後 | 保証 |
async | 継続 | 並行処理 | DL完了次第 | 不定 |
使い分けの基準例のソース
<script src="analytics.js" defer></script> <!-- DOM解析後に実行 -->
<script src="ads.js" async></script> <!-- 非同期で実行 -->defer: jQueryなど他のスクリプトに依存する場合
async: Google Analytics、広告タグなど独立したスクリプト
適切に使い分ければ、初期表示を0.5〜2秒短縮できます。
フォントの最適化
カスタムフォント(Googleフォント、Adobe Fontsなど)は、読み込み完了までテキストが表示されないため、LCPを悪化させる原因になります。
FOIT(Flash of Invisible Text)はフォント読み込み完了までテキストが完全に非表示になります。
LCP要素がテキストの場合、数秒間何も表示されない致命的な状態です。
FOUT(Flash of Unstyled Text)は最初にシステムフォントで表示され、カスタムフォント読み込み後に切り替わります。
文字が「パッ」と変わるため、ユーザー体験が悪化します。
特にFOITは深刻で、日本語フォントは容量が大きい(2〜5MB)ため、モバイル回線では読み込みに3〜5秒かかることも。
その間、ページが真っ白に見えてしまいます。適切な最適化が必須です。
font-display: swap の実装
フォントのダウンロード中はシステムフォント(代替フォント)で即座に表示し、カスタムフォントの準備ができたら自動的に切り替えます。
これにより、FOITによる「真っ白な画面」を完全に防げます。
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* すぐ代替フォントで表示 */
}Googleフォントの最適化
Googleフォントを使用している場合は、URLに&display=swapを追加するだけです:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">preconnectでサーバー接続を事前確立し、display=swapでFOITを防止します。
これだけでLCPが0.5〜1秒改善します。
【サーバー・ホスティング起因】の改善方法
画像やコードを最適化しても改善しない場合、サーバーやホスティング環境に根本的な問題がある可能性があります。
PageSpeed Insightsで「サーバーの応答時間を短縮」「初期サーバー応答時間を短縮」と表示される場合、TTFB(Time To First Byte)が遅く、ブラウザがデータを受け取り始めるまでに時間がかかっています。
これはすべてのコンテンツ読み込みの起点なので、ここが遅いとLCP全体に悪影響を及ぼします。
下記の対策で改善を行っていきましょう。
高速サーバーを使用
サーバーの性能は、LCPに直接的な影響を与えます。特に月額500円以下の格安共有サーバーでは、他のユーザーとリソースを共有するため、アクセスが集中すると応答が遅延します。
格安サーバーから高速サーバーへ移行するだけで、TTFBが1.5秒→0.3秒に短縮し、LCP全体が1〜2秒改善するケースが多数報告されています。
LCP改善に最適なサーバーを選ぶには、以下の基準をチェックしましょう。
必須チェック項目
- SSD/NVMe SSD搭載
- HTTP/2・HTTP/3対応
- PHPバージョン
- LiteSpeed/Nginx採用
- 国内サーバーロケーション
- 無料SSL・自動バックアップ
これらの条件と費用が合えば専用サーバーの活用をおすすめします。
サーバー設定の最適化
サーバーを変更せずとも、設定を見直すだけでTTFBを改善できます。
特にWordPressサイトでは効果絶大です。
主要な最適化項目
- PHPバージョンを最新に更新
- データベースの最適化
- オブジェクトキャッシュの有効化
- Gzip/Brotli圧縮の有効化
テキストファイルを圧縮して転送量を削減。サーバー設定で有効化できます。
これらの設定だけで、TTFBが0.3〜0.5秒短縮可能です。
参考記事:データベースの最適化
キャッシュ戦略
キャッシュとは、一度生成したページを保存し、再利用する仕組みです。毎回サーバーで処理するより圧倒的に高速になります。
ブラウザキャッシュの対応
ブラウザキャッシュは、画像・CSS・JavaScriptなどの静的ファイルをユーザーのブラウザに保存し、再訪問時に再ダウンロードを省略する仕組みです。
初回訪問時は通常通りダウンロードしますが、2回目以降はローカルから読み込むため、読み込み時間が80〜90%短縮されます。リピーターのLCPが劇的に改善します。
.htaccess の設定コード
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
</IfModule>WordPressならWP RocketやLiteSpeed Cacheプラグインで自動設定可能。
画像は1年、CSS/JSは1ヶ月程度のキャッシュ期間が推奨されます。
サーバーサイドキャッシュ
サーバーサイドキャッシュは、動的に生成されるHTMLページを保存し、再利用する仕組みです。WordPressなどのCMSでは、毎回データベースにアクセスしてページを生成しますが、キャッシュがあれば保存済みのHTMLをそのまま返せます。
データベースへの問い合わせが不要になるため、サーバー負荷が大幅に減り、TTFBが劇的に短縮します。効果は絶大で、応答時間が1.0秒→0.2秒になるケースも。
方法としてCDNで配信するだけで超高速できます。
ワードプレスの場合は、WP Rocketなどのプラグインでの対応もできます。
HTTP/2・HTTP/3の有効化
HTTP/1.1には深刻な制限があります。
1つの接続で1ファイルずつしかダウンロードできないため、画像やCSS/JavaScriptが多いページでは順番待ちが発生し、表示が遅延します。
ブラウザは最大6接続までしか開けないため、ファイル数が増えるほど待ち時間が長くなります。
HTTP/2・HTTP/3なら無制限に並列ダウンロードでき、この問題が解消されます。
HTTP/3はさらにUDPベースで通信が安定し、モバイル環境でも高速です。
プロトコルの比較
プロトコル | 速度 | 並列処理 | 推奨度 |
|---|---|---|---|
HTTP/1.1 | 遅い | 6接続まで | 旧世代 |
HTTP/2 | 高速 | 無制限 | 標準 |
HTTP/3 | 最速 | 無制限+改善 | 最新 |
レンタルサーバーであれば、各管理画面でどの設定になっているか確認ができます。
VPSや自前サーバーの場合、SSL/TLS必須でモジュール有効化が必要です。
HTTP/2・HTTP/3はHTTPS通信でのみ動作するため、Let's Encryptで無料SSL証明書を導入しましょう。
HTTP/2化だけでLCPが20〜40%短縮する事例が多数報告されています。
Gzip/Brotli圧縮
HTML、CSS、JavaScriptなどのテキストファイルは、圧縮せずに配信すると無駄にデータ量が多くなり、LCPを悪化させます。
500KBのHTMLファイルをそのまま送信すると、モバイル回線では数秒かかります。
特にCSS/JavaScriptファイルが複数あると、合計で数MBになることも。
圧縮技術で転送量を削減しましょう。
圧縮方式の比較
圧縮方式 | 削減率 | 対応ブラウザ | 推奨度 |
|---|---|---|---|
なし | 0% | - | 非推奨 |
Gzip | 60〜70% | 99%以上 | 標準 |
Brotli | 70〜80% | 95%以上 | 最新 |
Brotli圧縮はGzipより15〜25%さらに圧縮率が高いため、2025年の推奨方式です。
有効化手順
①対応状況を確認
Chrome DevToolsのNetworkタブでContent-Encoding: gzipまたはbr(Brotli)を確認します。
②サーバー側で有効化
Apache (.htaccess):
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>Nginx:
gzip on;
gzip_types text/css application/javascript;
brotli on;
brotli_types text/css application/javascript;WPの場合は、WP Rocketプラグインで自動有効化ができます。
圧縮により転送量が70%削減され、LCPが0.5〜1秒短縮します。
「LCPの問題: 2.5秒超」 のよくある質問
Q1: LCPが2.5秒ちょうどでも改善すべきですか?
A: はい、改善を推奨します。2.5秒はギリギリの合格ラインであり、少しの変動で「改善が必要」に転落する可能性があります。
理想は2.0秒以下です。余裕を持った数値を目指すことで、サーバー負荷やネットワーク状況の変動にも対応でき、安定した評価を維持できます。
特にモバイル環境は不安定なため、余裕を持たせることが重要です。
Q2: モバイルだけLCPが悪い場合の対処法は?
A: モバイル特有の問題に焦点を当てましょう。主な原因は以下の3つです。
- 画像サイズが大きすぎる: モバイル表示なら750〜1125pxで十分。レスポンシブ画像で最適化しましょう。
- モバイル回線の速度: 遅延読み込みの除外設定を確認。ファーストビュー画像に
loading="lazy"が付いていないかチェック。 - 第三者スクリプトの影響: モバイルでは特に重い。Flying Scriptsなどで遅延読み込みを徹底してください。
PageSpeed Insightsの「モバイル」タブで具体的な改善提案を確認し、優先的に対処しましょう。
Q3: 改善したのにSearch Consoleで反映されないのはなぜ?
A: Googleのクロールとデータ収集には28日程度かかります。改善直後に結果が出なくても焦る必要はありません。
対処手順:
- PageSpeed Insightsで改善を確認(即座に反映)
- Search Consoleで「修正を検証」をクリック
- 検証プロセスが開始(数日〜数週間)
- 十分な実ユーザーデータが収集されるまで待つ
改善効果は確実に出ているので、1〜2ヶ月は経過観察しましょう。焦って何度も変更すると、かえって混乱します。
Q4: 費用をかけずに改善できますか?
A: はい、無料で大幅改善が可能です。以下の施策は費用ゼロで実施できます。
無料でできる対策
- 画像のWebP変換
- 画像圧縮(TinyPNG)
- 画像サイズの適正化
- defer/async属性の追加
- 未使用CSS/JavaScriptの削除
- ブラウザキャッシュ設定(.htaccess編集)
- WordPress無料プラグイン(EWWW、LiteSpeed Cache)
有料でさらに効果的
- 高速サーバー移行(月900円〜)
- WP Rocketプラグイン(年49ドル)
- landinghubの導入
まずは無料施策でLCPを1〜2秒改善できるケースが多いです。それでも不十分なら有料オプションを検討しましょう。
Q7: どのくらいの期間で効果が出ますか?
A: 施策実施直後から効果は出始めますが、Search Consoleでの反映には時間がかかります。
タイムライン:
- 即座(数分): PageSpeed Insightsのスコア改善
- 数日後: 実ユーザーの体感速度向上、直帰率改善
- 1〜2週間後: Google Analyticsで滞在時間・CVR改善確認
- 2〜4週間後: Search Consoleで「良好」判定(検証プロセス)
- 1〜2ヶ月後: 検索順位への影響が顕在化
重要: Googleは28日間の実ユーザーデータを収集して判定するため、Search Consoleの反映には最低1ヶ月必要です。焦らず継続的に監視しましょう。
Q8: 画像を減らさずにLCPを改善できますか?
A: はい、画像数を減らさずに改善可能です。重要なのは「数」ではなく「最適化」です。
画像を残したまま改善する方法:
- WebP形式に変換(30〜80%軽量化)
- 適切なサイズに調整(表示サイズの2倍まで)
- 圧縮率70〜85%で圧縮
- CDN経由で配信
- ファーストビュー外は遅延読み込み
これらを実施すれば、画像の見た目や数は変えずに、読み込み時間を50〜80%削減できます。デザインを犠牲にする必要はありません。
Q9: 動画を埋め込んでいるとLCPは悪化しますか?
A: 埋め込み方次第です。YouTube等の動画は適切に実装すれば影響を最小化できます。
悪化する例
<iframe>をそのまま埋め込み(重い)- 自動再生設定
- 複数動画を同時読み込み
改善方法:
- サムネイル画像+クリック後に動画読み込み(Lazy Load)
- YouTubeなら
lite-youtube-embedライブラリ使用 - ファーストビュー外に配置
Copy<!-- 軽量な埋め込み方法 -->
<lite-youtube videoid="動画ID"></lite-youtube>
WordPressならWP YouTube Lyteプラグインで自動最適化できます。これだけで動画埋め込みによる遅延を90%削減可能です。
Q10: 広告タグがLCPを悪化させている場合の対処法は?
A: 広告は収益に直結するため削除できませんが、読み込みタイミングを調整することで改善できます。
対処法
- ファーストビュー外に配置: スクロールしないと見えない位置に
- 遅延読み込み: ユーザー操作後に読み込み(Flying Scripts)
- 広告数の削減: 本当に必要な枠だけに絞る
- Lazy Load対応: Google AdSenseなら自動遅延読み込み有効化
Google AdSense設定:
- 「自動広告」→「ページ読み込み」を「遅延」に設定
注意: 広告の表示回数・収益は若干減る可能性がありますが、ユーザー体験が向上し、離脱率低下で結果的に収益増加するケースも多いです。A/Bテストで検証しましょう。
