なぜクリックが重いとSEO順位が落ちるのか？FIDから移行した「INP」の仕組みと対策

Googleの検索順位やユーザー体験（UX）を左右する最重要指標「Core Web Vitals」。これまで長年使われてきた「FID（First Input Delay）」が廃止され、新しい応答性指標「INP（Interaction to Next Paint）」へと完全移行したことをご存知でしょうか？

従来のFIDは「初回操作時の入力遅延」しか測定していなかったため、ページ遷移後にボタンを押しても画面がフリーズするようなサイトでも高スコアが出てしまっていました。

しかし、新指標のINPは「ユーザーがページを訪れてから離脱するまでに行ったすべてのクリック・タップ・キー操作の応答性」を厳しく監視します。本記事では、INPの計測構造と、JavaScript起因のボトルネックを解消する実践手法を徹底解説します。

1. FID vs INP：何が根本的に変わったのか？

FIDとINPの最大の違いは、「計測対象の範囲」と「描画完了までを評価するかどうか」です。

Webサイト全体のSEO構造やコンテンツ設計、パフォーマンス指標の評価基準を体系的に理解したい方は、Webサイト運営・SEOに関する入門書籍で基本方針を確認しておくと、技術的な改善が順位向上に直結しやすくなります。

2. INPを構成する「3つの遅延フェーズ」

INPのタイムラグは、以下の3つの合計時間で決まります。

• ⏱️1. 入力遅延（Input Delay）：ユーザーが操作してから、メインスレッドが空いてイベントリスナーが呼ばれるまでの待ち時間。
• ⚙️2. 処理時間（Processing Duration）：JavaScriptのイベントハンドラ関数（クリック処理等）自体の実行時間。
• 🖼️3. 表示遅延（Presentation Delay）：DOM変更後のスタイル再計算・レイアウト（Reflow）・合成（Compositing）と画面反映にかかる時間。

フロントエンドの非同期処理やイベントリスナーの設計を型安全かつ効率的に記述するには、TypeScript関連書籍でモダンな非同期プログラミングのパターンを押さえておくのが役立ちます。

3. 実践：scheduler.yield() で長時間のメインスレッド占有を打破する

重いJavaScript処理を分割し、ブラウザに描画の隙間を与える最新のWeb標準APIが scheduler.yield() です。

async function handleFilterClick(items) {
  // 1. まずUIにスピナー等を表示（即座に描画させる）
  showLoadingSpinner();
  await scheduler.yield(); // メインスレッドを一旦ブラウザ描画に譲る

  // 2. 重いフィルタリング処理を実行
  for (const item of items) {
    processLargeData(item);
    if (shouldYield()) {
      await scheduler.yield(); // 適宜メインスレッドを解放
    }
  }

  // 3. 完了後のUI描画
  renderFilteredList();
}

パフォーマンスプロファイリングやLighthouseのスコア検証を快適に行うなら、DevToolsのタイムラインと実際の画面を広々と同時表示できるコーディング・クリエイター向け4K 144Hz外部モニターが最適です。

まとめ

INPは、単なる数値テストではなく、「ユーザーが操作したときに即座に反応する心地よいWebサイト」を実現するための本質的な指標です。

200ミリ秒以内の高速レスポンスを維持することで、直帰率が下がり、コンバージョン率とSEO評価が確実に向上します。まずはChrome DevToolsのPerformanceパネルを開いて、自社サイトのINPボトルネックを特定してみましょう。