LCP改善のやり方｜遅い原因の特定と直す優先順位を手順で解説
この記事の要点
- LCP改善はまず「一番大きい要素」を特定してから手を打つ
- 効果が大きい順は画像最適化、サーバー応答、CSS/JSの3つ
- ファーストビューの画像を遅延読み込みするのが最大の失敗
ページの表示が遅くて、Googleの「PageSpeed Insights」で赤い数字が出てしまう。何から直せばいいのか分からない。そんなお悩みで検索された方に向けて、この記事ではLCP（Largest Contentful Paint）を改善する具体的な設定手順を、非エンジニアの方にも分かる言葉でお伝えします。
結論から言うと、LCP改善は「やみくもに全部速くする」のではなく、直すべき場所を1つに絞ることから始まります。順番に進めれば、専門知識がなくても改善の道筋が見えてきます。
Contents / 目次
結論。LCP改善は「一番大きい要素を1つ直す」から始める
LCP改善で最初にやるべきことは、ページの中で「一番大きく表示されている要素（LCP要素）」を特定することです。ここを外すと、いくら他を頑張っても数字は動きません。
LCPとは、かんたんに言うと「そのページで一番大きなコンテンツが表示されるまでの時間」のことです。多くの場合、ページ上部に置いた大きな画像（ヒーロー画像）や、見出しの大きなテキストブロックがこれにあたります。ユーザーが「あ、ページが出てきた」と感じる瞬間を数値にしたもの、とイメージしてください。
LCPは、Googleが提唱する「コアウェブバイタル」と呼ばれる、ユーザー体験を測る指標群の1つです。GoogleのLCP（Largest Contentful Paint）の解説（web.dev）で示されている基準は次のとおりです。
| LCPの数値 | Googleの評価 | 対応の必要性 |
|---|---|---|
| 2.5秒以下 | 良好（Good） | 維持できればOK |
| 2.5秒〜4.0秒 | 要改善 | 優先的に手を打つ |
| 4.0秒超 | 不十分（Poor） | 早急に改善が必要 |
この数値は、実際にサイトを訪れたユーザーの体験データ（フィールドデータ）をもとに判定されます。GoogleのPageSpeed Insights について（Google公式ドキュメント）でも、ラボデータ（測定環境で計測した値）と実際のユーザー体験データの両方を確認できると説明されています。
ポイント。改善のスタート地点は「速度を上げる」ではなく「LCP要素を1つ特定する」こと。犯人を突き止めてから、その要素だけに手を集中させます。
やるべきことの全体像は、次の3つに集約されます。効果が大きい順に並べています。
- 画像・メディアの最適化：LCP要素が画像なら、ここが最も効きます。フォーマット変換とサイズ圧縮、そして優先読み込みの指定です。
- サーバー応答時間の短縮：そもそもサーバーの返事が遅いと、何をしても速くなりません。キャッシュとCDNが中心です。
- 表示をじゃまするCSS・JavaScriptの整理：読み込みをブロックしているコードを、後回しにしたり削ったりします。
大事なのは、この3つを上から順に見ていくことです。特にLCP要素が画像のケースは非常に多いので、まずは画像から着手すると成果が出やすくなります。
LCPを改善する具体的な設定手順
ここからは、実際に手を動かせる手順を順番に説明します。ステップ1で犯人を特定し、ステップ2以降で直していく流れです。コピーして使えるコードも載せますので、自社サイトに合わせて調整してください。
ステップ1。LCP要素を特定する
最初にやるのは、ページの中でどの要素がLCPになっているかの確認です。ここが分からないまま直しても、的外れになります。
確認には、Googleの「PageSpeed Insights」を使うのが手軽です。調べたいページのURLを入力して分析すると、診断結果の中に「Largest Contentful Paint 要素」という項目が出てきます。より詳しく見たい場合は、Chromeに標準で入っている「デベロッパーツール（DevTools）」のPerformanceパネルでも確認できます。
ツールの画面の名称やボタンの位置は更新で変わることがあるため、最新の操作方法は各ツールの公式ヘルプで確認してください。まずは「LCP要素は画像なのか、テキストなのか」だけでも把握できれば十分です。
スマホとパソコンでLCP要素が違うことがよくあります。スマホで見るユーザーが多いため、必ずモバイル側の数値も確認してください。パソコンだけ速くて満足してしまうのは、ありがちな落とし穴です。
ステップ2。LCP画像を軽くする（フォーマット変換と圧縮）
LCP要素が画像だった場合、まずやるべきは画像のファイルサイズを小さくすることです。ここだけで数値が大きく動くケースは珍しくありません。
やることは2つです。
- 新しい形式に変換する：画像の形式を「WebP」や「AVIF」といった新しい形式に変換します。これらは、見た目の画質をほぼ落とさずにファイルサイズを大きく減らせる形式で、JPEGやPNGのままより軽くなります。
- 縮小してから圧縮する：画像を実際に表示されるサイズまで縮小してから、品質75〜80%くらいで圧縮します。この範囲なら、人の目にはほとんど劣化が分かりません。
画像の変換や圧縮には、「Squoosh」や「TinyPNG」といった無料のオンラインツールが使えます。WordPressの場合は、画像の圧縮やWebP変換を自動化できる画像最適化系のプラグインを使う方法もあります（対応する形式や設定内容はプラグインやバージョンで変わるため、各プラグインの公式情報で確認してください）。
スマホとパソコンで最適な画像サイズは違うので、`srcset`という仕組みで端末に合ったサイズを出し分けると、さらに効きます。HTMLで書くとこうなります。
<!-- LCP画像を端末サイズごとに出し分ける例 -->
<!-- 前提。同じ画像を幅600px/1200px/1800pxの3サイズ用意しておく -->
<img
src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-1800.webp 1800w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1200" height="675"
alt="［画像の内容を説明するテキストに変更］">ここで`width`と`height`を必ず指定しておくのがコツです。サイズを書いておくと、画像が読み込まれる前にブラウザが表示スペースを確保できるため、レイアウトのガタつき（別の指標であるCLSの悪化）も防げます。
ステップ3。LCP画像を「優先的に」読み込ませる
画像を軽くしたら、次はブラウザに「この画像を最優先で読み込んで」と伝えます。指示しないと、ブラウザは他のファイルと同じ扱いで後回しにすることがあるからです。
方法は2つあり、両方セットで使うのが効果的です。
- タグに優先指定を付ける：LCP画像のタグに`fetchpriority=”high”`を付けます。
- プリロードで早めに知らせる：ページの`<head>`内で`preload`（プリロード）を指定して、ブラウザに早い段階で画像の存在を教えます。
<!-- head内に書く。LCP画像を早期に発見させる -->
<link rel="preload" as="image" href="hero-1200.webp" fetchpriority="high">
<!-- LCP画像そのものにも優先指定を付ける -->
<img src="hero-1200.webp" fetchpriority="high" width="1200" height="675" alt="［説明を変更］">プリロードは「本当にLCPになっている1枚だけ」に絞ってください。あれもこれもとプリロードを増やすと、逆にどれも遅くなり、かえって表示が重くなります。効かせどころは1点集中です。
ステップ4。ファーストビューの画像から遅延読み込みを外す
LCP画像には、遅延読み込み（`loading=”lazy”`）を絶対に付けないでください。これは最も多い失敗であり、付いていると表示が確実に遅くなります。
遅延読み込みとは、画面に表示される直前まで画像の読み込みを待つ仕組みです。ページ下部の画像には有効ですが、最初に見えるファーストビューの画像に使うと、「一番見せたい画像を、わざわざ遅らせて出す」ことになってしまいます。
WordPressでは、テーマやプラグインの設定によって、画像に遅延読み込みが自動で付くことがあります。もしLCP要素がファーストビューの画像であり、かつ遅延読み込みが適用されている場合は、この自動付与を外す設定が必要です。
対処は次の順で確認してください。
- お使いの高速化プラグインに、特定の画像を遅延読み込みの対象から除外する設定があるか確認する。
- その設定がなければ、テーマ側で該当画像から`loading=”lazy”`を外す。
ステップ5。サーバーの応答時間を短くする
画像を直しても遅い場合、サーバーの返事そのものが遅い可能性があります。ここは土台なので、遅いままだと上の対策も効きにくくなります。
優先度の高い順に、次の3つを検討します。
- キャッシュを効かせる：一度作ったページを保存しておき、次のアクセスで作り直さずに返す仕組みです。WordPressなら高速化プラグイン、サーバーによっては管理画面から設定できます。
- CDNを使う：CDNとは、世界中に置いたサーバーから、ユーザーに一番近い場所でファイルを配る仕組みです。距離が縮まる分、届くのが速くなります。CloudflareなどのサービスやレンタルサーバーのCDN機能で導入できます。
- 圧縮を有効にする：HTMLやCSSなどの文字データを「Gzip」や「Brotli」という方式で圧縮して転送量を減らします。サーバー側の設定で有効にできることが多いです。
サーバーのプランが古い・非力なままだと、根本的に応答が遅いこともあります。安価な共用プランで限界を感じたら、上位プランや高速なサーバーへの見直しも選択肢になります。
ステップ6。表示をじゃまするCSS・JavaScriptを整理する
最後に、ページの表示をブロックしているCSSやJavaScriptを後回しにします。これらが先に全部読み込まれると、その間コンテンツが表示されず、LCPが遅れます。
ポイントは、すぐに必要ないJavaScriptに`defer`（遅延）を付けて、表示の後に読み込ませることです。また、ファーストビューの表示に不要なCSSは、後から読み込むようにします。
<!-- すぐ必要ないJSは defer を付けて表示を止めない -->
<script src="app.js" defer></script>Webフォントを使っている場合は、フォントのCSSに`font-display: swap`を指定しておきます。こうすると、Webフォントの読み込みを待たずに、まず標準フォントで文字を表示できます。文字が出るまで真っ白、という状態を避けられます。
/* Webフォント読み込み中も、まず標準フォントで文字を出す */
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
font-display: swap;
}広告、チャットウィジェット、アクセス解析などの外部（サードパーティ）スクリプトも表示を遅らせる原因になります。ファーストビューに不要なものは、読み込みを後ろにずらすと効果的です。CSSやJavaScriptの調整は影響範囲が広いので、変更前にバックアップを取り、1つ直すごとに表示を確認しながら進めてください。
なお、内部対策の全体像を整理したい方はSEO内部対策で成果が変わる？初心者も使えるチェックリストもあわせてご覧ください。
LCPを改善するとどうなるか。期待できる変化
LCPを2.5秒未満まで改善すると、コアウェブバイタルの評価は「良好」の目安に入ります。これは順位を直接押し上げるものではありませんが、表示が速くなるぶんユーザーは待たされずに済み、途中で離脱してしまう人を減らしやすくなります。
表示が速くなると、ユーザーが待たされずに済むため、途中で離脱してしまう人を減らしやすくなります。どの程度改善するかは業種やサイトの内容によって大きく変わりますが、遅いことが機会損失につながるのは間違いありません。
成果を出しているサイトに共通するのは、次の3点です。
- 実ユーザーの数値を見ている：測定環境の数字だけでなく、Search Consoleなどで実際の訪問者の体験データを継続的に確認している。
- モバイルを優先している：スマホでの表示速度を基準に改善している。
- 一点集中している：全部を同時に直そうとせず、LCP要素という「一番効く場所」から順に手を入れている。
改善後は、Google Search Consoleの「ウェブに関する主な指標」レポートで、サイト全体の状態を中長期でモニタリングするのがおすすめです。個別ページはPageSpeed Insights、サイト全体はSearch Console、と使い分けると全体像がつかめます。
よくある失敗と回避法
LCP改善は、正しい手順を踏まないと「頑張ったのに数字が変わらない」ことになりがちです。現場でよく見かける失敗を、状況とセットで紹介します。
失敗1。LCP要素を確認せず、関係ない画像を最適化してしまう
一番多い失敗が、LCP要素を特定しないまま作業を始めることです。ページ内のすべての画像を頑張って圧縮したのに、肝心のLCP要素はテキストブロックやCSS背景画像だった、というケースがよくあります。
こうなると、時間をかけたのに数値がほとんど動きません。回避法はシンプルで、ステップ1に戻ってツールでLCP要素を特定し、その要素だけに集中することです。特にCSSの`url()`で読み込む背景画像がLCPになっているパターンは見落とされがちなので、要注意です。
失敗2。ファーストビューの画像に遅延読み込みが付いている
ファーストビューの画像に遅延読み込みが付いたままだと、LCPは確実に悪化します。プラグインやテーマが「全画像に自動で遅延読み込みを付ける」設定になっていると、意図せずこの状態になります。
その結果、一番大きく見せたい画像が後回しになり、表示が遅れます。回避法は、LCP画像を遅延読み込みの対象から除外することです。お使いの高速化プラグインに除外設定があれば、ファーストビューの1枚目を対象外に設定してください。
失敗3。測定環境の数値だけで満足してしまう
Lighthouseなどの測定環境（ラボデータ）でスコアが良くなっても、実際のユーザーのLCPが悪いままのことがあります。測定環境は高速な回線・端末を想定するため、現実のスマホユーザーの体験とはズレるからです。
失敗4。スクリプトの問題を、さらにスクリプトで解決しようとする
表示を速くしようとして、パフォーマンス監視ツールやA/Bテストツールなどを次々に追加した結果、かえって重くなることがあります。良かれと思って足したものが、新たな遅延要因になるのです。
回避法は「足す前に、まず引く」を意識することです。使っていない古いプラグインや、不要になった外部スクリプトを削るだけで軽くなることは少なくありません。追加は最小限にとどめましょう。
現場で見えた落とし穴と、内製か外注かの判断
ここまでの手順は「やること」は明快ですが、実際にやってみると詰まる場面が出てきます。教科書には載りにくい、現場でのつまずきどころを率直にお伝えします。
まず、CSSやJavaScriptの調整は影響範囲が読みにくいのが本音です。「表示に不要なCSSを後回しにする」という一言は簡単ですが、どれが不要かを見極めるには、そのサイトの構造を理解している必要があります。
ここを雑にやると、レイアウトが崩れたり、ボタンが効かなくなったりします。画像の圧縮やプリロードは比較的安全に手を出せますが、CSS/JSの最適化は一段ハードルが上がる、と考えておくのが現実的です。
もう1つの落とし穴が、プラグインの入れすぎです。高速化プラグインを2つ3つと重ねて入れると、設定が競合してかえって不安定になることがあります。速くするためのツールで遅くなる、という本末転倒が起きやすい領域です。導入するなら1つに絞り、機能を理解して使うのが安全です。
では、どこまで自分たちでやって、どこからプロに任せるべきか。ざっくりした判断軸を示します。
| 作業内容 | 難易度 | おすすめの進め方 |
|---|---|---|
| 画像の圧縮・WebP変換 | やさしい | まず自社でやってみる |
| 遅延読み込みの除外設定 | ふつう | プラグイン機能で自社対応 |
| プリロード・優先指定の追加 | ややむずかしい | テーマ構造を理解して慎重に |
| CSS/JSの最適化・サーバー調整 | むずかしい | 不安ならプロに相談 |
コスト面で見落とされがちなのが、「自分たちでやる時間」も立派なコストだという点です。担当者が慣れない設定に何日も費やし、その間に表示を崩してしまうと、機会損失のほうが高くつくこともあります。
そこで、画像最適化のような効果が大きく安全な部分は内製し、影響範囲が広く判断が難しい部分は外部の手を借りる、という切り分けが現実的です。
サイト全体をつくり直すタイミングなら、サイトリニューアルのSEO引き継ぎ手順もあわせて押さえておくと、速度と評価の両方を守れます。
向き不向きの本音を言えば、LCP改善は「元のサイトがある程度きちんと作られている」ことが前提になります。土台が古く、テーマもプラグインも継ぎ足しだらけのサイトでは、部分的な最適化より作り直したほうが早い場合もあります。ここは実際にサイトを見ないと判断できないところです。
よくある質問（FAQ）
LCPの目標は何秒を目指せばいいですか
2.5秒以下を目指してください。これがGoogleの「良好」の基準です。2.5秒から4.0秒は要改善、4.0秒を超えると「不十分」と評価されます。まずは4.0秒超えのページから優先的に手を入れるのがおすすめです。
パソコンは速いのにスマホが遅いのはなぜですか
スマホは回線や端末の性能がパソコンより不利なことが多いためです。スマホで見るユーザーが多いので、スマホ側の改善を優先してください。パソコンだけ速くて安心してしまうのは、よくある見落としです。
プラグインを入れるだけでLCPは改善しますか
ある程度は改善しますが、それだけでは不十分なことが多いです。プラグインは画像圧縮やキャッシュを自動化してくれますが、LCP要素の特定や遅延読み込みの除外など、設定を正しく選ぶ判断は人が行う必要があります。入れすぎは逆効果になる点にも注意してください。
改善したのに数値が変わらないのはなぜですか
LCP要素以外を直している可能性が高いです。まずツールでLCP要素を特定し直してください。また、Googleが使う実ユーザーのデータは反映に時間がかかるため、変更後しばらく経ってから再確認することも大切です。
まとめ。まずはLCP要素の特定から
LCP改善は、次の順番で進めれば、専門家でなくても着実に成果を出せます。
- LCP要素を特定する
- 画像を軽くして優先読み込みする
- サーバーとCSS/JSを整える
特に「ファーストビューの画像を遅延読み込みしない」だけでも、多くのサイトで数値が改善します。まずは自社の一番アクセスの多いページを、PageSpeed Insightsで一度チェックしてみてください。
ここまで読んで、画像は自分たちで直せそうだけど、CSSやサーバーまわりは自信がない、と感じた方もいるかもしれません。そんなときは、どこがボトルネックで、どこまで自社でやり、どこを任せるべきかを一緒に整理するところからお手伝いできます。サイトの表示速度をAIも活用しながら効率よく改善したい方は、AI業務システム化の詳細はこちらから、まずは現状のご相談だけでもお気軽にお声がけください。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
