Featured image of post 【SEO対策】新たな指標「INP」の仕組みと改善のポイント Featured image of post 【SEO対策】新たな指標「INP」の仕組みと改善のポイント
ウェブ

【SEO対策】新たな指標「INP」の仕組みと改善のポイント

FIDに代わる新しいCore Web Vitalsのインタラクション応答評価指標「INP」の理解と対策。

English
  1. ホーム
  2. web
  3. 【SEO対策】新たな指標「INP」の仕組みと改善のポイント

Googleの検索結果順位シグナルとして重要なCore Web Vitalsに、新指標 INP (Interaction to Next Paint) が追加されました。ユーザーの操作から、実際に次の画面描画が発生するまでの応答ラグを抑制するためのJavaScript実行時間改善テクニックを紹介します。

本記事では、INPの基本的な定義、従来の指標であるFIDとの決定的な違い、そしてWebサイトのスコアを改善するための具体的なフロントエンド実装手法について解説します。

1. INP (Interaction to Next Paint) とは？

INP は、ユーザーがWebページ上で行ったインタラクション（クリック、タップ、キーボード入力など）に対して、ブラウザが**「次のフレーム（画面更新）を描画するまでの時間」**を測定する指標です。

従来の FID (First Input Delay) との違い

これまで使用されていたFIDは、「最初の1回目のインタラクションにおける、ブラウザが処理を開始するまでの遅延（Input Delayのみ）」しか測定していませんでした。

対してINPは、以下の点でより厳密に評価を行います。

  1. ページ滞在中のすべての操作を評価: 最初の1回だけでなく、ユーザーがページを離れるまでに行ったほぼすべての操作を監視し、その最悪値（またはそれに近いパーセンタイル値）を指標として採用します。
  2. 描画完了までをカバー: JavaScriptの処理が開始される時間（Input Delay）だけでなく、スクリプトの実行時間（Processing Time）、および結果を画面に反映するブラウザの描画時間（Presentation Delay）のトータル値を測定します。

INPの評価基準

  • Good（良好）: 200ミリ秒以下
  • Needs Improvement（改善が必要）: 200ミリ秒超〜500ミリ秒以下
  • Poor（不良）: 500ミリ秒超

2. INPが悪化する主な原因

INPが低下する最大の原因は、**「JavaScriptの実行中にメインスレッドが長時間占有（ブロッキング）されること」**です。

ブラウザのメインスレッドは、画面の描画処理とJavaScriptの実行を同じスレッドで行っています。そのため、クリックイベントなどをトリガーにして重いJavaScriptが走り出すと、その処理が終わるまでブラウザは次の画面を描画（更新）できず、ユーザーには「操作が効かない（フリーズした）」ように感じられます。

3. 具体的なINP改善テクニック

1) 重いタスクの分割（Long Tasksの解消）

メインスレッドを50ミリ秒以上占有する処理を「Long Task」と呼びます。これを解決するために、APIの scheduler.yield() または setTimeout を使用して、処理を細かく分割し、途中でブラウザの描画割り込みを許可します。

// ✕ 避けるべき例：長いループ処理でメインスレッドをブロック
function processLargeData(data) {
  for (let item of data) {
    performHeavyCalculation(item); // 画面更新がストップする
  }
}

// ◯ 推奨される例：処理の合間にスレッドをブラウザに譲る (Yielding)
async function processLargeDataOptimized(data) {
  for (let i = 0; i < data.length; i++) {
    performHeavyCalculation(data[i]);
    
    // 50イテレーションごとにメインスレッドを解放
    if (i % 50 === 0) {
      await yieldToBrowser();
    }
  }
}

function yieldToBrowser() {
  // scheduler.yield がサポートされていれば優先使用、なければ setTimeout で代替
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return window.scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

2) UIフィードバックの優先描画

重い処理を実行する場合でも、「ローディングインジケーター（スピナー）」やボタンの「押下状態」への切り替えといった視覚的フィードバックを、JavaScriptのメイン処理の手前で最優先で描画させます。

// ユーザーがクリックした際のハンドラ
button.addEventListener('click', () => {
  // 1. まずUIを「読み込み中」に変えて描画を完了させる（INPを良好にする）
  showLoadingSpinner();
  
  // 2. 重い処理は次のイベントループ（requestAnimationFrame や setTimeout）へ回す
  setTimeout(() => {
    runHeavyCalculationAndRenderResult();
  }, 0);
});

4. まとめ：UXとSEOの向上

INPは単にSEOのスコアを改善するためだけのテクニックではありません。クリックに対する即座のフィードバックを提供することは、ユーザーの離脱を防ぎ、コンバージョン率を向上させるための極めて重要なWebデザインの基本です。DevToolsの「Performance」タブを活用して、入力遅延のボトルネックを取り除きましょう。

© 2022 - 2026 かいせつくん