Core Web Vitals
Googleが定めたWebページのユーザー体験を評価する3つの主要指標（LCP・CLS・INP）。SEOにも影響。
Core Web Vitalsとは
Core Web Vitals（コアウェブバイタル）は、Googleが「Webページのユーザー体験を測るうえで特に重要」と定めた3つの指標の総称です。2021年からGoogle検索のランキング要因に組み込まれており、SEOを考えるうえで避けて通れない存在になっています。
ただし、正直に言うと、Core Web Vitalsだけで検索順位が劇的に変わるわけではありません。コンテンツの質や被リンクの方がはるかに影響が大きいです。とはいえ、同程度の品質のページが競っている場合には差がつく要因になりますし、何よりユーザー体験の向上そのものがビジネスにプラスになります。ページが遅いサイトからはユーザーが離脱する——これは誰もが経験的に知っていることです。
3つの指標
LCP（Largest Contentful Paint）
ページの読み込みパフォーマンスを測る指標です。ビューポート内に表示される最も大きなコンテンツ要素（画像、動画、テキストブロックなど）が描画されるまでの時間を測定します。- 良好: 2.5秒以下
- 改善が必要: 2.5秒〜4.0秒
- 不良: 4.0秒超
LCPが遅くなる主な原因は、大きな画像の未最適化、サーバーの応答時間が遅い、レンダリングをブロックするJavaScript/CSSの存在です。
CLS（Cumulative Layout Shift）
視覚的な安定性を測る指標です。ページの読み込み中にレイアウトがどれだけ「ガタつく」かを数値化します。広告が遅れて表示されてボタンの位置がずれた結果、意図しないリンクをクリックしてしまった——こういう体験、ありますよね。それがCLSです。- 良好: 0.1以下
- 改善が必要: 0.1〜0.25
- 不良: 0.25超
CLSを悪化させる主な原因は、サイズ指定のない画像や動画、動的に挿入されるコンテンツ（広告バナーなど）、Webフォントの読み込みによるテキストのちらつきです。
INP（Interaction to Next Paint）
応答性を測る指標で、2024年3月にFID（First Input Delay）に代わって導入されました。ユーザーがページ上で行うすべてのインタラクション（クリック、タップ、キー入力）のうち、最も遅い応答時間を測定します。FIDが「最初のインタラクションだけ」を測っていたのに対し、INPはページ全体のインタラクティブ性を評価する、より包括的な指標です。- 良好: 200ミリ秒以下
- 改善が必要: 200〜500ミリ秒
- 不良: 500ミリ秒超
INPが悪化する原因は、重いJavaScriptの実行、メインスレッドのブロック、非効率なイベントハンドラなどです。
測定方法
Core Web Vitalsを測定するツールはいくつかあります。
フィールドデータ（実ユーザーデータ）:
- Google Search Console: サイト全体のCore Web Vitals状況を確認できる。最も信頼できるデータソース。
- Chrome UX Report（CrUX）: Chromeユーザーの実際の利用データに基づく指標。
- PageSpeed Insights: URLを入力するとフィールドデータとラボデータの両方を表示。
ラボデータ（シミュレーション）:
- Lighthouse: Chrome DevToolsに内蔵。開発中のパフォーマンスチェックに便利。
- WebPageTest: より詳細なパフォーマンス分析が可能。
SEOの観点では、フィールドデータ（実ユーザーのデータ）がGoogleの検索ランキングに使われます。ラボデータはあくまで開発・デバッグ用の参考値です。
改善のためのポイント
LCP改善:
- 画像をWebPやAVIF形式に変換し、適切なサイズで配信する
- CDNを活用してサーバー応答時間を短縮する
- クリティカルCSSをインライン化し、不要なJavaScriptの読み込みを遅延させる
- Next.jsのImageコンポーネントなど、フレームワークの最適化機能を活用する
CLS改善:
- 画像や動画にwidth/height属性を必ず指定する（またはaspect-ratioを使用）
- 広告枠のスペースを事前に確保する
- font-display: swapを使い、Webフォント読み込み中のレイアウトシフトを防ぐ
INP改善:
- 重い処理をWeb Workerに移す
- 長いタスクを分割する（requestIdleCallback、schedulerAPIの活用）
- イベントハンドラ内の処理を最小限にする
関連サービス
SwaaabではNext.jsを使ったWebサイト構築を得意としており、Core Web Vitalsの最適化を標準的なワークフローに組み込んでいます。