【アイエヌピー】
INP（Interaction to Next Paint） とは？
💡 全部の操作のレスポンスを見張る総合審査員！
📌 このページのポイント
- ページ上のすべての操作に対する応答性を総合的に測定する
- 2024年3月にFIDに代わってCore Web Vitalsに採用された
- 200ミリ秒以内が「良好」の目安
ひよこ INPって何なの？
ペンギン先生 ユーザーがクリックやタップ、キー入力をしてから、画面が実際に更新されるまでの時間を測る指標だよ。ページ上のすべての操作を対象にして、応答性を総合的に評価するんだ。
ひよこ FIDとどう違うの？
ペンギン先生 ひよこ どのくらいの速さなら合格なの？
ペンギン先生 200ミリ秒以内なら「良好」、500ミリ秒を超えると「要改善」だよ。ページ内の全操作のうち、最も遅かった値（正確にはP98）がINPとして報告されるんだ。
ひよこ INPを改善するにはどうすればいいの？
ペンギン先生 長いJavaScriptタスクを分割する、不要なレンダリングを減らす、requestAnimationFrameを活用するのが基本だよ。特にイベントハンドラ内の重い処理をWeb Workerに逃がすのが効果的だね。
ひよこ INPの値ってどうやって確認するの？
ペンギン先生 Chrome DevToolsのPerformanceパネル、PageSpeed Insights、Chrome User Experience Report（CrUX）で確認できるよ。INPは実ユーザーのデータ（フィールドデータ）が特に重要で、ラボ環境だけでは再現しにくい問題を見つけられるのが強みなんだ。
まとめ：ざっくりこれだけ覚えればOK！
「INP」って出てきたら「操作してから画面が更新されるまでの応答性指標」と思えればだいたいOK！
📖 おまけ：英語の意味
「Interaction to Next Paint」 ＝ 操作から次の描画まで
💬 Interaction（操作）to Next Paint（次の描画まで）で、ユーザーが何か操作してから画面が反映されるまでの時間を表しているよ