SEO

Core Web Vitals

Core Web Vitalsとは、Googleが定義する3つの主要なユーザー体験指標であり、Webページの読み込み速度・応答性・視覚的な安定性を数値化したものです。

Core Web Vitalsとは、Googleが定義する3つの主要なユーザー体験指標であり、Webページの読み込み速度・応答性・視覚的な安定性を数値化したものです。

なぜ重要か

Core Web Vitalsは、GoogleのPage Experienceアルゴリズムに含まれる公式の検索ランキング要因です。2025〜2026年の業界分析によると、全体のランキングシグナルのおよそ10〜15%を占めるとされています。競争の激しいキーワードでは、3つの指標すべてを満たすサイトが検索での可視性を8〜15%向上させたという報告もあります。一方で、2025年のWeb Almanacのデータによると、3つのしきい値すべてを通過しているのはモバイルページで約48%、デスクトップページで約56%にすぎません。つまりCore Web Vitalsの最適化は、競合に対して優位性を獲得する現実的なチャンスとなるのです。

3つの中核指標

LCP(Largest Contentful Paint): 読み込みパフォーマンス

ページの主要なコンテンツ(最も大きな画像またはテキストブロック)が画面に描画されるまでにかかる時間を測定します。

評価しきい値
良好<= 2.5秒
改善が必要2.5秒 〜 4.0秒
不良> 4.0秒

INP(Interaction to Next Paint): 応答性

ユーザーの操作(クリック、タップ、キーボード入力など)から、実際に画面が更新されるまでの遅延を測定します。INPは2024年3月にFID(First Input Delay)に代わって正式にCore Web Vitalsとなり、最初の入力だけでなくページのライフサイクル全体にわたる応答性を評価します。

評価しきい値
良好<= 200ミリ秒
改善が必要200ミリ秒 〜 500ミリ秒
不良> 500ミリ秒

CLS(Cumulative Layout Shift): 視覚的な安定性

ページの読み込み中にレイアウトが予期せずずれる度合いを測定します。CLSスコアが高くなる一般的な原因としては、広告や画像の読み込みが遅れてボタンの位置が動いてしまうことなどが挙げられます。

評価しきい値
良好<= 0.1
改善が必要0.1 〜 0.25
不良> 0.25

Core Web Vitalsの評価に合格したとみなされるには、3つの指標すべてが、ページ訪問の少なくとも75%で「良好」のしきい値を満たしている必要があります。

最適化の方法

LCPの改善

  • LCPの対象となる画像に fetchpriority="high" 属性を付与し、<link rel="preload"> でプリロードします。
  • WebPやAVIFなどの次世代画像フォーマットを使用してファイルサイズを削減します。
  • CDN(コンテンツ配信ネットワーク)を活用してサーバーの応答時間(TTFB)を短縮します。
  • サーバー側のキャッシュを実装し、データベースのクエリを最適化します。

INPの改善

  • メインスレッドをブロックする非必須のJavaScriptを deferasync で遅延読み込みします。
  • 長いタスクを小さな単位に分割し、ブラウザがユーザー入力により早く応答できるようにします。
  • 不要なサードパーティのスクリプトを削除するか、読み込みタイミングを遅らせます。

CLSの改善

  • 画像や動画の要素に widthheight 属性を指定し、ブラウザがあらかじめスペースを確保できるようにします。
  • Webフォントの読み込みでは font-display: swap<link rel="preload"> と併用し、レイアウトのずれを防ぎます。
  • 既存コンテンツの上にバナーや広告を動的に挿入することを避けます。

計測ツール

ツール種類説明
Google Search Console(Core Web Vitalsレポート)フィールドデータサイト全体のCWVの状態をURLごとにグループ化して確認できます
PageSpeed Insightsフィールド + ラボデータCrUXデータとLighthouseの分析を同時に提供します
Lighthouse(Chrome DevToolsに内蔵)ラボデータ開発中にパフォーマンスの問題を診断し、改善の推奨事項を提供します
Web Vitals Chrome拡張機能リアルタイム監視閲覧中にLCP・INP・CLSをリアルタイムで確認できます
WebPageTestラボデータさまざまなネットワーク条件やデバイス環境にわたって詳細なテストを実行します
Google Analytics 4フィールドデータ実際のユーザーのCWVデータを収集・分析します

フィールドデータは実際の訪問者の環境を反映しており、Googleの検索ランキングに直接使用されるデータです。ラボデータは管理された環境で測定された値であり、診断やデバッグに役立ちます。両方の種類を併用するのが最も効果的なアプローチです。

Sources:

関連するinblogの記事

inblogがどう役立つか

inblogはNext.jsのSSRをベースに構築されており、最適化されたCore Web Vitalsのパフォーマンスを提供します。