Core Web Vitals 改善ガイド
LCP / INP / CLS の合格基準と実装テクニック
Core Web Vitals（CWV）は、Googleが定めるページ体験指標です。2021年からランキング要因に組み込まれ、2024年3月にはFIDがINPに置き換わりました。本記事では3つの指標（LCP / INP / CLS）の合格基準と、コピペで使える改善テクニックを解説します。
Core Web Vitals とは
Core Web Vitalsは、ユーザーがページを開いた時に感じる「速さ」「反応性」「安定性」を数値化したGoogleの公式指標です。2024年3月以降、3指標すべてが「良好」のページは検索順位で優遇されます（ただし主要因ではなく、品質ベースのタイブレーカー的位置づけ）。
計測対象は実際のユーザーの体験データ（フィールドデータ）で、Chrome User Experience Report (CrUX) から集計されます。実環境での体感が反映されるため、自社の高速サーバでテストして良くても、ユーザーの古いスマホ＋低速回線では悪化することがあります。
3つの指標と合格基準
| 指標 | 正式名称 | 良好 | 改善が必要 | 不良 |
|---|---|---|---|---|
| LCP | Largest Contentful Paint | < 2.5秒 | 2.5 - 4.0秒 | > 4.0秒 |
| INP | Interaction to Next Paint | < 200ms | 200 - 500ms | > 500ms |
| CLS | Cumulative Layout Shift | < 0.1 | 0.1 - 0.25 | > 0.25 |
3指標すべてが「良好」を取るには、URL別に75パーセンタイル（75%のユーザーの体験）が基準値以内である必要があります。
計測ツール
① PageSpeed Insights（最重要）
https://pagespeed.web.dev/。URLを入力するだけで、フィールドデータ＋ラボデータの両方が見られます。
改善提案も具体的に表示され、何をすればスコアが上がるかが分かります。
② Search Console「ウェブに関する主な指標」
サイト全体の状況を把握できます。「不良」「改善が必要」のURL一覧を取得し、優先的に対策しましょう。
③ Chrome DevTools「Performance」
開発者向け。ローカル環境で詳細な計測ができ、CPUスロットリングや低速回線シミュレーションで実機相当の体験を再現できます。
LCP（最大コンテンツ描画時間）の改善
LCPは「ページ内で最も大きな要素（多くの場合はヒーロー画像 or H1テキスト）」が画面に表示されるまでの時間です。
- 画像最適化: WebP/AVIF化、適切なサイズで配信、loading="eager"でファーストビューは即読み
- サーバ応答時間（TTFB）短縮: PHP/DBクエリ高速化、CDN導入、HTTP/2有効化
- CSS/JS のレンダリングブロック解消: クリティカルCSSをinline化、JS は defer/async
- preload で重要リソースを先読み:
<link rel="preload" as="image" href="hero.webp"> - フォントの読み込み最適化: font-display: swap、サブセット化
💡 最も効果が大きいのは画像最適化。ヒーロー画像をWebP化＋widthを指定するだけでLCP 1.5秒短縮、というケースは珍しくありません。
INP（操作応答時間）の改善
INPは「ボタンクリック・タップ・キー入力に対して、画面が次に更新されるまでの時間」です。2024年3月にFIDから置き換わった新指標で、より厳しい基準になっています。
- JavaScript の分割と遅延実行: code splitting、不要な処理は requestIdleCallback で
- 長時間実行タスクの分割: 50ms以上のタスクは setTimeout で分割
- イベントハンドラの軽量化: 重い処理は Web Worker に移譲
- サードパーティスクリプトの遅延: 解析タグ・チャットウィジェット等は load イベント後
- 不要なライブラリの削除: jQuery を使っていないなら除去、Lodash も部分インポート
⚠️ INPが悪化しやすい典型例: GTM/Google Analytics 4 経由で大量のタグを実行している、ヒートマップ・チャット・広告タグが多重に読み込まれている。
CLS（レイアウトずれ）の改善
CLSは「ページ読み込み中に要素がガクッと動く度合い」を数値化します。最悪なのは「タップしようとした瞬間に広告が挿入され、誤タップ」のケース。
- 画像・iframe に width / height を明示: ブラウザが事前に領域を確保
- 広告枠のサイズ予約:
min-heightで事前確保、動的挿入を避ける - Web Font の FOIT/FOUT 対策:
font-display: optionalまたは size-adjust - 動的コンテンツの挿入位置: 既存コンテンツの「上」ではなく「下」に追加
- CSS アニメーション: top/left ではなく transform: translate を使う
CWV対策の優先順位
時間と予算が限られる場合、以下の順で対策するのが投資対効果が高いです。
- 画像WebP化 + loading="lazy": 1日で実装可、LCP改善大
- サードパーティタグの整理: GTM 内の不要タグを削除、INP改善
- サーバ・CDN見直し: ホスティング変更も検討、全指標改善
- JS バンドル最適化: code splitting、INP/LCP両方改善
- CSS最適化: 最後の詰め、コスパは下がる
💡 Saguruの自サイト分析では、Core Web Vitals の現状値と改善優先度を一覧表示。「どこから手を付けるべきか」を月額270円で可視化できます。
Core Web Vitals を含む自サイト診断
SEO対策の最初の一歩はキーワード調査です。Saguruなら、Google・Bing・YouTube・Amazonのサジェスト、知恵袋の質問、上位サイトの見出し・共起語を 1画面で一括抽出。SEO難易度の自動判定で「狙い目キーワード」に 👑 マークが付きます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円