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

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

1. 入力遅延が高い場合

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

対策：

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

2. 処理時間が高い場合

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

対策：

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

3. 描画遅延が高い場合

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

INPの目標値

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

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

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

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