N.N. LLC. ロゴ - 千葉県船橋市のIT企業N.N. LLC.
技術ブログ

Core Web Vitalsの改善方法と検索順位への影響

7分で読めます
Core Web Vitalsの改善方法と検索順位への影響

Core Web Vitalsとは

Core Web Vitals(コアウェブバイタル)は、Googleが定義するWebページのユーザー体験を測定する指標群です。2021年にランキング要因として導入されて以来、ページエクスペリエンスシグナルの中核として検索順位に影響を与え続けています。2026年現在、Core Web Vitalsは3つの指標で構成されています。

これらの指標は実際のユーザーデータ(フィールドデータ)に基づいて測定され、Chrome User Experience Report(CrUX)を通じてGoogleに報告されます。つまり、ラボ環境でのテスト結果だけでなく、実際のユーザーが体験しているパフォーマンスが評価対象となります。

3つの指標の詳細

LCP(Largest Contentful Paint)

LCPは、ページの主要なコンテンツが表示されるまでの時間を測定します。具体的には、ビューポート内で最も大きな画像やテキストブロックがレンダリングされるタイミングです。

  • 良好:2.5秒以内
  • 改善が必要:2.5秒〜4秒
  • 不良:4秒超

LCPに影響する主な要素は、サーバーの応答時間(TTFB)、レンダリングブロックリソース(CSS・JavaScript)、リソースの読み込み時間、クライアントサイドレンダリングです。

INP(Interaction to Next Paint)

INP(Interaction to Next Paint)は、2024年3月にFID(First Input Delay)に代わって導入された指標です。ユーザーがページ上で行うクリック、タップ、キーボード入力などのインタラクションに対して、ブラウザが視覚的な応答を返すまでの時間を包括的に測定します。

  • 良好:200ミリ秒以内
  • 改善が必要:200ミリ秒〜500ミリ秒
  • 不良:500ミリ秒超

FIDがページロード中の最初のインタラクションのみを測定していたのに対し、INPはページライフサイクル全体を通じたすべてのインタラクションを対象とするため、より実態に即した応答性の評価が可能です。

CLS(Cumulative Layout Shift)

CLSは、ページの読み込み中やインタラクション中に発生する予期しないレイアウトのずれ(レイアウトシフト)を測定します。広告や画像の遅延読み込みによるコンテンツの飛び跳ねなどが該当します。

  • 良好:0.1以下
  • 改善が必要:0.1〜0.25
  • 不良:0.25超

Core Web Vitalsの改善方法

LCPの改善

LCPを改善するための具体的な施策を優先度順に紹介します。

  1. サーバー応答時間の短縮:CDNの活用、サーバーキャッシュの最適化、データベースクエリの効率化
  2. レンダリングブロックリソースの排除:クリティカルCSSのインライン化、JavaScriptの非同期読み込み(async/defer属性)
  3. 画像の最適化:WebPやAVIF形式の採用、適切なサイズ指定、lazy loadingの活用
  4. プリロード指定:LCP要素となる画像やフォントに<link rel="preload">を設定
<!-- LCP画像のプリロード -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- JavaScriptの非同期読み込み -->
<script src="analytics.js" defer></script>

INPの改善

INPの改善には、メインスレッドの処理負荷を軽減することが鍵です。

  • 長いタスクの分割:50ミリ秒を超えるJavaScriptタスクをrequestIdleCallbackscheduler.yield()で分割
  • 不要なJavaScriptの削減:未使用のコードを除去し、バンドルサイズを最小化
  • イベントハンドラの最適化:デバウンスやスロットリングの適用、パッシブイベントリスナーの活用
  • Web Workerの活用:重い計算処理をメインスレッドから分離

CLSの改善

CLSを改善するためには、レイアウトの安定性を確保する設計が必要です。

  • 画像・動画のサイズ指定:width/height属性やCSS aspect-ratioを必ず設定
  • 広告枠の事前確保:広告スペースをCSSで事前に確保し、読み込み時のずれを防止
  • Webフォントの最適化:font-display: swapの設定とフォントのプリロード
  • 動的コンテンツの挿入位置:既存コンテンツの上に要素を挿入しない設計

検索順位への実際の影響

Core Web Vitalsは「タイブレーカー」として機能するとGoogleは説明しています。つまり、コンテンツの関連性や品質が同程度のページ同士では、Core Web Vitalsの優れたページが上位に表示される可能性が高くなります。コンテンツの品質が最も重要なランキング要因であることに変わりはありませんが、競争の激しいキーワードでは技術的な最適化が差を生む場面が増えています。

Core Web Vitalsの状態はGoogle Search Consoleの「ウェブに関する主な指標」レポートで確認できます。定期的にモニタリングし、問題があるページを早期に特定・改善することが重要です。PageSpeed InsightsやLighthouseを使ったラボテストも併用し、改善施策の効果を検証しましょう。

Core Web Vitals
LCP
INP
CLS
ページ速度
SEO

関連記事