Core Web Vitalsを完全攻略する実践ガイド

Core Web Vitalsとは何か

Core Web Vitalsは、GoogleがUX（ユーザー体験）を数値化するために定めた3つの指標のセット。2021年6月から検索順位のランキング要因に組み込まれ、2024年3月にFIDからINPへ更新されました。

『速い（LCP）』『反応する（INP）』『安定してる（CLS）』の3点で、UX全体を測る設計です。

まず現状を測る：3点セットのツール

1. PageSpeed Insights（pagespeed.web.dev）：ラボ＋フィールドデータの両方を確認
2. Search ConsoleのCore Web Vitalsレポート：28日平均・URL単位で状態把握
3. Chrome DevToolsのPerformanceパネル：詳細な原因特定に使用

まずPageSpeed Insightsでモバイル版のLCP・INP・CLSをメモ。改善後の比較用スクショも撮っておきます。

LCP改善（2.5秒以内へ）

LCP（Largest Contentful Paint）は、画面最大要素の表示までにかかる時間。個人事業主サイトでは、ほぼ100%『ヒーロー画像』が対象です。

<!-- LCP対象画像の最適化 -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="トップビジュアル"
       width="1200" height="600"
       fetchpriority="high" loading="eager">
</picture>

ポイントはpreload・fetchpriority="high"・width/height指定の3点。画像を200KB以下に圧縮し、WebP化するとLCP 4秒→1.5秒も実現可能です。

INP改善（200ms以下へ）

INP（Interaction to Next Paint）は、クリック・タップ・入力への反応速度。JavaScriptの重さが直撃します。

• 未使用JavaScriptの削除（Chrome DevToolsのCoverageで検出）
• サードパーティスクリプトの遅延読込（defer/async属性）
• SNSシェアボタン・チャットボットの見直し
• イベントリスナーへのpassive: true指定
• 重い処理をrequestIdleCallbackで分割

<!-- サードパーティを遅延ロード -->
<script src="chat-widget.js" defer></script>
<script src="analytics.js" async></script>

<!-- passiveリスナー -->
<script>
element.addEventListener('touchstart', handler, { passive: true });
</script>

個人事業主サイトでは不要ウィジェット削除だけでINP 400ms→150msまで改善する事例多数。

CLS改善（0.1以下へ）

CLS（Cumulative Layout Shift）は、ページ読み込み中のレイアウトずれの累積値。読んでいる最中に文字が飛ぶ・ボタン位置が動く現象です。

<!-- 画像・iframeには必ず幅高さ指定 -->
<img src="menu.webp" alt="コース"
     width="800" height="600" loading="lazy">

<iframe src="https://www.google.com/maps/..."
        width="600" height="400"
        loading="lazy" title="店舗地図"></iframe>

<!-- Webフォントは font-display:swap で先に代替表示 -->
<style>
@font-face {
  font-family: 'NotoSansJP';
  src: url('noto.woff2') format('woff2');
  font-display: swap;
}
</style>

CLSはimg・iframeへのwidth/height指定＋font-display:swapだけで7割解決します。

実測ベンチマーク：業種別CWVの相場

2026年前半にLIKaNONで診断した100サイトの実測値（モバイル・フィールドデータ）。

ほぼ全業種で『改善が必要』レンジに入っています。CWV改善は、それだけで競合との差別化になる領域です。

今日試せる：60分クイック改善プラン

1. 0〜10分：PageSpeed Insightsで測定＆スクショ保存
2. 10〜25分：ヒーロー画像をWebP化＋preload追加
3. 25〜40分：全imgタグにwidth/height属性追加
4. 40〜50分：不要なウィジェット・チャットボット削除
5. 50〜60分：再測定＆Before/Afterの比較記録

これだけで多くのサイトが3指標のうち2つを『良好』レンジに入れられます。

数字で見る改善事例3つ

事例1：福岡・パーソナルジム（WordPress）
LCP 5.2秒→1.8秒、INP 380ms→140ms、CLS 0.28→0.06。SWELLテーマに変更＋不要プラグイン8個削除＋画像WebP化で達成。3ヶ月後の検索順位は8位→3位、月間問い合わせが4件→11件に増加。

事例2：大分・整体院（STUDIO）
LCP 4.5秒→2.2秒、CLS 0.19→0.04。ヒーロー画像をSTUDIOのアップロード前にSquooshで200KBに圧縮、GoogleマップをiframeでlazyロードするだけでCLSが1/5に。

事例3：熊本・ECサイト（Shopify）
INP 450ms→130ms。決済ウィジェットの遅延読込＋チャットボット削除＋商品ページのJS軽量化で、CVR 1.4%→2.3%へ改善。

やってはいけない5つのNG改善

• 全画像にlazy load：ヒーロー画像にlazyを付けるとLCPが悪化
• 不要な高速化プラグイン重ね掛け：設定競合でむしろ遅くなる
• CDN未検証導入：設定不備でCLSが悪化するケース
• PSIラボスコアだけ追う：実ユーザー（フィールドデータ）を無視
• 1指標だけ集中改善：3指標のバランスを見て優先順位を決める

WordPressユーザー向け：CWV改善レシピ

1. テーマを高速テーマに変更：SWELL・Cocoon・Snow Monkeyなど
2. プラグインを7個以下に整理：絶対必須のみ残す
3. 最適化プラグイン1つ導入：Perfmatters・WP Rocket（有料）またはEWWW＋Autoptimize（無料）
4. 画像を全てWebP化：EWWW Image Optimizerで一括変換
5. Google Fonts→ローカルホスト：OMGF等のプラグインで自動化

この5ステップで、多くのWordPressサイトが3指標『良好』に到達できます。

業種別・CWV改善で最初に狙うべき指標

『とりあえず全部改善』は非現実的。自業種で最も効きやすい指標から着手します。

• 飲食店・カフェ：まずLCP。メニュー写真とヒーロー画像のWebP化が最速
• 整体・整骨院：CLSを最優先。症状別ページの画像属性指定＋Webフォント最適化
• 美容室・サロン：LCPとCLS両方。スタイル写真の圧縮＋スライダーの属性指定
• 士業（税理士・社労士）：INP。問合せフォームのJS軽量化＋チャットボット見直し
• ECサイト：INP最優先。決済系JS・レコメンドウィジェットの遅延読込

『全指標を良好レンジに入れる』はゴール。まずは自業種でユーザーが最もストレスを感じる指標から潰していきます。

効果測定：どれくらいで数字が動くか

• PageSpeed Insightsのラボスコア：実装後48〜72時間で反映
• Search ConsoleのCWVレポート：28日移動平均のため3〜4週間
• 検索順位への影響：2〜8週間、コンテンツ品質が同等の競合と入替
• UX指標（直帰率・CVR）：実装翌日から現れる

『順位が動かない』と諦めるのが早すぎるパターンが多発。最低3ヶ月は継続観察してください。

よくある質問

Q. CWVは本当に順位に影響する？
A. はい、公式ランキング要因。ただし同等コンテンツ間でのタイブレーカー扱いです。

Q. 合格ラインは？
A. LCP 2.5秒以内、INP 200ms以下、CLS 0.1以下です。

Q. FIDはなくなった？
A. 2024年3月にINPへ更新。全操作の最悪値で評価する仕組みです。

Q. CLSはなぜ発生する？
A. 画像属性未指定・Webフォント切替・遅延広告が主原因。img/iframeへの幅高さ指定で7割解決。

Q. WordPressでの近道は？
A. 高速テーマ変更＋プラグイン整理＋最適化プラグイン1つの3ステップです。

まとめ

Core Web Vitalsは、LCP・INP・CLSの3指標を良好レンジに入れるだけ。特にLCPとCLSは、画像最適化と属性指定だけで大半が改善します。INPは不要ウィジェット削除が最も効きます。

UX指標を整えれば、SEO順位・CVR・売上のすべてに好影響。60分プランからスタートして、まず1指標『良好』を目指しましょう。

関連記事

• Core Web Vitals改善の基本
• HPの表示速度を2倍にする5つの改善策
• WEBサイト速度最適化の全知識
• モバイルSEO完全ガイド
• Google Search Consoleで見るべき7つの指標