IndexReady
core-web-vitalsパフォーマンスseopagespeed

Core Web Vitalsの改善方法｜LCP・INP・CLSを最適化する実践ガイド

Core Web Vitalsとは？

Core Web Vitals（コアウェブバイタル）は、Googleがユーザー体験を定量的に評価するための3つの指標です。2021年にランキング要因として導入されて以来、Webサイトのパフォーマンス改善において欠かせない基準となっています。

3つの指標はそれぞれ、ページの読み込み速度、操作への応答性、視覚的な安定性を測定します。これらを改善することは、SEOの順位向上だけでなく、ユーザーの離脱率低下やコンバージョン率の改善にもつながります。

3つの指標と基準値

LCP（Largest Contentful Paint）— 読み込み速度

LCPは、ページ内で最も大きなコンテンツ要素（画像、動画、テキストブロックなど）が表示されるまでの時間を測定します。

判定基準値
良好2.5秒以内
改善が必要2.5秒〜4.0秒
不良4.0秒超

INP（Interaction to Next Paint）— 応答性

INP（Interaction to Next Paint）は、ユーザーのクリック、タップ、キー入力に対して、ページが次のフレームを描画するまでの時間を測定します。2024年3月にFID（First Input Delay）に代わって正式な指標となりました。

判定基準値
良好200ms以内
改善が必要200ms〜500ms
不良500ms超

CLS（Cumulative Layout Shift）— 視覚的安定性

CLSは、ページの読み込み中にレイアウトが予期せずずれる度合いを数値化した指標です。広告や画像の遅延読み込みにより、読んでいたテキストが突然ずれるような体験を防ぐことが目的です。

判定基準値
良好0.1以下
改善が必要0.1〜0.25
不良0.25超

LCPを改善する具体的な方法

LCPの悪化原因の多くは、大きな画像の読み込みや、レンダリングをブロックするリソースに起因します。

画像を最適化する

最も効果的な施策は、LCP要素となる画像の最適化です。

<!-- WebP/AVIF形式を使い、サイズを明示する -->
<img
  src="hero.webp"
  alt="サービスのメインビジュアル"
  width="1200"
  height="630"
  fetchpriority="high"
  decoding="async"
/>

ポイントは以下のとおりです。

  • WebPまたはAVIF形式を使用する（JPEGと比べて30〜50%軽量化）
  • fetchpriority="high" でLCP画像の優先度を上げる
  • widthとheight属性を必ず指定する（CLSの防止にもなる）
  • 適切なサイズにリサイズする（4000px幅の画像をそのまま配信しない）

レンダリングブロックを排除する

CSSやJavaScriptがページの描画を妨げている場合、LCPが大幅に遅延します。

<!-- クリティカルCSSをインライン化 -->
<style>
  /* ファーストビューに必要な最小限のCSS */
  .hero { display: flex; align-items: center; }
</style>

<!-- 残りのCSSは非同期で読み込む -->
<link rel="preload" href="/styles/main.css" as="style" onload="this.rel='stylesheet'" />
  • ファーストビューに不要なJavaScriptには deferまたはasync属性 を付ける
  • 使っていないCSSを削除する（カバレッジツールで確認）
  • フォントには font-display: swap を指定してテキスト表示を遅延させない

サーバーレスポンスを高速化する

TTFB（Time to First Byte）が遅い場合、どれだけフロントエンドを最適化しても効果が薄くなります。

  • CDNを導入する（CloudflareやCloudFrontなど）
  • サーバーサイドのキャッシュを活用する
  • HTTP/2以上のプロトコルを使用する

INPを改善する具体的な方法

INPの改善は、メインスレッドの負荷を減らすことが中心となります。

重い処理を分割する

長時間メインスレッドを占有するタスクは、ユーザーの操作に対する応答を遅延させます。

// 悪い例：長いループでメインスレッドを占有
function processAllItems(items) {
  items.forEach(item => heavyComputation(item));
}

// 良い例：yieldしながら処理する
async function processAllItems(items) {
  for (const item of items) {
    heavyComputation(item);
    // ブラウザに制御を返して、ユーザー操作に応答させる
    await scheduler.yield();
  }
}

イベントハンドラを最適化する

// クリックハンドラ内で重い処理を直接実行しない
button.addEventListener('click', () => {
  // UIのフィードバックを即座に表示
  showLoadingState();

  // 重い処理はrequestIdleCallbackやsetTimeoutで遅延実行
  requestIdleCallback(() => {
    performHeavyTask();
    hideLoadingState();
  });
});
  • サードパーティスクリプト（広告、アナリティクス等）の影響を確認する
  • 不要なJavaScriptを コード分割（code splitting） で遅延読み込みする
  • requestAnimationFrame や scheduler.yield() を活用してメインスレッドの占有を防ぐ

CLSを改善する具体的な方法

CLSの発生原因は限定的で、対策も比較的明確です。

画像・動画にサイズを指定する

<!-- 幅と高さを指定してレイアウトシフトを防止 -->
<img src="photo.webp" alt="商品写真" width="600" height="400" />

<!-- CSSでアスペクト比を指定する方法も有効 -->
<style>
  .video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
</style>

動的コンテンツ用のスペースを確保する

広告やバナーなど、遅れて読み込まれる要素には、あらかじめ領域を確保しておきましょう。

/* 広告枠のスペースを事前確保 */
.ad-slot {
  min-height: 250px;
  width: 300px;
}

Webフォントの読み込みによるシフトを防ぐ

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* テキストを即座に表示し、フォント読み込み後に切り替え */
}

font-display: optional を使うと、フォントが間に合わない場合はフォールバックフォントをそのまま使用するため、CLSをゼロにできます。ただし、ブランドフォントが表示されない場合がある点はトレードオフです。

Core Web Vitalsの測定ツール

フィールドデータ（実ユーザーデータ）

  • Chrome UX Report（CrUX）: 実際のChromeユーザーから収集されたデータ
  • Google Search Console: Core Web Vitalsレポートでサイト全体の状況を把握

ラボデータ（シミュレーション）

  • PageSpeed Insights: フィールドデータとラボデータの両方を確認できる
  • Chrome DevTools（Lighthouse）: 開発中にローカルで測定
  • WebPageTest: 詳細なウォーターフォール分析が可能

IndexReadyでのチェック

IndexReadyのスコアリングツールでは、PageSpeed Insights APIを利用してパフォーマンスを自動チェックしています。SEOカテゴリ内で PageSpeedスコア（10点満点） と Core Web Vitals（10点満点） の2項目として評価されます。URLを入力するだけでLCP・INP・CLSの状況がわかるので、改善の出発点として活用してみてください。

改善の優先順位

すべてを一度に改善するのは困難です。以下の順序で取り組むことをおすすめします。

  1. まずLCPを改善する: 画像最適化だけでも大幅にスコアが向上するケースが多い
  2. 次にCLSを修正する: 原因が特定しやすく、修正も比較的容易
  3. 最後にINPを最適化する: JavaScriptの構造的な問題が多く、改善に時間がかかる場合がある

PageSpeed Insightsで現状のスコアを確認し、最もスコアが低い指標から着手するのが効率的です。

よくある質問（FAQ）

Core Web VitalsはSEOのランキングにどの程度影響しますか？

Core Web VitalsはGoogleのランキング要因のひとつですが、コンテンツの関連性や被リンクほどの重みはないとされています。ただし、競合サイトとコンテンツの質が拮抗している場合、パフォーマンスの差が順位の違いとなって現れることがあります。また、ユーザー体験の改善は離脱率の低下やエンゲージメントの向上につながるため、間接的なSEO効果も大きいです。

FIDはもう関係ないのですか？

2024年3月にFID（First Input Delay）はINP（Interaction to Next Paint）に完全に置き換わりました。FIDは最初の入力の遅延のみを測定していましたが、INPはページ全体のライフサイクルを通じたすべてのインタラクションの応答性を測定するため、より実態に即した指標です。現在はINPの改善に注力してください。

モバイルとデスクトップでスコアが大きく違うのはなぜですか？

PageSpeed Insightsのラボデータは、モバイルの場合はCPU速度を4倍に抑制したシミュレーション環境で測定されます。そのため、デスクトップでは90点以上でもモバイルでは50点台になることは珍しくありません。Googleはモバイルファーストインデックスを採用しているため、モバイルのスコア改善を優先しましょう。

Core Web Vitalsの改善にかかる期間はどれくらいですか？

技術的な修正自体は数日から数週間で完了できます。ただし、Googleがフィールドデータを再評価して検索結果に反映するまでには28日間のデータ収集期間が必要です。Search ConsoleのCore Web Vitalsレポートに改善が反映されるまで、1〜2か月程度を見込んでおくとよいでしょう。