INP（操作の応答性）とは？クリックの反応が遅い指標の基礎

INPとは何を測るのか

INPはInteraction to Next Paintの略で、ユーザーの操作（クリック、タップ、キー入力）に対して、次に画面が更新されるまでの応答時間を測る指標です。Core Web Vitalsの一つで、ページの操作性・応答性を表します。

ページ滞在中に発生したすべての操作の応答時間を観測し、その中でほぼ最も遅かった値が代表値として使われます。つまり「一番引っかかった瞬間」に近い値が評価されるため、一度でも重い処理があると数値に表れます。

操作してから画面が変わるまでに間があると、ユーザーは「効いていないのでは」と感じて二度押しするなど、体験を損ないます。INPはこの引っかかりを可視化します。

FIDとの違い

INPは、以前使われていたFID（First Input Delay）の後継として2024年3月にCore Web Vitalsの正式な指標になりました。

FIDは「最初の操作に対する反応の遅れ」だけを、しかも処理が始まるまでの遅延に限って測っていました。これに対しINPは、最初の操作に限らずページ滞在中のあらゆる操作を対象とし、画面が更新されるまでの全体を測ります。より実際の体感に近い指標へと進化したと言えます。

実務ではどこで関係する？

INPは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

INP（操作の応答性）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

INPが悪化する原因

INPの遅れは、操作を処理する間にブラウザのメインスレッドが他の重い処理で詰まっていることが主な原因です。代表的な要因を押さえておきましょう。

• 長時間動き続けるJavaScript（ロングタスク）がメインスレッドを占有する
• 操作時に大量のDOM更新や複雑な再描画が走る
• サードパーティのスクリプトが重い処理を割り込ませる
• イベント処理の中で同期的に重い計算をしている
• 不要なレイアウト再計算（リフロー）が頻繁に発生する

INPを改善する手順

INPの改善は、操作時にメインスレッドを空けることが鍵です。次の手順で見直してみてください。

1. 計測ツールで応答が遅い操作と、その時に動いている処理を特定する
2. 長いJavaScript処理を小さく分割し、合間にブラウザへ制御を返す
3. 操作直後の重い計算は遅延させ、まず画面を更新してから処理する
4. 不要なサードパーティスクリプトを減らす、または読み込みを遅らせる
5. DOM更新をまとめ、無駄な再描画やレイアウト再計算を避ける
6. 改善後に200ミリ秒以下に収まっているか再計測する

INPの基準と共有ページでの考え方

INPは200ミリ秒以下なら「良好」、500ミリ秒を超えると「不良」とされます。500ミリ秒近い遅れは、はっきりと「もたつき」として体感されます。

操作の多いプロトタイプやインタラクティブなデモを共有する場面では、INPの良し悪しがそのまま操作感の評価につながります。動くものほど応答性が問われます。

ギガサイト便はCSSやJavaScriptを含むZIPもそのまま公開できるため、インタラクティブな試作の動作確認に向きます。同じURLで差し替えられるので、INPを改善したバージョンを送り直さずに再確認してもらえます。