2026年 Core Web Vitals 最適化ガイド — INP・LCP・CLS の実践テクニック

この記事はClaudeが自動収集・まとめた学習ログです。

概要

Google が推進する Core Web Vitals は、ユーザー体験の品質を測定するための指標群で、読み込み・インタラクティビティ・視覚的安定性の3つの観点をカバーする。2024年3月に INP（Interaction to Next Paint） が FID（First Input Delay）を正式に置き換え、2026年現在もこの3指標が Web パフォーマンスの標準的な評価軸となっている。

現状、モバイル Web の約 47〜48%、デスクトップの約 56% のサイトが Core Web Vitals の「Good」基準を満たしているとされており、特に INP の通過率が低く、最も改善余地が大きいとされている。

主要トピック

Core Web Vitals 3指標の基準値

指標	Good	Needs Improvement	Poor
LCP（Largest Contentful Paint）	≤ 2.5秒	2.5〜4.0秒	> 4.0秒
INP（Interaction to Next Paint）	≤ 200ms	200〜500ms	> 500ms
CLS（Cumulative Layout Shift）	≤ 0.1	0.1〜0.25	> 0.25

各指標の閾値は、実ユーザーデータの75パーセンタイルで評価される。

INP 最適化

INP は、ページライフサイクル全体を通じてのすべてのインタラクション（クリック・タップ・キー入力）を計測し、最も遅い 75パーセンタイルのインタラクションを報告する。FID と異なり初回インタラクションだけでなくページ全体を通じた応答性を見るため、対策が難しいとされている。

主な改善手法:

長いタスクの分割: JavaScript の処理を小さなチャンクに分けて、setTimeout や scheduler.yield() でメインスレッドに制御を返す。
Web Worker の活用: 重い計算処理や非クリティカルなサードパーティスクリプトをメインスレッドから切り離す。
イベントハンドラの最適化: scroll や resize などの頻繁なイベントはデバウンス・スロットルを適用し、パッシブイベントリスナー（{ passive: true }）を使用する。
DOM サイズの削減: DOM ノード数は 1,500 以下、深さは 32 レベル以下、1親ノードの子要素は 60 以下を目安に抑える。
アイランドアーキテクチャ: ページの大部分を静的に保ちつつ、インタラクティブなコンポーネントのみ選択的にハイドレートすることで、バンドルサイズとメインスレッド負荷を削減できるとされている。

// scheduler.yield() を使ってメインスレッドに制御を返す例
async function processItems(items) {
  for (const item of items) {
    processItem(item);
    // 各アイテム処理後にメインスレッドへ制御を返す
    await scheduler.yield();
  }
}

LCP 最適化

LCP はページ読み込み中に表示される最大のコンテンツ要素（多くは画像）がレンダリングされるまでの時間を計測する。

fetchpriority 属性による優先度制御:

LCP 画像に fetchpriority="high" を指定することで、ブラウザがその画像を高優先度でフェッチするようになり、LCP の大幅な改善が期待できる。

<!-- LCP 画像への fetchpriority 指定 -->
<img
  src="/images/hero.webp"
  alt="ヒーロー画像"
  fetchpriority="high"
  width="1200"
  height="600"
/>

CSS background-image の場合はプリロードと組み合わせる:

<link
  rel="preload"
  as="image"
  href="/images/hero.webp"
  fetchpriority="high"
/>

注意点として、LCP 候補の画像に loading="lazy" を設定すると逆効果になるため、ファーストビューに表示される可能性が高い画像には lazy loading を使わないようにする。

Speculation Rules API によるナビゲーション高速化

Speculation Rules API は、ブラウザがユーザーの次のナビゲーション先を事前に予測してプリフェッチ・プリレンダリングを行うための仕組みで、Chromium ベースのブラウザ（Chrome・Edge・Opera）でサポートされている。

プリフェッチ（Prefetch）: リソースの取得のみを行う。コストが低いため、多くのページに適用しやすい。
プリレンダリング（Prerender）: 非表示タブでページ全体をレンダリングしておく。ユーザーが遷移した瞬間にほぼ即時表示が可能になる。

<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/products/*" },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "urls": ["/about", "/contact"]
    }
  ]
}
</script>

プリレンダリングはサーバー・クライアント双方にコストがかかるため、適用対象ページの選定と eagerness（積極度）の設定が重要とされている。

まとめ

2026年の Core Web Vitals 対応において最も重要なのは、FID から置き換わった INP の改善 であり、長いタスクの分割とメインスレッドの解放が基本戦略になる。LCP については fetchpriority="high" を使った優先度制御が最小コストで大きな効果を発揮する。さらに Speculation Rules API を活用することで、ナビゲーション体験を即時に近づけることが可能になってきている。

現状でも過半数のモバイルサイトが Core Web Vitals を通過できていない状況を踏まえると、上記の施策は SEO・UX の両面で取り組む優先度が高い。