実際の操作を追跡する
INPは、ページ訪問中の操作を対象とし、最も反応が悪かった状況をよく表す操作を報告します。遅延の原因は、入力の処理、長いJavaScriptのタスク、同期的なレイアウト処理、ほかの処理で遅れた描画などです。最終的に成功したクリックでも、反応が悪く感じられることがあります。
確認方法
まず、フィールドデータで影響を受けているページのグループを特定します。そのうえで、現実的なタップ、クリック、キー操作を繰り返しながら、トレースを記録します。操作は、入力の遅延、処理時間、表示の遅延に分けます。ルートのテストは、性能を制限したデバイスのプロファイルで行います。デスクトップでのトレースでは、メインスレッドの負荷が見えにくいことがあります。
実装と改善の方法
ハンドラーから不要な同期処理を取り除き、長いタスクを分割し、レイアウトスラッシングを避け、意味のある次の状態をすばやく表示します。操作が引き続き完了し、キーボードで操作でき、ページがずれないことを確認します。変更の前後では、同じ条件のトレースを比べます。
限界とよくある誤り
最初のクリックだけを最適化したり、操作の処理を表面的なスピナーで置き換えたりしてはいけません。ページは、ユーザーのタスクを実際に受け付けて完了させる必要があります。
INPの検出結果は、操作を入力の遅延、処理時間、表示の遅延に分けて切り分けます。正確なクリック、タップ、キー操作、関係する要素、デバイスのプロファイルを記録します。ハンドラーの前に長いタスクがあれば、メインスレッドの競合が疑われます。ハンドラーが遅ければ、同期的な計算を行っている可能性があります。描画が遅ければ、ハンドラーのあとのスタイルやレイアウトの処理が原因かもしれません。たとえば、フィルターのクリックで大きなリストを同期的に再構築している場合、更新の範囲を絞り、必須でない処理を後回しにすれば改善できます。ただし、進行状況を伝え、キーボードで操作できる状態は保つ必要があります。変更後に同じ操作を再現し、トレースと画面上の反応の両方を確認します。