React/Next.jsアプリのINP（Interaction to Next Paint）改善とLCP 1秒未満短縮テクニック

Googleが INP (Interaction to Next Paint) を Core Web Vitals の正式指標にして以来、Webアプリの評価は「初期表示速度」から「ユーザー操作に対するUI応答性」へとシフトしました。

React/Next.jsアプリケーションでは、重いJavaScript処理によるメインスレッドのブロッキングがINP悪化の主な原因です。

本記事では、React 19 / Next.js 15+ における INP最適化 と LCP 1秒未満への短縮 を達成するための具体的な手法（useTransition、scheduler.yield()、画像/フォント配信最適化）を解説します。

ポイント

• INPの目安: ユーザーの操作から画面が更新されるまでの総遅延。200ms以下が目標（100ms推奨）。
• Long Taskの分解: 50msを超えるJS処理は scheduler.yield() で細分化し、レンダリング機会をブラウザに返還。
• React 19 useTransition: 重いUI更新の優先度を下げ、ユーザー入力を最優先処理。

1. scheduler.yield() によるメインスレッド解放

export async function yieldToMain() {
  if ('scheduler' in window && 'yield' in (window as any).scheduler) {
    await (window as any).scheduler.yield();
  } else {
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}