INP (Interaction to Next Paint)とは？｜SEO関連用語集

2025年10月28日

読み方: アイエヌピー / インタラクショントゥーネクストペイント

概要

INP（Interaction to Next Paint）とは、ユーザーがページと対話してから次の描画が完了するまでの応答性を測定する、Core Web Vitalsの主要指標です。

詳細説明

INP（Interaction to Next Paint）は、2024年3月にFID（First Input Delay）に代わってCore Web Vitalsの公式指標となった、ページのインタラクティブ性（応答性）を測定する指標です。ユーザーがクリック、タップ、キーボード入力などの操作を行ってから、ブラウザが次の描画を完了するまでの時間を測定します。FIDが最初の操作のみを測定するのに対し、INPはページ訪問中のすべての操作を評価し、その中で最も遅い応答時間を報告します。良好なユーザー体験のためには、INPは200ミリ秒以内であることが推奨されています。JavaScriptの実行時間削減、メインスレッドの負荷軽減などで改善できます。

重要性

INPが重要な理由は以下の通りです。

2024年3月からCore Web Vitalsの公式指標となり、検索順位に影響する
ページ全体のインタラクティブ性を評価し、ユーザー体験を的確に反映する
FIDよりも厳しい基準で、より実用的な指標となっている
モバイルデバイスでの体感速度に直結し、離脱率に影響する
JavaScriptアプリケーションの品質評価において重要

具体例・実践方法

INPの改善方法

INPの測定方法

PageSpeed Insights
Chrome DevToolsのPerformanceタブ
Web Vitals Chrome拡張機能
Google Search ConsoleのCore Web Vitalsレポート

INPの評価基準

良好（Good）: 200ミリ秒以内 ✅
改善が必要（Needs Improvement）: 200〜500ミリ秒 ⚠️
不良（Poor）: 500ミリ秒超 ❌

INPの対象となる操作

マウスクリック
タップ（モバイル）
キーボード入力
すべてのユーザー操作

INP改善の具体的施策

a. JavaScriptの実行時間削減

   // 悪い例: 長時間実行されるタスク
   button.addEventListener('click', () => {
     for (let i = 0; i < 1000000; i++) {
       // 重い処理
     }
   });

   // 良い例: タスクの分割
   button.addEventListener('click', async () => {
     await scheduler.postTask(() => {
       // 小さな処理1
     }, { priority: 'user-blocking' });

     await scheduler.postTask(() => {
       // 小さな処理2
     }, { priority: 'user-blocking' });
   });

b. メインスレッドの負荷軽減

長時間実行タスクを小さなタスクに分割
Web Workersの活用（重い処理をバックグラウンドで実行）
requestIdleCallbackで優先度の低い処理を遅延実行

c. 不要なJavaScriptの削除

使用していないライブラリの削除
コードスプリッティング
遅延読み込み（Lazy Loading）
Tree Shakingによる不要コードの削除

d. JavaScriptバンドルサイズの削減

圧縮（Minification）
Gzip/Brotli圧縮
軽量な代替ライブラリの使用
動的インポート

e. サードパーティスクリプトの最適化

   
   
   

   
   ▶ 動画を再生

f. 入力デバウンス・スロットル

   // デバウンス（連続入力の最後のみ処理）
   function debounce(func, wait) {
     let timeout;
     return function(...args) {
       clearTimeout(timeout);
       timeout = setTimeout(() => func.apply(this, args), wait);
     };
   }

   searchInput.addEventListener('input', debounce((e) => {
     performSearch(e.target.value);
   }, 300));

フレームワーク別の対策

React: React.memo、useMemo、useCallbackの活用
Vue: computed、keep-aliveの活用
Next.js: Dynamic Importsの活用

注意点・補足

INPを改善する際の注意点は以下の通りです。

FIDからの移行期間は両方の指標を監視する必要があった（2024年3月に完全移行済み）
ラボ環境（PageSpeed Insights）では測定できず、実環境データが重要
デバイスの性能によって結果が大きく異なる（低スペックデバイスでテスト）
過度な最適化はコードの可読性・保守性を損なう可能性がある

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

INP (Interaction to Next Paint)とは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元