Core Web Vitalsの改善方法｜LCP・INP・CLSを初心者向けに解説
2026/08/11
リニューアル・運用ノウハウCore Web Vitalsとは？ホームページの「使いやすさ」を測る3つの指標
Core Web Vitals（コアウェブバイタル）とは、Webページを利用したユーザーが感じる読み込み速度・操作への反応・表示の安定性を測るための指標です。
現在のCore Web Vitalsは、次の3つで構成されています。
LCP（Largest Contentful Paint）
→ メインコンテンツがどれくらい早く表示されるか
INP（Interaction to Next Paint）
→ クリックやタップなどの操作にどれくらい早く反応するか
CLS（Cumulative Layout Shift）
→ ページ表示中にレイアウトがどれくらいズレるか
つまりCore Web Vitalsは、単純な「ページの速さ」だけを見る指標ではありません。
表示されるまで待たされないか
ボタンを押したのに反応しない状態にならないか
読んでいる途中で文字やボタンが突然動かないか
といった、実際のユーザー体験を数値化する考え方です。Googleも、Core Web Vitalsを実際のユーザー体験を測定する指標として位置づけています。
Core Web VitalsはSEOにどこまで影響する？
Core Web Vitalsについて、「数値を改善すれば検索順位が上がる」と考えている方もいます。
しかし、これは少し違います。
GoogleはCore Web Vitalsを、検索ランキングを決定する際に考慮するページエクスペリエンス関連の要素の一つとして扱っています。一方で、Core Web Vitalsだけを改善すれば上位表示できるわけではなく、検索意図に合った有益なコンテンツであることの方が重要です。
例えば、
Aサイト：Core Web Vitalsは非常に良いが、内容が薄い
Bサイト：表示速度は少し劣るが、検索ユーザーの疑問に詳しく答えている
という場合、単純にAサイトが上位になるわけではありません。
そのため、Core Web Vitals改善の目的は、
「SEOの点数を上げること」ではなく、ユーザーがストレスなく利用できる環境を整えること
と考えるのが重要です。
問い合わせや採用を目的とした企業サイトなら、ユーザー体験の改善は離脱防止やフォーム到達にもつながるため、SEO以外の意味でも取り組む価値があります。
まず覚えたいLCP・INP・CLSの基準値
Googleが示している「良好」の目安は次のとおりです。
LCP：2.5秒以下
INP：200ミリ秒以下
CLS：0.1以下
Core Web Vitalsでは一部の高速ユーザーだけを見るのではなく、実際のユーザー体験を広く捉えるため、ページ訪問の75パーセンタイルで3指標すべてが推奨値を満たしているかが重要な基準になります。
| 指標 | 何を測る？ | 良好の目安 |
|---|---|---|
| LCP | 読み込み速度 | 2.5秒以下 |
| INP | 操作への反応 | 200ms以下 |
| CLS | 表示の安定性 | 0.1以下 |
まずは、この3つの意味を理解することから始めましょう。
LCPとは？ページの「表示速度」を改善する方法
LCPは、ページを開いてから、ファーストビュー内の大きな画像やテキストなど、主要なコンテンツが表示されるまでの時間を測ります。
Googleが推奨する良好なLCPは2.5秒以下です。
企業サイトでLCPの対象になりやすいのが、
- メインビジュアル
- 大きな写真
- メインコピーを含む大きなテキスト領域
などです。
ファーストビューの大きな画像を軽くする
企業サイトでLCPが悪化する代表的な原因の一つが、ファーストビューの大きな画像です。
例えば、
- 5MB以上ある写真をそのまま掲載
- PC用の巨大画像をスマホでも読み込む
- 必要以上に高解像度な画像を使用
といった状態です。
改善する場合は、
適切な画像サイズへリサイズする
WebPなど効率的な画像形式を検討する
端末サイズに合った画像を配信する
必要以上に高画質な画像を使用しない
といった方法を検討します。
LCPはメインコンテンツが表示されるまでの時間を測るため、特にファーストビュー画像の読み込み方法は重要な改善ポイントです。
サーバーの応答速度を見直す
画像だけではなく、サーバー側の応答が遅ければページ表示全体が遅くなります。
例えば、
- サーバースペックが不足している
- アクセス集中で処理が遅れている
- CMS側の処理が重い
- キャッシュが適切に利用されていない
といった原因が考えられます。
画像を圧縮してもLCPが改善しない場合は、フロント側だけでなくサーバー・CMS環境まで確認することが大切です。
不要なCSS・JavaScript・外部読み込みを減らす
ページを開く際に大量のCSSやJavaScriptを読み込んでいると、重要なコンテンツの表示が後回しになることがあります。
よくあるのが、
- 使用していないプラグイン
- 大量のアニメーション
- 計測タグ
- チャットツール
- SNS埋め込み
- Webフォント
などです。
「便利だから」「以前から入っているから」と残すのではなく、本当に必要なものか定期的に棚卸しすることが重要です。
LCP画像を遅延読み込みしすぎない
画像の遅延読み込み（lazy load）は、ページ全体の読み込み量を減らすためには便利です。
しかし、最初から表示されるメインビジュアルなど、LCPの対象になる重要画像まで不必要に遅延させると、逆に表示が遅くなることがあります。
「すべての画像を遅延読み込みする」のではなく、ファーストビュー画像と下層画像を分けて設計することが大切です。GoogleのLCP最適化ガイドでも、LCPリソースを早く発見・読み込み・レンダリングできる状態にすることが重要とされています。
INPとは？クリック後の「反応の遅さ」を改善する方法
INPは、ユーザーがページ内で行ったクリック・タップ・キーボード操作などに対して、画面がどれだけ早く反応したかを評価する指標です。
良好な目安は200ミリ秒以下です。INPはページ滞在中に発生した対象インタラクションの応答性を継続的に見て、ページ全体として反応が悪くないかを評価します。
例えば、
- メニューを押したのに開かない
- フォームの選択肢を押しても反応が遅い
- 「もっと見る」を押してから表示まで時間がかかる
といった状態は、INP悪化につながる可能性があります。
重いJavaScript処理を減らす
INPが悪い場合、代表的な原因の一つがJavaScriptです。
JavaScriptの処理中は、ブラウザがユーザー操作への反応をすぐに返せない場合があります。
- 不要なスクリプトを削除する
- 処理内容を見直す
- 必要なタイミングまで読み込みを遅らせる
などによって改善を検討します。GoogleのINP最適化ガイドでも、入力遅延・イベント処理・次の描画までの時間を短縮することが重要とされています。
長時間メインスレッドを占有する処理を分割する
一つの重い処理が長時間実行されていると、その間ユーザー操作への反応が遅れます。
処理を小さく分けたり、不要な処理を減らしたりすることで、ユーザー操作を処理できる余裕を作ります。
専門的な実装になるため、INPに問題がある場合は制作会社やエンジニアへの相談をおすすめします。
外部ツール・タグを整理する
企業サイトでは公開後、さまざまなツールが追加されていきます。
- GA4
- GTM
- 広告タグ
- ヒートマップ
- チャット
- MAツール
- SNS関連
一つひとつは必要でも、積み重なることでサイトが重くなる場合があります。
リニューアル時には、現在使っているタグをすべて棚卸しするのがおすすめです。
「昔の広告用タグが残っていた」
「使っていないヒートマップが動いていた」
というケースは珍しくありません。
フォームやメニューの操作感を実機で確認する
数値だけでなく、自分でスマートフォンを操作することも重要です。
- ハンバーガーメニュー
- 問い合わせフォーム
- アコーディオン
- 検索機能
- スライダー
- モーダル
など、ユーザーが触る機能を実際に試してみましょう。
INPはユーザー操作への応答性を見る指標なので、「自分で触って遅いと感じる場所」が改善箇所を探すヒントになります。
CLSとは？突然レイアウトがズレる問題を改善する方法
CLSは、ページを閲覧している途中にレイアウトが予期せず移動する現象を評価します。
良好な目安は0.1以下です。
例えば、
- ボタンを押そうとした瞬間に広告が表示され、位置がずれる
- 文章を読んでいたら上から画像が読み込まれて文章が移動する
- Webフォント読み込み後に文字サイズが変わる
といった状態です。
ユーザーにとって非常にストレスの大きい現象なので、改善する価値があります。
画像・動画の表示領域をあらかじめ確保する
画像のwidth・heightなどが適切に設定されていないと、ブラウザは画像が読み込まれるまで必要なスペースを判断できません。
結果として、
文章が先に表示
↓
画像読み込み
↓
文章が下へ移動
というレイアウトシフトが発生します。
画像や動画のサイズ・アスペクト比を事前に指定し、読み込み前から表示領域を確保することが、CLS改善の基本です。
後から表示されるバナーやコンテンツに注意する
Cookieバナー、広告、キャンペーン案内などをページ上部へ後から挿入すると、既存コンテンツを押し下げることがあります。
対策として、
- あらかじめ表示スペースを確保する
- 既存コンテンツを押し下げない表示方法にする
- ユーザー操作後の表示方法を見直す
などを検討します。サイズを確保していない動的コンテンツは、CLS悪化の代表的な原因の一つです。
Webフォントによる文字ズレを抑える
Webフォントの読み込み前後で文字幅や高さが大きく変わると、文章の位置がずれることがあります。
日本語サイトでは文字量が多いため、フォント選択や読み込み方法による影響が大きくなるケースもあります。
デザイン性だけでなく、
- 読み込み速度
- 可読性
- レイアウトへの影響
まで考えてフォントを選択しましょう。
Core Web Vitalsの確認方法｜まず見るべき3つのツール
Google Search Console
Search ConsoleにはCore Web Vitalsのレポートがあり、実際のユーザーデータをもとにサイトの問題を確認できます。GoogleもCore Web Vitals改善時の確認手段としてSearch Consoleのレポートを案内しています。
「サイト全体として問題があるページ群を探す」用途に向いています。
まずは、
- 良好
- 改善が必要
- 不良
となっているページがどれくらい存在するのか確認しましょう。
PageSpeed Insights
PageSpeed Insightsは、URLを入力するだけでパフォーマンスを確認できるGoogleのツールです。
利用可能な場合は実際のユーザー環境から収集されたフィールドデータを確認でき、同時にLighthouseによるラボ環境での診断も改善箇所の特定に役立ちます。フィールドデータとラボデータは測定環境が異なるため、数値が一致しない場合があります。
重要なのは、
点数だけを見るのではなく、「何が遅くしているか」を見ること
です。
Chrome DevTools・Lighthouse
具体的な原因を調べたい場合は、Chrome DevToolsやLighthouseを利用します。
例えば、
- どの画像がLCP対象か
- どの処理が重いか
- どの要素がレイアウトシフトしているか
など、問題の原因をより細かく分析できます。Googleは、Core Web Vitalsは実際のユーザーデータで評価しつつ、Lighthouseなどのラボツールを問題診断に活用するワークフローを案内しています。
「PageSpeed Insightsで100点」を目標にしなくていい理由
Core Web Vitals改善でよくある失敗が、
「とにかくPageSpeed Insightsを100点にする」
ことが目的になってしまうことです。
Google自身も、Core Web Vitalsのスコアが良いからといって検索上位が保証されるわけではなく、SEOだけを理由に満点を追い求めることは有効な時間の使い方とは限らないと説明しています。
例えば、100点を取るために、
- 必要な写真を極端に小さくする
- 便利な機能を削除する
- ブランド表現をすべてなくす
となってしまえば、本末転倒です。
目指すべきなのは、
ユーザーがストレスなく閲覧できる
伝えたい情報がきちんと伝わる
問い合わせ・応募につながる
そのうえでCore Web Vitalsも良好
という状態です。
リニューアル時にCore Web Vitalsが悪化しやすい原因
「古いサイトより新サイトの方が遅くなった」ということは実際に起こります。
原因として考えられるのは、
大きなメインビジュアルを追加した
動画をファーストビューへ追加した
アニメーションを増やした
Webフォントを増やした
JavaScriptライブラリが増えた
計測・広告・チャットタグが増えた
WordPressプラグインが増えた
などです。
つまり、デザインを豪華にすることと、快適に使えることは必ずしも同じではありません。
リニューアルではデザイン確認だけでなく、公開前にPageSpeed Insightsや実機でパフォーマンス確認を行いましょう。
Core Web Vitals改善チェックリスト
LCP｜読み込み速度
- ファーストビュー画像が必要以上に大きくない
- 画像を適切なサイズ・形式にしている
- LCP対象画像を不必要に遅延読み込みしていない
- 不要なCSS・JavaScriptを減らしている
- サーバー応答が極端に遅くない
- 不要な外部ツールを削除している
INP｜操作への反応
- ボタン・メニューがすぐ反応する
- 重いJavaScript処理を見直している
- 不要なタグ・外部スクリプトを整理している
- フォームを実際のスマートフォンで操作確認している
- アニメーションやUI機能を増やしすぎていない
CLS｜表示の安定性
- 画像に表示サイズ・アスペクト比を設定している
- 動画・iframeの領域を確保している
- 後から挿入されるバナーの領域を確保している
- フォント読み込みによる大きなズレがない
- ページをスクロールしても突然コンテンツが動かない
計測・運用
- Search ConsoleでCore Web Vitalsを確認している
- PageSpeed Insightsで重要ページを確認している
- トップページだけでなくサービスページも確認している
- PC・スマートフォンの両方を確認している
- リニューアル公開後も継続して数値を監視している
まとめ：数字を良くすることではなく“快適に使えるサイト”を目指す
Core Web Vitalsは、
LCP＝表示されるまでの速さ
INP＝操作への反応の速さ
CLS＝画面の安定性
という、ユーザーがホームページを利用するときの基本的な体験を数値化したものです。
現在Googleが示している良好の目安は、LCP 2.5秒以下・INP 200ミリ秒以下・CLS 0.1以下です。
ただし、Core Web Vitalsだけを改善すればSEOで勝てるわけではありません。
検索意図を満たすコンテンツ
企業としての信頼性
分かりやすい導線
問い合わせしやすい設計
快適なページ体験
これらを総合的に整えることが重要です。Googleも、特定のページエクスペリエンス指標だけに集中するのではなく、全体として良いページ体験を提供することを推奨しています。
Core Web Vitalsは「SEOのための点数」ではなく、ユーザーが快適にサイトを利用できているかを確認する健康診断として活用しましょう。
無料相談
Refuでは、PageSpeed Insights・Search Consoleなどを活用した現状分析から、画像最適化、JavaScript・外部タグの整理、WordPress・サーバー環境の見直しまで、サイトごとの原因に合わせた改善をご提案しています。
「リニューアルしたらサイトが重くなった」
「PageSpeed Insightsの数値をどう見ればいいか分からない」
「SEOと問い合わせの両方を考えて改善したい」
など、お気軽にご相談ください。
その他おすすめ記事はこちら
画像サイズとページ速度の関係を理解する｜表示速度を改善する実践テクニック
リニューアル後に検索順位が落ちた時の原因チェック｜最短で戻す改善手順
