Core Web Vitalsとは？Googleに評価されるサイトを作るための基礎知識
はじめに
SEO対策に取り組んでいるにもかかわらず、なかなか検索順位が上がらない——その原因のひとつが、Core Web Vitalsへの対応不足かもしれません。
GoogleはCore Web Vitalsをページエクスペリエンスの評価指標として検索ランキングに組み込んでいます。キーワード最適化やコンテンツの充実と並んで、サイトのパフォーマンスそのものが順位に影響する時代になりました。
本記事では、Core Web Vitalsの3つの指標の意味と計測方法、そして改善に向けた具体的なアプローチを解説します。
Core Web Vitalsとは
Core Web Vitalsとは、Googleがユーザー体験の質を測るために定めた3つのパフォーマンス指標の総称です。2021年に検索ランキングの正式な評価要素として採用され、2026年現在も継続して重要視されています。
3つの指標はそれぞれ「読み込み速度」「インタラクティブ性」「視覚的安定性」を測るものです。
3つの指標を理解する
LCP（Largest Contentful Paint）——読み込み速度
ページを開いてから、メインコンテンツ（最も大きな画像やテキストブロック）が表示されるまでの時間を計測します。
- 良好：2.5秒以内
- 要改善：2.5〜4.0秒
- 不良：4.0秒超
LCPに影響する主な要因は、サーバーの応答速度・画像ファイルのサイズ・レンダリングをブロックするJavaScriptやCSSです。ファーストビューに大きな画像を使用しているサイトでは、特に注意が必要な指標です。
INP（Interaction to Next Paint）——インタラクティブ性
ユーザーがボタンクリックやフォーム入力などの操作を行ってから、画面に反応が表示されるまでの時間を計測します。2024年にFID（First Input Delay）から置き換わった指標で、単一の操作だけでなくページ全体のインタラクションの応答性を評価します。
- 良好：200ミリ秒以内
- 要改善：200〜500ミリ秒
- 不良：500ミリ秒超
JavaScriptの処理量が多いページや、サードパーティスクリプト（チャットツール・広告タグなど）を多数読み込んでいるページで悪化しやすい指標です。
CLS（Cumulative Layout Shift）——視覚的安定性
ページの読み込み中に、コンテンツが予期せず動いてしまう現象（レイアウトシフト）の累積スコアを計測します。「読もうとした文章が突然ずれた」「押そうとしたボタンが移動した」といった体験が数値化されたものです。
- 良好：0.1以下
- 要改善：0.1〜0.25
- 不良：0.25超
サイズ指定のない画像・遅延読み込みされる広告・動的に挿入されるコンテンツが主な原因です。
計測方法
Core Web Vitalsの計測には、主に以下のツールを使用します。
Google Search Consoleの「ページエクスペリエンス」レポートでは、実際のユーザーデータ（フィールドデータ）に基づいたサイト全体のスコアを確認できます。問題のあるページをURL単位で把握できるため、優先的に改善すべき箇所の特定に有効です。
PageSpeed Insightsでは、URLを入力するだけでLCP・INP・CLSのスコアと、具体的な改善提案を確認できます。フィールドデータとラボデータ（シミュレーション）の両方を提供しており、実装前後の効果検証にも使えます。
Chrome DevToolsのLighthouseは、開発環境での詳細な診断に適しています。ネットワーク条件やデバイスを指定してテストできるため、実装中の細かい調整に役立ちます。
改善アプローチ
LCP改善
画像の最適化が最も即効性のある施策です。WebP形式への変換・適切なサイズへのリサイズ・loading="lazy"の活用に加え、ファーストビューの画像には逆にfetchpriority="high"を指定して優先読み込みを促すことが有効です。
サーバー応答速度の改善にはCDN（コンテンツデリバリーネットワーク）の導入が効果的です。Next.jsを使用している場合、Vercelへのデプロイでエッジキャッシュが自動的に活用されます。
INP改善
メインスレッドを占有する重いJavaScript処理を分割・遅延実行することが基本です。不要なサードパーティスクリプトの削除・遅延読み込みへの切り替えも、INP改善に直結します。
CLS改善
画像・動画・広告枠には必ず幅と高さを明示的に指定します。aspect-ratioプロパティを使うことで、レスポンシブデザインを維持しながらレイアウトシフトを防ぐことができます。Webフォントの読み込みにはfont-display: optionalまたはswapを指定し、フォント切り替え時のずれを最小化します。
Next.jsとCore Web Vitalsの親和性
Next.jsはCore Web Vitalsの改善を意識して設計されたフレームワークです。
画像コンポーネント（next/image）は、WebP変換・サイズ最適化・遅延読み込み・サイズ指定の強制をデフォルトで処理します。フォント最適化（next/font）はGoogleフォントのセルフホスティングとプリロードを自動化し、CLSの原因となるフォントシフトを排除します。
加えて、App RouterによるRSC（React Server Components）の活用により、クライアント側に送信するJavaScriptの量を最小化でき、INPの改善にも寄与します。WordPressやその他のCMSと比較したときのパフォーマンス優位性は、こうした設計思想の積み重ねによるものです。
まとめ
Core Web VitalsはSEOの「加点要素」としてだけでなく、ユーザー体験の質を直接改善する指標として捉えることが重要です。スコアを上げることが目的ではなく、サイトを訪れたユーザーが快適に情報を得られる環境を整えることが本質です。
計測→原因特定→改善→再計測のサイクルを継続的に回すことが、長期的な検索評価の向上につながります。
技術的な改善対応や、Next.jsへの移行を検討している場合は、お気軽にご相談ください。
この記事はCreavePlus合同会社が提供しています。AI×WEB構築・DX推進に関するご相談はこちらから。