Core Web Vitalsスコア改善の実践テクニック【2026年版】

この記事の対象: Core Web Vitalsのスコアを改善したいWeb制作者・サイト運営者
読了時間: 約8分

Core Web Vitals（CWV）は、Googleが定義するページのユーザー体験を測定する3つの指標です。検索順位に影響するランキング要因の1つであり、特にモバイル検索ではCWVのスコアが低いサイトは競合に差をつけられます。

この記事では、2026年最新のCore Web Vitalsの3指標と、それぞれの具体的な改善テクニックを解説します。

Core Web Vitalsの3指標（2026年版）

LCP（Largest Contentful Paint）

ページのメインコンテンツが表示されるまでの時間を測定します。

対象要素: <img>、<video>のポスター画像、CSSのbackground-image、テキストブロック。ファーストビューで最も大きな要素が対象です。

INP（Interaction to Next Paint）

ユーザーの操作（クリック、タップ、キー入力）から次の画面描画までの遅延時間を測定します。2024年3月にFID（First Input Delay）から変更された指標です。

FIDとの違い: FIDは「最初の操作」のみ測定していたのに対し、INPはページ内のすべての操作を対象に、最も遅延が大きい操作を代表値とします。

CLS（Cumulative Layout Shift）

ページの読み込み中に要素が予期せず移動する量を測定します。

発生例: 画像が遅れて読み込まれてテキストが押し下げられる、広告が突然挿入されてボタンの位置がずれる、Webフォントの読み込みでテキストのサイズが変わる。

計測方法

PageSpeed Insights

Googleが提供する無料ツール。URLを入力するだけで3指標のスコアと改善提案を確認できます。

フィールドデータ（実際のユーザーデータ）とラボデータ（シミュレーション結果）の2種類を表示。SEOに影響するのはフィールドデータです。

Google Search Console

「ウェブに関する主な指標」レポートで、サイト全体のCWVスコアの推移と問題のあるURLを確認できます。

活用法: ページ単位の問題を特定し、優先的に改善すべきURLを見つけます。

Chrome DevTools（Lighthouseタブ）

ブラウザのDevToolsからLighthouseを実行。ローカル環境やステージング環境での計測に便利です。

注意: Lighthouseはラボデータのみ。実際のユーザー環境とは異なる場合があります。

LCP改善テクニック

画像の最適化

LCPの原因の約70%は画像の読み込み遅延です。

<!-- ファーストビューの画像はpreloadで先読み -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 画像フォーマットはWebP/AVIFを使用 -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="ヒーロー画像" width="1200" height="600"
       fetchpriority="high" decoding="async">
</picture>

サーバーレスポンス時間の短縮

TTFB（Time to First Byte）が500ms以上かかっている場合は、サーバー側の改善が必要です。

レンダリングブロックの排除

CSSやJavaScriptがページの描画をブロックしている場合、LCPが遅延します。

<!-- クリティカルCSSをインライン化 -->
<style>/* ファーストビューに必要なCSS */</style>

<!-- 残りのCSSは非同期読み込み -->
<link rel="preload" href="/style.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

<!-- JavaScriptはdefer -->
<script src="/main.js" defer></script>

INP改善テクニック

JavaScriptの最適化

INPの問題の多くは、重いJavaScript処理がメインスレッドをブロックしていることが原因です。

// NG: クリック時に重い処理を同期実行
button.addEventListener('click', () => {
  heavyCalculation();  // メインスレッドを300msブロック
  updateUI();
});

// OK: 重い処理をスケジューラで分割
button.addEventListener('click', () => {
  updateUI();  // まずUIを更新
  requestIdleCallback(() => {
    heavyCalculation();  // アイドル時に重い処理
  });
});

長時間タスクの分割

50ms以上のタスク（Long Task）はINPに悪影響を与えます。

// Long Taskを分割する
async function processItems(items) {
  for (const item of items) {
    processItem(item);
    // 定期的にメインスレッドに制御を戻す
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

インタラクション応答の優先度設計

/* コンテンツの表示をブロックしないCSS */
.non-critical {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

content-visibility: autoを使うと、画面外の要素のレンダリングを省略し、インタラクションの応答速度が向上します。

CLS改善テクニック

画像・動画のサイズ指定

<!-- 必ずwidth/heightを指定 -->
<img src="/photo.webp" alt="写真" width="800" height="450">

<!-- CSSでアスペクト比を維持 -->
<style>
  .responsive-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
</style>

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

/* font-display: swapでFOIT（テキスト非表示）を防止 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

/* サイズ調整で代替フォントとのCLSを軽減 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;
  ascent-override: 90%;
}

動的コンテンツの挿入ルール

広告やCookie同意バナーなど、後から挿入される要素はCLSの主要因です。

/* 広告スロットの事前スペース確保 */
.ad-slot {
  min-height: 250px;
  background: #f5f5f5;
}

まとめ

Core Web Vitalsの改善ポイントをまとめます。

LCP（表示速度）:
– 画像をWebP/AVIFに変換＋fetchpriority=”high”
– CDN導入＋サーバーキャッシュ
– クリティカルCSSのインライン化

INP（応答速度）:
– Long Taskの分割
– UIの更新を先行、重い処理は後回し
– content-visibility: autoの活用

CLS（レイアウト安定性）:
– img/videoにwidth/height指定
– font-display: swap＋size-adjust
– 動的要素のスペースを事前確保

3指標すべてで「Good」を達成することで、ユーザー体験の向上とSEO評価の改善が期待できます。