Core Web Vitalsとは？3つの指標と概要を解説

10 min 4 views

Webサイトの表示速度やユーザー体験は、今やSEO対策において無視できない重要な要素となっています。その中でも特に注目されているのが「Core Web Vitals（コアウェブバイタル）」です。

Googleが提唱するこの指標は、2021年から検索ランキングの要因として導入され、現在では多くのWebサイト運営者が注目する重要な評価基準となっています。

本記事では、Core Web Vitalsとは何か、その構成要素である3つの指標、SEOへの影響、そして具体的な改善方法まで、初心者の方にもわかりやすく詳しく解説していきます。

目次

Core Web Vitalsとは？基本的な概念を理解しよう

Core Web Vitals（コアウェブバイタル）とは、Webサイトのユーザー体験（UX）を数値化するためにGoogleが設定した3つの重要指標のことです。

そもそも「Web Vitals」とは、Webサイトの健全性を示す指標の総称で、その中でも特にユーザー体験に直結する核となる部分が「Core Web Vitals」と呼ばれています。

簡単に言えば、「ユーザーがWebサイトを快適に利用できるかどうか」を測定するための指標だと考えてください。

なぜCore Web Vitalsが重要なのか

現代のWebサイト運営において、Core Web Vitalsが重要視される理由は以下の通りです：

  1. Googleの検索アルゴリズムに組み込まれている
    • 2021年から検索ランキングの要因として導入
    • 2022年からはPC版検索結果にも適用
  2. ユーザー体験の質を客観的に測定できる
    • 数値化されているため改善目標が明確
    • 競合サイトとの比較が容易
  3. ビジネス成果に直結する
    • 表示速度の改善は離脱率の低下につながる
    • 操作性の向上はコンバージョン率の向上に貢献

Core Web Vitalsの3つの指標を詳しく解説

Core Web Vitalsは、以下の3つの指標で構成されています。それぞれの指標について、詳しく見ていきましょう。

1. LCP（Largest Contentful Paint）：読み込み速度の指標

LCPとは、ページ内で最も大きなコンテンツが表示されるまでの時間を測定する指標です。

LCPの評価基準

  • 良好（Good）: 2.5秒以内
  • 改善が必要（Needs Improvement）: 2.5秒～4.0秒
  • 不良（Poor）: 4.0秒以上

LCPの対象となるコンテンツ

LCPで測定される「最も大きなコンテンツ」には、以下のようなものが含まれます：

  • 画像（<img>タグ）
  • 動画（<video>タグ）
  • 背景画像
  • テキストブロック

LCPが重要な理由

ユーザーは、ページにアクセスした際に最初に目につく大きなコンテンツで、そのページの価値を判断します。この部分の表示が遅いと、ユーザーは「このサイトは重い」と感じ、離脱してしまう可能性が高くなります。

2. INP（Interaction to Next Paint）：応答性の指標

INPとは、ユーザーの操作（クリック、タップ、キーボード入力など）に対してページが視覚的に反応するまでの時間を測定する指標です。

INPの評価基準

  • 良好（Good）: 200ミリ秒以内
  • 改善が必要（Needs Improvement）: 200ミリ秒～500ミリ秒
  • 不良（Poor）: 500ミリ秒以上

INPの測定対象となるインタラクション

  • マウスクリック
  • タッチスクリーンでのタップ
  • キーボード入力

※ホバーやスクロールは含まれません

FIDからINPへの変更（2024年3月）

以前は「FID（First Input Delay）」という指標が使用されていましたが、2024年3月12日にINPに変更されました。

FIDとINPの違い：

  • FID: 最初のインタラクションのみを測定
  • INP: ページ滞在中のすべてのインタラクションを測定

この変更により、より包括的にユーザー体験を評価できるようになりました。

3. CLS（Cumulative Layout Shift）：視覚的安定性の指標

CLSとは、ページの読み込み中に発生するレイアウトの予期しない移動を数値化した指標です。

CLSの評価基準

  • 良好（Good）: 0.1未満
  • 改善が必要（Needs Improvement）: 0.1～0.25
  • 不良（Poor）: 0.25以上

CLSの計算方法

CLSは以下の式で計算されます：

CLS = 影響を受けた表示領域の比率 × 移動距離の比率

CLSが悪化する典型的な例

  1. 画像の遅延読み込み
    • サイズが指定されていない画像が後から表示される
    • 既存のコンテンツが押し下げられる
  2. 広告の動的表示
    • 広告領域が確保されていない
    • 広告が表示されるとレイアウトが崩れる
  3. Webフォントの読み込み
    • フォントが変更されることでテキストサイズが変わる
    • レイアウトが微調整される

Core Web VitalsがSEOに与える影響

Core Web VitalsがSEOに与える影響について、正確に理解することは重要です。

Googleの公式見解

Googleは、Core Web VitalsとSEOの関係について以下のように説明しています：

“ページエクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページエクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページエクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページエクスペリエンスが検索ランキングで非常に重要になります。”

実際のSEOへの影響度

この公式見解から読み取れるポイントは：

  1. コンテンツの質が最優先
    • Core Web Vitalsが良好でもコンテンツが低品質なら上位表示されない
    • まずは有用で質の高いコンテンツ作成が重要
  2. 同質のコンテンツ間での差別化要因
    • 競合サイトと内容が似ている場合にCore Web Vitalsが影響
    • 競争が激しいキーワードほど重要性が高い
  3. ユーザー体験の向上が本質
    • SEO対策のためだけでなく、ユーザーのためにも改善すべき
    • 長期的なサイト価値の向上につながる

Google John Mueller氏の発言

Googleのジョン・ミューラー氏も、Core Web Vitalsについて以下のように述べています：

「SEOのためだけに過度にスコア向上を目指す必要はない。完璧なスコアを目指すのは技術的なチャレンジとしては面白いが、順位に大きな影響を与えるわけではない」

つまり、Core Web Vitalsは重要だが、過度に神経質になる必要はないというのが現実的な捉え方です。

Core Web Vitalsの測定方法と主要ツール

Core Web Vitalsの改善に取り組む前に、現在の状況を正確に把握することが重要です。ここでは、主要な測定ツールとその使い方を詳しく解説します。

1. Google Search Console（サーチコンソール）

最も基本的で重要な測定ツールです。

使用方法

  1. Google Search Consoleにログイン
  2. 左メニューから「ウェブに関する主な指標」を選択
  3. モバイル・PC別にCore Web Vitalsの状況を確認

特徴

  • サイト全体の状況を把握できる
  • 問題のあるページが自動で検出される
  • 「良好」「改善が必要」「不良」の3段階で評価
  • 改善後の効果測定も可能

2. PageSpeed Insights

個別ページの詳細分析に最適なツールです。

使用方法

  1. PageSpeed Insightsにアクセス
  2. 測定したいURLを入力
  3. 「分析」をクリック

特徴

  • 具体的な改善提案が得られる
  • モバイル・PC両方の結果を確認可能
  • 実際のユーザーデータ（フィールドデータ）とラボデータの両方を表示
  • 100点満点でスコア化

3. Chrome DevTools（Lighthouse）

開発者向けの高度な分析が可能です。

使用方法

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

特徴

  • 詳細な技術的分析が可能
  • パフォーマンス、アクセシビリティ、SEOなど多角的評価
  • 改善点の優先順位が明確
  • 開発段階での測定に適している

4. Web Vitals Chrome拡張機能

リアルタイムでの測定に便利です。

使用方法

  1. Chrome Web Storeから「Web Vitals」拡張機能をインストール
  2. 測定したいページを開く
  3. 拡張機能アイコンをクリック

特徴

  • リアルタイム測定が可能
  • 簡単な操作で即座に結果を確認
  • 複数ページの比較が容易
  • 日常的な監視に適している

LCP（Largest Contentful Paint）の改善方法

LCPは、Core Web Vitalsの中でも特に問題が発生しやすい指標です。ここでは、効果的な改善方法を詳しく解説します。

LCPが悪化する主な原因

  1. サーバーの応答時間が遅い
  2. 画像や動画のファイルサイズが大きい
  3. JavaScriptやCSSがレンダリングをブロックしている
  4. ユーザーのデバイスやネットワーク環境が低速

具体的な改善方法

1. 画像の最適化

最も効果的な改善方法の一つです。

次世代画像フォーマットの活用

  • WebP形式への変換（Googleが推奨）
  • AVIF形式の活用（さらに高圧縮）
  • 従来のJPEG/PNGとの比較で30-50%のファイルサイズ削減が可能

画像圧縮ツールの活用

  • TinyPNG（オンラインツール）
  • ImageOptim（Mac用）
  • Squoosh（Google製オンラインツール）

実装例：

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

2. 画像の遅延読み込み

オフスクリーン画像の遅延読み込みを実装します。

Copy<img src="image.jpg" loading="lazy" alt="説明文">

3. サーバー応答時間の改善

高速なサーバー環境への移行

  • SSD搭載サーバーの選択
  • CDN（Content Delivery Network）の活用
  • レスポンシブな共有サーバーから専用サーバーへの移行

例えば、私たちLandingHub（https://www.landinghub.net/）でも、高速なサーバー環境を提供することで、お客様のCore Web Vitalsスコア改善をサポートしています。

4. CSS・JavaScriptの最適化

クリティカルパスの最適化

  • 初期表示に必要なCSSのインライン化
  • 不要なJavaScriptの削除
  • 非同期読み込みの活用
Copy<!-- 非同期読み込み -->
<script src="script.js" async></script>

<!-- 遅延読み込み -->
<script src="script.js" defer></script>

5. フォントの最適化

Webフォントの読み込み最適化

Copy<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

INP（Interaction to Next Paint）の改善方法

INPは、ユーザーの操作に対する応答性を測定する重要な指標です。

INPが悪化する主な原因

  1. JavaScriptの処理が重い
  2. 長時間実行されるタスクが存在する
  3. メインスレッドがブロックされている
  4. 不要なスクリプトが多数読み込まれている

具体的な改善方法

1. JavaScriptの最適化

不要なスクリプトの削除

  • 使用していないライブラリの削除
  • 重複したスクリプトの統合
  • 外部スクリプトの見直し

2. 長いタスクの分割

メインスレッドのブロック回避

Copy// 悪い例：長時間実行されるタスク
function heavyTask() {
    for (let i = 0; i < 1000000; i++) {
        // 重い処理
    }
}

// 良い例：タスクの分割
function heavyTaskSplit() {
    const batchSize = 1000;
    let i = 0;
    
    function processBatch() {
        const end = Math.min(i + batchSize, 1000000);
        for (; i < end; i++) {
            // 重い処理
        }
        
        if (i < 1000000) {
            setTimeout(processBatch, 0);
        }
    }
    
    processBatch();
}

3. Webワーカーの活用

バックグラウンドでの処理実行

Copy// メインスレッドでの処理
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
    // 処理結果を受信
};

4. イベントハンドラーの最適化

効率的なイベント処理

Copy// 悪い例：毎回新しい関数を作成
element.addEventListener('click', function() {
    // 処理
});

// 良い例：関数を事前に定義
function handleClick() {
    // 処理
}
element.addEventListener('click', handleClick);

CLS（Cumulative Layout Shift）の改善方法

CLSは、視覚的な安定性を測定する指標で、ユーザー体験に直結します。

CLSが悪化する主な原因

  1. 画像のサイズが指定されていない
  2. 広告やembedコンテンツの動的挿入
  3. Webフォントの読み込みによる文字サイズ変更
  4. 動的コンテンツの挿入

具体的な改善方法

1. 画像サイズの明示的指定

すべての画像に width と height を指定

Copy<img src="image.jpg" width="800" height="600" alt="説明文">

CSSでのアスペクト比指定

Copy.image-container {
    aspect-ratio: 16 / 9;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

2. 広告領域の事前確保

広告表示領域の予約

Copy.ad-container {
    min-height: 250px;
    width: 300px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

3. Webフォントの最適化

フォント表示の制御

Copy@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* フォールバックフォントを先に表示 */
}

4. 動的コンテンツの適切な処理

新しいコンテンツを上部に挿入する際の配慮

Copy// 悪い例：新しいコンテンツを上部に挿入
container.insertBefore(newElement, container.firstChild);

// 良い例：新しいコンテンツを下部に追加
container.appendChild(newElement);

実際の改善事例とその効果

事例1: ECサイトでの画像最適化

課題: 商品画像が重くLCPが4.5秒

施策:

  1. 画像をWebP形式に変換
  2. 遅延読み込み（lazy loading）を実装
  3. 商品画像のサイズを最適化

結果: LCP 4.5秒 → 2.1秒（53%改善）

事例2: ニュースサイトでの広告最適化

課題: 広告の動的表示でCLSが0.3

施策:

  1. 広告領域を事前に確保
  2. 広告サイズを固定
  3. 広告読み込み完了まで placeholder を表示

結果: CLS 0.3 → 0.05（83%改善）

事例3: 企業サイトでのJavaScript最適化

課題: チャットボットの読み込みでINPが800ms

施策:

  1. チャットボットの遅延読み込み
  2. 不要なJavaScriptライブラリを削除
  3. 長時間実行タスクを分割

結果: INP 800ms → 150ms（81%改善）

LandingHubでの表示速度改善サポート

私たちLandingHub（https://www.landinghub.net/）では、Core Web Vitalsの改善を含む包括的なWebサイト最適化サービスを提供しています。

提供サービス

  1. Core Web Vitals診断
    • 現在のスコア測定
    • 改善点の特定
    • 優先順位の決定
  2. 技術的改善サポート
    • 画像最適化
    • サーバー環境の最適化
    • コード最適化
  3. 継続的な監視
    • 定期的なスコア測定
    • 改善効果の検証
    • 新たな問題の早期発見

改善実績

  • 平均LCP改善率: 45%
  • 平均INP改善率: 60%
  • 平均CLS改善率: 70%

まとめ：Core Web Vitalsで競合に差をつけよう

Core Web Vitalsは、現代のWebサイト運営において無視できない重要な指標です。しかし、その本質はSEO対策のためだけでなく、ユーザーにとって快適で使いやすいWebサイトを提供することにあります。

重要なポイントの再確認

  1. コンテンツの質が最優先
    • まずは有用で質の高いコンテンツを作成
    • Core Web Vitalsはその後の差別化要因
  2. 継続的な改善が重要
    • 一度改善して終わりではない
    • 定期的な測定と改善の繰り返し
  3. ユーザー体験の向上が本質
    • 数値の改善だけでなく実際のユーザー体験を重視
    • 長期的なサイト価値の向上を目指す

今後の対策

  1. 現状の把握
    • Google Search Consoleでの定期的な確認
    • 問題のあるページの特定
  2. 優先順位の設定
    • 影響の大きいページから改善
    • ビジネスに直結するページを優先
  3. 技術的改善の実施
    • 画像最適化
    • JavaScript最適化
    • サーバー環境の改善
  4. 効果測定と改善
    • 改善後のスコア測定
    • ユーザー行動の変化を分析
    • 継続的な最適化

Core Web Vitalsの改善は、一見技術的で難しそうに思えるかもしれませんが、基本的な原理を理解し、段階的に取り組むことで、確実に成果を上げることができます。

ユーザーが快適にWebサイトを利用できる環境を整えることで、検索順位の向上はもちろん、コンバージョン率の改善や顧客満足度の向上にもつながります。

<PREV
PageSpeed InsightsとLighthouseの違は？どっちを使うのがおすすめ？
NEXT>
Core Web Vitalsのスコアの確認方法は？計測できるツールも紹介！
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です