Core Web Vitals改善 – LCP・INP・CLSを実際のサイトで整える

Core Web Vitalsとは：改善の対象になる3つの指標

Core Web Vitals（コアウェブバイタル）は、Googleが定めたページ体験の指標で、読み込みの速さ、操作への反応、表示の安定性の3つを数値で表します。Core Web Vitals改善とは、この3つを「良好」の範囲に入れるための作業です。

• LCP（Largest Contentful Paint）：画面でいちばん大きな画像や見出しが表示されるまでの時間。良好の目安は2.5秒以内、4秒を超えると「不良」
• INP（Interaction to Next Paint）：タップやクリックをしてから画面が反応するまでの時間。良好の目安は200ミリ秒以内、500ミリ秒を超えると「不良」。2024年3月にFIDから置き換わった指標です
• CLS（Cumulative Layout Shift）：読み込み中にレイアウトがどれだけずれるか。良好の目安は0.1以下、0.25を超えると「不良」

評価は実際の訪問者のデータをもとに、75パーセンタイル（訪問の4分の3がその値以内）で判定されます。一部の速い表示だけでなく、回線の遅いスマホを含めた多くの訪問で基準を満たすことが求められます。

PageSpeed Insightsの数値の読み方と、改善が必要なサイン

PageSpeed Insightsには、上段に「実際のユーザーの環境で評価する」フィールドデータ、下段にLighthouseによる「パフォーマンスの問題を診断する」ラボデータが表示されます。検索で参照されるのは上段のフィールドデータです。下段のスコアは診断用の目安で、同じページでも測るたびに数点ずつ動きます。

アクセスが少ないサイトではフィールドデータが表示されないこともあります。その場合はラボデータとSearch Consoleの「ウェブに関する主な指標」レポートを組み合わせて状態を把握します。次のような症状があれば、改善を検討する時期です。

• スマホで開くと、トップの写真が出るまで数秒間白い画面が続く
• メニューやボタンを押しても、一瞬遅れてから反応する
• 読み込み中に広告やバナーが差し込まれ、押したい場所がずれる
• Search Consoleで「不良URL」や「改善が必要なURL」が増えている
• PageSpeed Insightsのモバイルの結果だけが極端に悪い

Core Web Vitalsはランキング要因の一つですが、それだけで順位が決まるものではありません。あわせて大きいのは、表示の遅さやずれによる離脱を減らせることです。サイト全体の速度の考え方は表示速度の改善でもまとめています。

LCPを改善する：最初に表示される画像と文字を速くする

小規模なサイトでLCPが遅い原因の多くは、トップのメイン画像です。まずPageSpeed Insightsの診断で「LCP要素」がどれかを確認し、その一つの要素を速く出すことに集中します。

• 画像の軽量化：表示サイズに合わせて縮小し、WebPやAVIFで書き出す。スマホ用には小さい画像を出し分ける
• 読み込みの優先度：LCPの画像には遅延読み込み（lazy）を付けず、必要に応じてfetchpriority="high"やpreloadで先に読ませる
• サーバーの応答：WordPressならキャッシュの設定、古いPHPやプラグインの見直し、必要に応じてCDNの利用
• 表示を止める読み込み：使っていないCSSやJavaScript、多すぎるWebフォントの整理

スライダーで複数の大きな写真を回しているトップページは、LCPが遅くなりやすい代表例です。1枚目の写真だけを優先して出す、あるいは静止画1枚に絞るだけで大きく変わることがあります。

INPとCLSを改善する：反応の速さと表示のずれを直す

INPが悪化する原因は、ほとんどがJavaScriptの処理の重さです。チャット、広告、アクセス解析、SNS埋め込みなど、外部のタグが積み重なると、タップの処理が後回しになります。CLSは、サイズの決まっていない画像や後から差し込まれる要素で起こります。

• タグの棚卸し：Googleタグマネージャーや管理画面に残っている不要なタグを外し、必要なものは読み込みのタイミングを遅らせる
• 重いプラグインの整理：WordPressやShopifyのアプリは、使っていないものほど処理を増やしている場合がある
• 画像と動画のサイズ指定：widthとheight、またはaspect-ratioで表示枠を先に確保する
• 後から出る要素の場所取り：バナー、Cookieのお知らせ、埋め込みは、表示前から高さを確保するか画面下部に固定する
• Webフォントの表示：フォントの切り替わりで文字幅が変わらないよう、font-displayや代替フォントを調整する

Shopify、BASE、WordPressのテーマでは、テーマ自体の作りが原因のこともあります。設定の調整で済むのか、テーマの入れ替えが必要なのかを先に見極めると、無駄な作業を避けられます。サーバー設定やクロールまで含めた点検はテクニカルSEOで解説しています。

改善を依頼する前に用意しておくもの

Core Web Vitals改善は、サイトの管理画面や計測ツールに触れる作業です。次のものが揃っていると、原因の特定から修正までが早く進みます。

• サイトの管理画面（WordPress、Shopify、BASEなど）とサーバーのログイン情報
• Search Consoleの閲覧権限（「ウェブに関する主な指標」レポートの確認用）
• GA4やGoogleタグマネージャーの権限と、今使っているタグの一覧
• 外せない機能のメモ（予約フォーム、チャット、広告計測など）
• とくに大事なページのURL（トップ、主力のサービスページ、商品ページなど）

フィールドデータは過去28日間の集計のため、修正してもSearch Consoleの表示が変わるまでに数週間かかります。修正の前後でPageSpeed Insightsの結果を保存しておくと、効果を比べやすくなります。スマホでの表示自体に問題がある場合は、ホームページのスマホ対応から見直すのが近道です。

UNANOBOのCore Web Vitals改善：範囲を決めて実際のサイトで直す

UNANOBOでは、まず今のサイトのURLをお預かりし、PageSpeed Insightsとフィールドデータから、LCP・INP・CLSのどれが、どのページで、何によって悪いのかを整理します。そのうえで、改善した場合のページを無料デモとしてお作りし、表示や操作の違いを実際にスマホで確かめていただきます。

テーマの調整で済むのか、作り直したほうが早いのかもデモの段階でご提案し、作業の範囲を決めてから進めます。代表が最初の診断から公開後の数値の確認まで一人で担当し、やり取りはメッセージで日本語・英語のどちらでも対応します。