Core Web Vitals 改善 完全ガイド｜LCP・INP・CLS を「合格」にする実装手順【2026年版】
「PageSpeed Insights で測定したら 赤色（不合格） だった」「Core Web Vitals が原因で順位が下がっている気がする」――そんな中小企業 Web 担当者向けに、本記事では LCP・INP・CLS を「合格」にするための具体的な実装手順 を WordPress 向けに解説します。
ドットアンドノードでは、自社サイトでこれらの施策を実装した結果、PageSpeed Insights モバイルスコア 35 → 92 へ改善しました。本記事ではその実例ベースで手順を共有します。
Core Web Vitals とは（INP移行も含めて）
Core Web Vitals（CWV）は Google が ユーザー体験の品質指標 として 2020 年に発表した 3 つの指標です。2024 年 3 月から、それまでの FID（First Input Delay）に代わって INP（Interaction to Next Paint） が正式採用されました。
| 指標 | 内容 | 合格基準 |
|---|---|---|
| LCP（Largest Contentful Paint） | 最大コンテンツの表示時間 | 2.5 秒以下 |
| INP（Interaction to Next Paint） | クリック等の操作後の応答時間 | 200ms 以下 |
| CLS（Cumulative Layout Shift） | レイアウトのズレ量 | 0.1 以下 |
これら 3 つすべてが基準を下回ると「合格」、1 つでも超えると「不合格」と判定されます。Google は CWV を ランキング要因の一部 として公式に認めており、特にモバイル検索では影響が大きいとされています。
PageSpeed Insights で測定→改善優先度の判断
まず現状を測定します。
- https://pagespeed.web.dev/ にアクセス
- 改善したい URL を入力
- 「分析」ボタンをクリック
- モバイル と デスクトップ の両方をチェック
中小企業サイトでは、まずモバイルの改善を優先します（Google はモバイルファーストインデックスのため）。
PageSpeed Insights では、各指標の数値だけでなく 「改善できる項目」 が下部に表示されます。改善優先度は、レポート上で 節約時間が大きい順に表示 されるので、上から取り組めば効率的です。
LCP 改善：preload + fetchpriority + 画像最適化
LCP の主な原因は 「ファーストビューの画像が大きすぎる／遅く読み込まれる」 ことです。
改善 1：ファーストビュー画像に fetchpriority="high" を付与
HTML の fetchpriority="high" を追加するだけで、ブラウザがその画像を最優先で読み込みます。
<!-- 変更前 -->
<img src="/images/hero.jpg" alt="メインビジュアル">
<!-- 変更後 -->
<img src="/images/hero.jpg" alt="メインビジュアル"
fetchpriority="high" loading="eager">これだけで LCP が 0.5〜1.5 秒短縮 することがあります。
改善 2：WebP/AVIF への変換
JPEG/PNG を WebP に変換するだけで、ファイルサイズが 30〜50% 削減 されます。WordPress なら以下プラグインで自動変換可能：
- EWWW Image Optimizer（無料版で十分）
- Smush
- ShortPixel
改善 3：CSS の Critical 部分をインライン化
CSS が外部ファイルだと、CSS 読み込み完了までレンダリングが遅延します。ファーストビューに必要な Critical CSS を 内にインラインで書き込むと、LCP が大幅に改善します。
<head>
<style>
/* ファーストビューに必要な最小限の CSS */
body { margin: 0; font-family: sans-serif; }
.hero { width: 100%; height: 100vh; }
</style>
<link rel="preload" as="style" href="/full.css">
<link rel="stylesheet" href="/full.css">
</head>INP 改善：イベントハンドラ最適化・defer/async・jQuery 依存削減
INP の主な原因は 「クリックやスクロールの応答時間が遅い」 ことです。原因の 80% は 重い JavaScript の同期実行 です。
改善 1：JavaScript を defer または async で読み込む
<!-- 変更前（ブロッキング） -->
<script src="/heavy.js"></script>
<!-- 変更後（defer：HTML パース後に実行） -->
<script src="/heavy.js" defer></script>
<!-- もしくは async：依存関係がないものに使う -->
<script src="/analytics.js" async></script>改善 2：jQuery 依存を最小化
WordPress テーマの多くで jQuery が読み込まれていますが、独自実装で使っていない場合は不要です。functions.php で削除：
// jQuery 不要な場合は無効化
add_action('wp_enqueue_scripts', function() {
if (!is_admin()) {
wp_deregister_script('jquery');
}
});ただし、テーマやプラグインが jQuery 依存の場合、削除すると壊れるので注意。代わりに defer 化 が安全：
add_filter('script_loader_tag', function($tag, $handle) {
if (in_array($handle, ['jquery', 'jquery-core', 'slick'])) {
return str_replace(' src=', ' defer src=', $tag);
}
return $tag;
}, 10, 2);改善 3：重いイベントハンドラを分割
onclick で 100ms 以上かかる処理がある場合、requestIdleCallback で分割：
// 変更前
button.addEventListener('click', () => {
heavyTask1();
heavyTask2();
heavyTask3();
});
// 変更後
button.addEventListener('click', () => {
heavyTask1();
requestIdleCallback(() => {
heavyTask2();
heavyTask3();
});
});CLS 改善：画像 width/height・font-display: swap
CLS の主な原因は 「画像や広告が後から読み込まれて、レイアウトがガタンとずれる」 ことです。
改善 1：すべての画像に width/height を明示
<!-- 変更前（CLS の原因） -->
<img src="/photo.jpg" alt="商品写真">
<!-- 変更後 -->
<img src="/photo.jpg" alt="商品写真" width="800" height="600">ブラウザは width/height からアスペクト比を計算し、画像読み込み前に正しい領域を確保します。これで CLS = 0 に近づきます。
改善 2：Web フォントに font-display: swap
Web フォント読み込み中、テキストが見えない / フォント切替時にレイアウトがズレる問題を解消：
@font-face {
font-family: 'NotoSansJP';
src: url('/fonts/NotoSansJP.woff2') format('woff2');
font-display: swap; /* これが重要 */
}改善 3：広告・埋め込みコンテンツに最小高さを設定
Google AdSense や YouTube 埋め込みは、読み込み完了まで高さが不定です。CSS で最小高さを確保：
.ad-container {
min-height: 280px; /* 広告サイズに応じて */
}
.youtube-embed {
aspect-ratio: 16 / 9;
width: 100%;
}WordPress 特有のチューニング
プラグイン整理：不要なものを「停止 → 削除」
特に重いプラグインの代表例：
- Jetpack（多機能だが重い）
- 古いキャッシュプラグイン（W3 Total Cache 等）
- 統計系プラグイン（PHP/MySQL負荷大）
キャッシュプラグイン導入
推奨：
- WP Rocket（有料、設定が簡単で効果大）
- WP Super Cache（無料、シンプル）
- LiteSpeed Cache（LiteSpeed サーバー利用時のみ）
サーバー選び：低速ホスティングは諦める
ロリポップ・さくらレンタルの低価格プランでは、いくらチューニングしても限界があります。CWV を本気で改善するなら：
- エックスサーバー（X10 以上）
- ConoHa WING
- mixhost
への移転が最も効果的です。
dot-node.com の Before/After
| 指標 | Before（2026/1） | After（2026/3） |
|---|---|---|
| PageSpeed モバイル | 35 | 92 |
| LCP | 4.2s | 1.8s |
| INP | 280ms | 120ms |
| CLS | 0.18 | 0.02 |
施策内容：
- ファーストビュー画像に fetchpriority=”high”
- jQuery / slick.js を defer 化
- すべての画像に width/height 付与
- Web フォントに font-display: swap
- WP Rocket 導入
- Critical CSS インライン化
これらの施策を実装することで、3 ヶ月で「不合格」から「合格」へ 改善できました。
まとめ
Core Web Vitals は、検索順位への直接影響だけでなく、ユーザーの体感速度・CV 率にも直結 します。改善優先順位は以下の通り：
- LCP：ファーストビュー画像最適化 → preload + fetchpriority
- INP：JavaScript の defer 化 + 重い処理の分割
- CLS：画像 width/height 必須 + font-display: swap
中小企業サイトでは、上記 3 つを 1 ヶ月以内に実装すれば、PageSpeed スコア 50 点以上の改善 が現実的に可能です。
関連するPillar記事
- 🛠️ 中小企業WebサイトのSEO改善実例60項目 — Core Web Vitals も含めた60項目の実装ガイド
- 🎯 中小企業のSEO対策 完全ガイド — SEO戦略全般の体系的解説
- 🤖 AI検索時代の SEO/AIO/GEO/LLMO 対策 — AI 検索対応の戦略全体像
無料診断のお申込み
「自社サイトの Core Web Vitals が不合格で困っている」「PageSpeed スコアを 90 点以上にしたい」という方は、ドットアンドノードの 無料 AIO＆SEO 診断 をご活用ください。30 項目のチェックポイントを 3 営業日でレポート いたします。
AUTHOR PROFILE
稲垣 達也
いながき たつや
ドットアンドノード株式会社 代表取締役／AI集客コンサルタント／SEO・AIO/GEO/LLMO 戦略家
横浜国立大学経済学部卒。商社・不動産業界を経て2019年に独立、2023年12月にドットアンドノード株式会社を設立。SEO × AIO × 導線設計 の3軸ハイブリッド型サービスを開発し、約50業種・累計10,000記事以上 の制作実績。
累計1〜3位獲得KW 7,202個、Google広告認定スコア100点、宅建士・相続診断士保有。掲載メディア 60媒体以上。
