Core/Dash ディメンション: Input Type (INP)

最悪のINPを引き起こしたユーザーアクションを特定し、適切なインタラクションハンドラーを真っ先に修正する。

無料トライアル

Trusted by market leaders · Client results

ディメンション: Input Type INP (inpit)

Input Type (INP) ディメンションは、ユーザーのページ訪問中に単一で最悪のインタラクションを引き起こしたDOMイベントタイプを記録します。値はブラウザの Event Timing API から取得した生のイベント名です（click、keydown、pointerdown、pointerup、keypress、およびその他いくつか）。

INPはワーストケース（最悪値）の指標です。インタラクションの平均値を取ることはありません。入力から次のペイントまでに最も時間がかかった単一のインタラクションを見つけ出し、その所要時間を報告します。Input Typeディメンションは、まさにその瞬間にユーザーが何をしていたかを示します。これは、「INPが450msである」と知ることと、「ユーザーが検索フィールドに入力したためにINPが450msになった」と知ることの決定的な違いです。

Event Timing API は、関連するイベントを単一の論理的なインタラクションとしてグループ化します。タッチスクリーンでのタップは、pointerdown、pointerup、および click を1つのグループとして発火させます。そのグループ内で最も時間のかかった単一のイベントハンドラーが、インタラクションのレイテンシを決定します。CoreDashは、インタラクションを遅延させる原因となった、最も長いハンドラーのイベントタイプを記録します。

coredash metric table urls

INPにおいてInput Typeが重要な理由

すべての入力タイプは、JavaScriptコードベースの異なる部分にマッピングされます。INPが悪いページで keydown が主要な入力タイプである場合、問題がキーストロークハンドラー（オートコンプリート、入力ごとの検索、キーを押すたびに実行されるフォームバリデーションなど）にあることがすぐに分かります。click が表示されている場合、問題はボタンやリンクのハンドラー（ナビゲーションロジック、状態の更新、モーダルの展開、同期的に発火するアナリティクスの呼び出しなど）にあります。

このディメンションがない場合、INPの調査は、プロファイリングセッション、再現手順の確認、そして75パーセンタイルのユーザーがどのインタラクションを試みていたかを推測することから始まります。Input Typeディメンションがあれば、関連するハンドラーへ直接スキップできます。これにより確実な時間短縮が実現します。

入力タイプはプラットフォームの違いも明らかにします。パワーユーザーによるキーボードナビゲーションを多用するサイトでは、悪いINPを引き起こす keydown イベントの割合が高くなります。主にモバイルで使用されるプロダクトでは、pointerdown が支配的になります。同じページ、同じINPスコアであっても、実際のユーザーが誰であるかによって、異なるハンドラーに対して同じ修正が適用されるのです。

入力タイプ (The Input Types)

click と pointerdown

これらはCoreDashデータで最も一般的な入力タイプであり、最悪のINPイベントの約75%を占めます。デスクトップでは、click はマウスボタンのリリースを表します。モバイルでは、タップによって一連のチェーンが発火します。指が画面に触れたときに最初に pointerdown が発火し、指を離したときに pointerup、そして最後に click が発火します。CoreDashは、そのチェーンの中でハンドラーが最も長かったイベントを記録します。

クリックハンドラーは、重い同期JavaScript処理の主要な発生場所です。ナビゲーションアイテムを1回クリックするだけで、状態管理の更新、DOMの変更、アナリティクスイベント、そして再レンダリングがすべて同じタスク内でトリガーされる可能性があります。クリックハンドラーにおける1ミリ秒の同期処理は、INPに1ミリ秒追加されることを意味します。

遅いクリックハンドラーの修正方法はタスクの分解です。<code>scheduler.yield()</code> を使用してハンドラーを小さなタスクに分割し、タスクの合間にブラウザがレンダリングできるように yield します。アナリティクスの呼び出しのような非クリティカルな処理は、遅延ゼロの setTimeout に移動するか、requestIdleCallback に完全に遅延させます。ブラウザは、次のペイントの前に視覚的応答に影響を与える作業だけを完了させる必要があります。それ以外はすべて後回しで構いません。

keydown

キーボード入力はCoreDashデータの最悪のINPイベントの約15%を占めますが、最もひどいスコアを叩き出す原因の1つです。その理由は頻度にあります。検索フィールドに入力するユーザーは、キーストロークごとに keydown を発火させます。もしハンドラーに200msかかる場合、ユーザーは文字を入力するたびに200msのラグを経験することになります。10文字の検索クエリを入力すると、累積で2秒のブロック時間になります。

よくある原因は、キーストロークごとに同期APIリクエストを発火させたり高コストなDOMの差分計算を実行したりする入力時検索（search-as-you-type）の実装や、キーを押すたびにフォーム全体を再チェックするフォームバリデーションです。これらのパターンは小規模ではうまく機能しますが、実際のユーザーの条件下では破綻します。

標準的な修正方法は、デバウンス（debouncing）とオフロードです。検索ハンドラーをデバウンスして、ユーザーが入力の手を止めた後（通常は200〜300ミリ秒後）にのみ発火するようにします。大規模なローカルデータセットに対するあいまい検索のような複雑な処理の場合は、計算を Web Worker に移動し、各 keydown イベントの後にメインスレッドが次のフレームを自由にレンダリングできるようにします。

pointerup

pointerupイベントは、CoreDashデータの最悪のINPケースの約8%を占めます。pointerup は、pointerdown の後、タッチやクリックのシーケンスの最後に発火します。一部のフレームワークやUIライブラリは、主要な「クリック」動作を click ではなく pointerup にバインドしており、これによりハンドラーがインタラクションのライフサイクルのより早い段階に移動します。

pointerup が主要な入力タイプとして現れる場合、調査方法はクリックハンドラーと同じです。ハンドラー内で実行されている JavaScript を特定し、次のペイントをブロックしなければならない処理と、遅延できる処理を切り離します。click との違いは通常、アプリケーションレベルではなくフレームワークレベルの決定事項であるため、コンポーネントライブラリがインタラクションのバインディングを処理する方法の調整が修正に含まれる場合があります。

デバッグのワークフロー

CoreDashで入力タイプによるフィルタリング: 問題のあるURLのINP内訳を開き、どの入力タイプが最悪のインタラクションの大部分を占めているかを確認します。1つのタイプが悪いINPイベントの半分以上を占めている場合は、そこから始めます。この分布を見ることで、どこにプロファイリングの時間を費やすべきかが分かります。
適切なインタラクションで再現する: Chrome DevToolsを開いてPerformanceプロファイリングを有効にし、CoreDashに表示された正確なインタラクションタイプを実行します。keydown が支配的なページは、入力（タイピング）によってテストする必要があります。click が支配的なページは、ユーザーが操作する要素のマウスクリックでテストする必要があります。トレースを記録し、入力イベントの直後に発火するメインスレッドの長いタスクを特定します。
タイプに合わせた修正の適用と検証: keydown の問題には、デバウンスを追加して再プロファイリングします。click の問題には、ハンドラーの論理的なブレークポイントに scheduler.yield() の呼び出しを追加します。テスト環境にデプロイし、インタラクションスクリプトを使用したWebPageTestやChrome DevToolsのPerformanceパネルを使用して、本番環境にシッピングする前にタスクの所要時間が減少していることを確認します。

エンジニアリングの経験則

keydownが悪いINPの大部分を占めている場合: すべての検索ハンドラーおよびオートコンプリートハンドラーにデバウンスを追加します。200msの遅延が標準的な出発点です。その遅延でも計算コストが高い場合は、Web Worker を使ってメインスレッドからオフロードします。
clickまたはpointerdownが支配的な場合: ブラウザがペイントできる状態になる前に、ハンドラーが同期的な処理を多く行いすぎています。問題のあるURLのすべてのクリックハンドラーを監査してください。同期的なアナリティクス呼び出しは削除します。マルチステップのロジックは、ステップ間に scheduler.yield() を挟んで分割します。
pointerupが支配的な場合: フレームワークが click ではなく pointerup にインタラクションロジックをバインドしていないか確認してください。修正方法は通常クリックハンドラーと同じですが、コードベース内のエントリポイントが異なります。
明確な勝者がなく混在している分布の場合: 問題は1つのインタラクションタイプではありません。すべてのタイプの中で最も遅い3つの個別のインタラクションをプロファイリングし、影響の大きい順に対処します。抽象的な最適化は行わないでください。

Input Typeはルーティングシグナルです。何が遅いかではなく、どこを見るべきかを教えてくれます。INPが破綻したときに、ユーザーがクリックしていたのか、入力していたのか、タップしていたのかが分かれば、それ以降のすべての調査ステップはより迅速かつ的を絞ったものになります。