【アイエヌピー】
INP（Interaction to Next Paint） とは？
最終更新:
💡 操作から次の描画まで、反応の遅さを確かめる
クリック・タップ・キー操作から次の描画までの遅延を使い、ページ滞在中の応答性を評価するCore Web Vitalsの指標。通常は遅い操作の値を代表値にし、操作数が多い場合は一部の外れ値を除く。
📌 このページのポイント
ひよこ INPって何なの？
ペンギン先生 ひよこ FIDとどう違うの？
ペンギン先生 FIDは最初の操作で、処理が始まるまでの遅延を測ったよ。INPはページ滞在中の対象操作を観察し、処理時間と次の描画までの待ち時間も含める。最初の反応だけでなく、その後の使い心地も確かめるんだ
ひよこ 全部の操作の平均なの？
ペンギン先生 平均ではないよ。通常は最も遅い操作を採り、操作が多い訪問では50操作ごとに遅い外れ値を1つ除く。さらに複数の訪問を集計するときは75パーセンタイルで評価する。この集計と、1回の訪問の代表値は別なんだ
ひよこ どのくらいなら良好なの？
ペンギン先生 実ユーザーの訪問をPC・モバイルに分けた75パーセンタイルで、200ms以下は良好、200ms超500ms以下は改善が必要、500ms超は不良だよ。対象操作がない訪問では値が出ないこともある。ラボの操作例だけで全利用者の応答性は判断できないんだ
ひよこ 遅いときはどう調べるの？
ペンギン先生 PageSpeed Insightsなどの実ユーザーのデータを入口に、遅い操作を再現して原因を調べるよ。入力待ち、処理、描画のどこが遅いかで対策は違う。長い処理を分割したり描画の仕事を減らしたりするけれど、requestAnimationFrameを呼ぶだけで速くなるわけではないんだ
まとめ：ざっくりこれだけ覚えればOK！
「INP」って出てきたら「操作から次の描画までの応答性を表す指標」と思えばだいたいOK！
📖 おまけ：英語の意味
「Interaction to Next Paint」 ＝ 操作から次の描画まで
💬 Interaction（操作）to Next Paint（次の描画まで）で、ユーザーが何か操作してから画面が反映されるまでの時間を表しているよ