INP最適化の実践ガイド：入力遅延・処理時間・描画遅延の改善策

INPとは？3つの構成要素を理解する

Interaction to Next Paint（INP）は、ページ上のユーザー操作に対する応答性を測定する指標です。INPは以下の3つのフェーズから構成されます：

1. 入力遅延（Input delay）：「ユーザーがページとのインタラクションを開始した時点から、そのインタラクションのイベントコールバックが実行され始めるまでの時間」
2. 処理時間（Processing duration）：「イベントコールバックが完了するまでにかかる時間」
3. 描画遅延（Presentation delay）：イベントコールバック実行後、ブラウザが次のフレームを表示するまでの時間

各フェーズの最適化アクション

1. 入力遅延が高い場合

入力遅延の原因は、インタラクション自体ではなく、メインスレッドをブロックしている他の処理にある可能性が高いです。入力遅延が大きい場合、「インタラクションはINP低下の直接的な原因ではないかもしれない」とされています。

対策：

• メインスレッド上の長いタスク（Long Task）を分析し、分割・削減する。
• コード分割、プログレッシブローディング、長いタスクの分割が応答時間の改善に効果的。
• ユーザーが操作しようとしている間にメインスレッドで過剰な作業が行われていないか確認する。

2. 処理時間が高い場合

処理時間が高い場合、「インタラクションのイベントハンドラがINP低下の直接的な原因」です。

対策：

• 「イベントリスナーで実行されるあらゆるコードがインタラクションを遅延させる」という認識を持ち、ファーストパーティ、フレームワーク、ライブラリ、サードパーティのリスナーをすべて監査する。
• イベントハンドラ内の処理を削減または遅延させる。例えば、blockForのような重い処理をイベントリスナーからsetInterval()に移動する。
• インタラクションが短期間に連続して発生する場合、意図的に処理の開始を遅らせてキャンセルできるようにする。
• フレームワークのレンダリングパターンを見直し、主要なUX更新を優先する。

3. 描画遅延が高い場合

描画遅延は、イベントコールバック後のブラウザのレンダリング処理が原因です。 このフェーズの最適化には、レンダリング処理自体の見直しが必要です。

INPの目標値

• 200ミリ秒未満：良好な応答性
• 200〜500ミリ秒：改善が必要
• 500ミリ秒超：応答性が不良

総合的な最適化のポイント

「一般的に、ユーザーのデバイスに関わらずウェブサイトがINPの『良好』基準を満たす可能性を最大にするためには、インタラクションのすべての部分をできるだけ短く保つこと」が重要です。特定のフェーズだけに焦点を当てるのではなく、3つのフェーズすべてをバランスよく最適化する必要があります。

まずはChrome DevToolsの「INP breakdown」パネルを使用して、どのフェーズが最も遅延しているかを特定し、最も効果的な改善策を優先的に実施しましょう。