SEO対策

コアウェブバイタルとは？3つの指標と具体的な改善方法を徹底解説

ウェブサイトの表示速度が遅い、操作しようとすると画面がガタガタと動く、クリックしても反応が遅い…このような経験は誰もが一度はあるのではないでしょうか。実は、これらの問題はGoogleが2020年に発表した「コアウェブバイタル（Core Web Vitals）」という指標で測定され、SEOの重要な評価基準となっています。

コアウェブバイタルは、ユーザーがウェブページを快適に利用できるかを測る3つの重要な指標で構成されており、2021年6月からGoogleの検索ランキング要因として正式に採用されました。。当初は「FID（First Input Delay）」という指標が使われていましたが、2024年3月からは、より精度の高い「INP（Interaction to Next Paint）」という新しい指標に切り替わり、ユーザーの操作に対する反応速度をより正確に測定できるようになりました。

そこで本記事では、コアウェブバイタルの基本的な概念から、各指標の詳細な解説、SEOへの影響、そして具体的な改善方法まで、実践的な内容を網羅的に解説します。技術的な知識がない方でも理解できるよう、分かりやすい言葉で説明していきますので、ぜひ最後までお読みください。

記事執筆者：認定SEOコンサルタント　三田健司

目次

コアウェブバイタル（Core Web Vitals）とは

コアウェブバイタルとは、Googleが定めたウェブページのユーザーエクスペリエンス（UX）を測定する3つの主要な指標のことです。これらの指標は、ページの読み込み速度、操作への反応性、視覚的な安定性という、ユーザーが快適にウェブサイトを利用するために最も重要な要素を数値化したものです。

2025.05.01
UI/UXとは？違いから設計ポイント・改善方法まで徹底解説
UI/UXはデジタルプロダクトやサービスを開発する上で欠かせない重要な概念です。ユーザーがデジタル体験を通じて得られる満足度や使いやすさに...

なぜコアウェブバイタルが重要なのか

Googleは常にユーザーファーストの姿勢を貫いており、検索結果においてもユーザーにとって価値の高いページを上位に表示することを目指しています。コアウェブバイタルは、そのユーザー体験の質を客観的に測定する指標として開発されました。

実際、Google検索セントラルによると、コアウェブバイタルの基準を満たしているページは、満たしていないページと比較して以下のような成果が報告されています：

指標改善効果
直帰率24%減少
ページ滞在時間15%増加
コンバージョン率7%向上

ページエクスペリエンスシグナルとの関係

コアウェブバイタルは、Googleが評価する「ページエクスペリエンスシグナル」の一部です。ページエクスペリエンスシグナルには、コアウェブバイタル以外にも以下の4つの要素が含まれます：

  1. モバイルフレンドリー：スマートフォンでの表示・操作性
  2. HTTPS対応：セキュアな通信の実装
  3. セーフブラウジング：悪意のあるコンテンツの排除
  4. 全画面広告の適切な使用：ページを覆い隠すような大きな広告（インタースティシャル広告）の制限

これらすべての要素が組み合わさって、総合的なページエクスペリエンスの評価となります。

コアウェブバイタルの3つの主要指標

コアウェブバイタルは、LCP、INP（旧FID）、CLSという3つの指標で構成されています。それぞれの指標について、詳しく見ていきましょう。

LCP（Largest Contentful Paint）- 最大コンテンツの描画

LCPは、ページの読み込み開始から、画面に表示されている範囲内で最も大きなコンテンツ要素が表示されるまでの時間を測定します。簡単に言えば、「ページのメインコンテンツがどれくらい早く表示されるか」を示す指標です。

LCPの評価基準：

  • 良好：2.5秒以内
  • 改善が必要：2.5秒〜4.0秒
  • 不良：4.0秒超

LCPの測定対象となる要素：

  • <img>要素
  • <image>要素（SVG内）
  • <video>要素のポスター画像
  • CSSのbackground-imageで読み込まれる画像
  • テキストを含むブロックレベル要素

INP（Interaction to Next Paint）- 次の描画までの相互作用

前述のとおり2024年3月に正式採用されたINPは、ユーザーがページ上で行うすべての操作（クリック、タップ、キー入力）に対して、どれくらい素早く反応するかを測定します。

INPの評価基準：

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

INPがFIDより優れている点：

  • ページ滞在中のすべての操作を評価（FIDは最初の操作のみ）
  • より実際のユーザー体験に近い測定が可能
  • JavaScriptの処理時間も含めた総合的な評価

CLS（Cumulative Layout Shift）- 累積レイアウトシフト

CLSは、ページ読み込み中に発生する予期しないレイアウトのズレを測定します。例えば、記事を読んでいる最中に広告が突然表示されて、読んでいた箇所を見失ってしまうような体験を数値化したものです。

CLSの評価基準：

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

CLSスコアの計算式：

CLS = 影響を受けた面積の割合 × 移動距離の割合

コアウェブバイタルがSEOに与える影響

前述のとおり正式にランキング要因となったコアウェブバイタルですが、その影響度について正しく理解することが重要です。

Googleの公式見解

Googleのジョン・ミューラー氏は、コアウェブバイタルについて以下のように述べています：

「コアウェブバイタルは重要な要因ですが、コンテンツの関連性や品質が最も重要であることに変わりはありません。素晴らしいページ体験を提供しても、コンテンツが検索意図に合致していなければ上位表示は難しいでしょう。」

実際の影響度

実際のSEOへの影響について、以下の点を理解しておく必要があります：

  1. コンテンツの質が同程度の場合の判断基準
    • 複数のページが同じくらい良質なコンテンツを持っている場合、コアウェブバイタルの良し悪しが順位を決める要因になる
    • コンテンツ品質が圧倒的に優れていれば、コアウェブバイタルが不良でも上位表示の可能性あり
  2. 業界別の影響度の違い
    • ECサイト：購買体験に直結するため影響は大きい
    • ニュースサイト：最新情報をいち早く届けることが重視されるためある程度の影響あり
    • 企業サイト：情報の正確性が優先されるため影響は小さい
  3. モバイル検索での重要性
    • モバイル検索では特に重要視される傾向
    • 2025年現在、検索の約70%がモバイルデバイスから

コアウェブバイタルの測定方法

正確な測定なくして改善はありません。ここでは、主要な測定ツールとその使い方を解説します。

PageSpeed Insights

PageSpeed Insights

PageSpeed Insightsは、Googleが提供する最も基本的かつ重要な測定ツールです。

使い方：

  1. URLを入力して「分析」をクリック
  2. モバイルとデスクトップの両方の結果を確認
  3. 「実際のユーザーの環境で評価する」セクションでコアウェブバイタルを確認

PageSpeed Insightsの特徴：

  • フィールドデータ（実際のユーザーデータ）とラボデータ（シミュレーション）の両方を表示
  • 具体的な改善提案を日本語で提供
  • 改善による推定効果も表示

Googleサーチコンソール

ウェブに関する主な指標

Googleサーチコンソールでは、サイト全体のコアウェブバイタルの状況を把握できます。

確認手順：

  1. 左メニューの「ウェブに関する主な指標」をクリック
  2. モバイルとPCそれぞれのレポートを確認
  3. 「不良」「改善が必要」のURLを特定

Search Consoleの活用ポイント：

  • サイト全体の傾向を把握
  • 問題のあるページを優先順位付け
  • 改善後の効果測定

Chrome DevTools

開発者向けの詳細な分析には、Chrome DevToolsが最適です。

Chrome DevTools

使用方法：

  1. ChromeでF12キーを押してDevToolsを開く
  2. 「Lighthouse」タブを選択
  3. 「Generate report」をクリック

LCPの具体的な改善方法

LCPの改善は、多くのサイトで最初に取り組むべき課題です。以下、実践的な改善方法を優先度順に解説します。

1. 画像の最適化（優先度：高）

画像はLCPの最大の要因となることが多いため、最優先で対策すべきです。

次世代フォーマットへの変換：

WebP（ウェッピー）という新しい画像形式を使うことで、画質を保ちながらファイルサイズを大幅に削減できます。以下のコードをHTMLファイルの画像を表示したい場所に記述します：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="説明文" loading="lazy">
</picture>

コードの意味：

  • <picture>：複数の画像形式を指定できるタグ
  • srcset="image.webp"：WebP形式の画像（対応ブラウザで優先表示）
  • srcset="image.jpg"：JPEG形式の画像（WebP非対応ブラウザ用）
  • loading="lazy"：画面に表示される直前まで読み込みを遅延する設定

画像圧縮の目安：

画像タイプ推奨サイズ圧縮率
ヒーローイメージ100KB以下85%
商品画像50KB以下80%
サムネイル20KB以下75%
2023.08.09
SEOに最適な画像サイズと最適化方法 | 圧縮ツール・プラグイン徹底解説
画像はWebサイトのSEO対策において非常に重要な要素です。適切な画像サイズを設定することで、ページの読み込み速度が向上し、ユーザーエクス...

2. サーバー応答時間の短縮（優先度：高）

サーバーの応答時間（TTFB）は、すべての読み込みの起点となるため重要です。

改善施策：

  1. CDN（コンテンツ配信ネットワーク）の導入 CDNとは、世界中にサーバーを配置し、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。
  2. キャッシュの最適化 キャッシュとは、一度読み込んだデータを保存して、次回以降の読み込みを高速化する仕組みです。 以下のコードを、サーバーのルートディレクトリにある「.htaccess」ファイルに追加します：
<!-- .htaccessファイルに記述（Apacheサーバーの場合） -->
<!-- 画像ファイルを1年間キャッシュする設定 -->
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
</IfModule>

注意： .htaccessファイルの編集は、必ずバックアップを取ってから行ってください。

3. JavaScriptとCSSの最適化（優先度：中）

ページの表示を遅らせる原因となるJavaScriptとCSSを最適化します。

Critical CSS（重要なCSS）の実装：

ページの最初に表示される部分（ファーストビュー）に必要なCSSだけを先に読み込む方法です。 以下のコードをHTMLの<head>タグ内に記述します：

html<!-- HTMLファイルの<head>タグ内に記述 -->
<style>
  /* ファーストビューで必要な最小限のスタイル */
  body { 
    margin: 0; 
    font-family: sans-serif; 
  }
  .hero { 
    height: 100vh;  /* 画面の高さいっぱい */
    background: #f0f0f0;  /* 背景色 */
  }
</style>

<!-- 残りのCSSは後から読み込む -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

4. リソースヒントの活用（優先度：中）

ブラウザに「次に何が必要になるか」を事前に伝えることで、読み込みを高速化できます。 以下のコードをHTMLの<head>タグ内に記述します：

html<!-- HTMLファイルの<head>タグ内に記述 -->

<!-- フォントファイルを事前に読み込む指示 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- Googleフォントのサーバーに事前接続 -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 次のページで使うJavaScriptを事前に取得 -->
<link rel="prefetch" href="/js/secondary.js">

各指示の意味：

  • preload：このページですぐに必要なファイルを優先的に読み込む
  • preconnect：外部サーバーへの接続を事前に確立する
  • prefetch：次のページで必要になりそうなファイルを余裕があるときに取得

INPの具体的な改善方法

INPの改善は、JavaScriptの最適化が中心となります。2024年3月の正式採用以降、多くのサイトで課題となっています。

1. 長いタスクの分割（優先度：高）

JavaScriptで重い処理を行う場合、50ミリ秒を超える処理は分割することが推奨されます。

なぜ分割が必要か： 長い処理の間、ブラウザは他の操作（クリックなど）に反応できなくなるため、ユーザーは「フリーズした」と感じます。

実装例（JavaScriptファイルに記述）：

javascript// 改善前：大量のデータを一度に処理（ブラウザがフリーズする）
function processLargeArray(array) {
  array.forEach(item => {
    // 重い計算処理
    complexCalculation(item);
  });
}

// 改善後：100個ずつに分けて処理（ブラウザが反応できる）
async function processLargeArrayOptimized(array) {
  const chunkSize = 100;  // 一度に処理する個数
  
  for (let i = 0; i < array.length; i += chunkSize) {
    // 100個ずつ取り出して処理
    const chunk = array.slice(i, i + chunkSize);
    chunk.forEach(item => complexCalculation(item));
    
    // 一瞬ブラウザに制御を返す（他の操作に反応できるようにする）
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

2. イベントリスナーの最適化（優先度：高）

スクロールやマウス移動など、頻繁に発生するイベントを制御します。

デバウンス（間引き処理）の実装：

以下のコードをJavaScriptファイルに記述します：

javascript// デバウンス関数：指定した時間内に何度呼ばれても、最後の1回だけ実行
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 使用例：スクロールイベントを100ミリ秒に1回だけ実行
window.addEventListener('scroll', debounce(() => {
  // ここにスクロール時の処理を記述
  console.log('スクロールされました');
}, 100));

効果： スクロール中に何百回も処理が実行されるのを防ぎ、パフォーマンスを大幅に改善します。

3. Web Workersの活用（優先度：中）

重い計算をバックグラウンドで実行し、メイン画面の動作を妨げない方法です。

実装方法：

  1. まず、計算処理を行う別ファイル「worker.js」を作成：
javascript// worker.js（別ファイルとして作成）
self.addEventListener('message', (e) => {
  // 受け取ったデータで計算を実行
  const result = heavyCalculation(e.data);
  // 計算結果を返す
  self.postMessage(result);
});
  1. メインのJavaScriptファイルから呼び出し：
javascript// main.js（メインのJavaScriptファイル）
// Web Workerを作成
const worker = new Worker('worker.js');

// データを送って計算を依頼
worker.postMessage(largeData);

// 計算結果を受け取る
worker.addEventListener('message', (e) => {
  console.log('計算結果:', e.data);
});

メリット： 重い計算中でも、ユーザーのクリックやスクロールに即座に反応できます。

4. 遅延読み込みの実装（優先度：中）

画面に表示されるまでJavaScriptの実行を遅らせる方法です。

実装例（JavaScriptファイルに記述）：

javascript// 画面内に要素が表示されたときに処理を実行する仕組み
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 要素が画面内に入ったら
    if (entry.isIntersecting) {
      // その要素に対する処理を実行
      loadHeavyFeature(entry.target);
      // 監視を終了
      observer.unobserve(entry.target);
    }
  });
});

// class="lazy-load"を持つすべての要素を監視開始
document.querySelectorAll('.lazy-load').forEach(el => {
  observer.observe(el);
});

使い方： HTMLでclass="lazy-load"を付けた要素が画面に表示されたときだけ、重い処理を実行します。

CLSの具体的な改善方法

CLSの改善は、レイアウトの安定性を確保することが中心です。

1. 画像・動画のサイズ指定（優先度：高）

すべての画像と動画要素に明示的なサイズを指定します（LCPセクションで説明した最適化と併せて実施）。

HTMLでの記述方法：

html<!-- 良い例：幅と高さを明確に指定 -->
<img src="product.jpg" width="300" height="200" alt="商品画像">

<!-- スマートフォン対応（レスポンシブ）の場合 -->
<!-- HTMLファイルの<style>タグ内、またはCSSファイルに記述 -->
<style>
  .responsive-image {
    width: 100%;           /* 画面幅に合わせる */
    height: auto;          /* 縦横比を維持 */
    aspect-ratio: 16 / 9;  /* 縦横比を16:9に固定 */
  }
</style>

なぜ重要か： サイズを指定しないと、画像が読み込まれた瞬間にページが大きくずれます。

2. 広告・埋め込みコンテンツの領域確保（優先度：高）

広告やSNSの埋め込みなど、後から表示されるコンテンツの場所を最初から確保します。

CSSファイルまたは<style>タグ内に記述：

css/* 広告スペースを事前に確保するスタイル */
.ad-container {
  min-height: 280px;      /* 最小の高さを280ピクセルに設定 */
  background: #f0f0f0;    /* 薄いグレーの背景色 */
  display: flex;          /* 中央揃えのための設定 */
  align-items: center;    /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
}

/* 広告が読み込まれるまで「広告」と表示 */
.ad-container::before {
  content: "広告";
  color: #999;
}

効果： 広告が表示されても、ページがガタッとずれることがなくなります。

3. Webフォントの最適化（優先度：中）

特殊なフォントの読み込みによるレイアウトのずれを防ぎます。

CSSファイルの最初の方に記述：

css/* Webフォントの定義 */
@font-face {
  font-family: 'CustomFont';                    /* フォントの名前 */
  src: url('/fonts/custom.woff2') format('woff2'); /* フォントファイルの場所 */
  font-display: swap;  /* 読み込み中は標準フォントを表示し、後で切り替える */
}

/* フォントの使用 */
body {
  /* カスタムフォント → 日本語フォント → どれもなければ標準フォント */
  font-family: 'CustomFont', 'Hiragino Sans', sans-serif;
  font-size-adjust: 0.5;  /* フォント切り替え時のサイズ調整 */
}

ポイント： font-display: swapにより、フォント読み込み中も文字が表示され、読み込み後にスムーズに切り替わります。

4. アニメーションの最適化（優先度：低）

動きのあるデザインを、レイアウトを崩さない方法で実装します。

CSSファイルまたは<style>タグ内に記述：

css/* 悪い例：位置を直接変更（レイアウトが崩れる） */
.bad-animation {
  animation: slide 1s infinite;
}
@keyframes slide {
  to { left: 100px; }  /* leftプロパティの変更はレイアウトに影響 */
}

/* 良い例：transformを使用（レイアウトに影響しない） */
.good-animation {
  animation: slideTransform 1s infinite;
}
@keyframes slideTransform {
  to { transform: translateX(100px); }  /* transformは見た目だけ変更 */
}

理由： transformは要素の見た目だけを変更し、周りの要素に影響を与えません。

業界別コアウェブバイタル最適化戦略

サイトの種類によって、重視すべき指標と改善アプローチが異なります。

ECサイトの最適化戦略

ECサイトでは、商品の表示速度と操作性が売上に直結します。

優先順位：

  1. LCP：商品画像の高速表示
  2. INP：カート操作のスムーズさ
  3. CLS：商品一覧の安定性

具体的施策：

  • 商品画像の遅延読み込み実装
  • カート更新のAjax化
  • 無限スクロールではなくページネーション採用

メディア・ブログサイトの最適化戦略

コンテンツの読みやすさと広告収益のバランスが重要です。

優先順位：

  1. CLS：読書体験の維持
  2. LCP：記事本文の高速表示
  3. INP：コメント・シェア機能の応答性

具体的施策：

  • 広告スペースの事前確保
  • 記事本文の優先読み込み
  • 画像の段階的読み込み

コーポレートサイトの最適化戦略

信頼性とブランドイメージの維持が最優先です。

優先順位：

  1. LCP：ファーストビューの完成度
  2. CLS：プロフェッショナルな印象
  3. INP：問い合わせフォームの快適性

コアウェブバイタル改善のROI算出方法

改善投資の効果を定量的に評価することが重要です。

改善効果の計算式

ROI = (改善後の収益 - 改善前の収益 - 改善コスト) / 改善コスト × 100

期待効果の目安

改善レベル直帰率の改善CVRの改善収益への影響不良→改善が必要-15%+3%+5-10%改善が必要→良好-10%+5%+10-20%すべて良好達成-25%+10%+20-40%

まとめ：コアウェブバイタル改善の実践ステップ

コアウェブバイタルの改善は、一朝一夕では達成できません。しかし、計画的に取り組むことで、確実に成果を上げることができます。

改善の推奨ステップ

  1. 現状分析（1週間）
    • 前述のPageSpeed Insightsでページ測定
    • Googleサーチコンソールでサイト全体の把握
    • 競合サイトとの比較分析
  2. 優先順位付け（3日）
    • トラフィックの多いページから着手
    • ビジネスインパクトの大きい指標を優先
    • 改善難易度と効果のバランス考慮
  3. 段階的実装（1-3ヶ月）
    • すぐに効果が出る簡単な改善から着手（画像圧縮など）
    • 本格的な改修（JavaScript最適化など）
    • 継続的なモニタリング
  4. 効果測定と改善（継続的）
    • 月次でのレポート作成
    • A/Bテストによる検証
    • 新たな課題への対応

コアウェブバイタルは、単なる技術的な指標ではなく、ユーザー体験を向上させるための重要な指針です。SEOの観点だけでなく、ビジネス成果の向上という視点でも取り組むことで、より大きな成果を得ることができるでしょう。

本記事で紹介した改善方法を参考に、ぜひ自社サイトのコアウェブバイタル改善に取り組んでみてください。技術的な実装で困った場合は、専門家への相談も検討することをお勧めします。ユーザーにとって快適なウェブ体験を提供することが、最終的にはビジネスの成功につながるのです。

2025.05.01
UI/UXとは？違いから設計ポイント・改善方法まで徹底解説
UI/UXはデジタルプロダクトやサービスを開発する上で欠かせない重要な概念です。ユーザーがデジタル体験を通じて得られる満足度や使いやすさに...

関連記事

コメント

この記事へのコメントはありません。

TOP