Lighthouse INP 300ms 超えを直す｜Long Task 分割・scheduler.yield

パフォーマンス Core Web Vitals INP JavaScript Lighthouse
結論

INP悪化の主因は 50ms超の Long Task です。DevToolsで特定し scheduler.yield() で分割するか Web Worker へ移します。

// 結論：50ms経過時に scheduler.yield() でメインスレッドを解放する
async function processItems(items: Item[]) {
  let lastYield = performance.now();
  for (const item of items) {
    heavyProcessing(item);
    if (performance.now() - lastYield > 50) {
      await scheduler.yield();
      lastYield = performance.now();
    }
  }
}

INP のしきい値（2025年最新）

Google は INP について以下の基準を定めています。

評価INP 値
Good（良い）200ms 以下
Needs Improvement（要改善）201ms〜500ms
Poor（不良）500ms 超

INP は FID と異なり、ページ滞在中のすべての操作の中で最も遅い応答を計測します。

改善手順

  1. Chrome DevTools の Performance タブで録画する — 赤三角マークが付いた Long Task を特定する
  2. 原因関数を特定する — 50ms を超える処理を scheduler.yield() または setTimeout で分割する
  3. CPU 集中処理を Web Worker に移す — メインスレッドを完全に解放する
  4. PerformanceObserver で本番計測する — 実ユーザーの INP スコアを継続監視する