INPの問題を解説：遅いインタラクションの原因と直し方
Interaction to Next Paint（INP）は、ページがクリック・タップ・キー入力にどれだけ速く応答するかを測るCore Web Vitalです。INPが200msを超えると遅く感じ、500msを超えると壊れているように感じます。
悪いINPのほぼすべては、いくつかの根本原因のどれかに行き着きます。以下の各ガイドは1つの原因を解説します：見分け方、なぜ起きるか、そしてコード付きで直し方を。
根本原因
重いイベントハンドラー：クリックに500msかかる理由と直し方
サイトを無料でスキャン →
実行の長いイベントハンドラーはメインスレッドをブロックし、次の描画を遅らせます。重いハンドラーの見つけ方と、scheduler.yield()やWeb Workerでの分割方法。
レイアウトスラッシング：1フレーム内で繰り返されるリフローと止め方DOMの読み書きを交互に行うと、ブラウザは1フレーム内で何度もレイアウトを再計算させられます。読み書きをまとめてINPを直す方法。
強制同期レイアウト：DOM書き込み後にジオメトリを読むDOMを変更した直後にoffsetWidthやgetBoundingClientRectを読むと、ブラウザはJSタスク内でレイアウトを再計算させられます。検出と修正の方法。
メインスレッドのブロック：ハンドラーが動く前から大きなinput delayメインスレッドが別の長いタスクで忙しいと、クリックはハンドラー開始まで列で待ちます。ブロックしているタスクの見つけ方と分割でINPのinput delayを直す方法。
インタラクションを妨げるサードパーティスクリプト：診断と封じ込めアナリティクス、広告、チャットウィジェットはメインスレッドで長いタスクを実行しINPを台無しにします。長いタスクをサードパーティに帰属させ、async・defer・workerで封じ込める方法。
Reactの再レンダリング連鎖：1クリックでツリー全体が再レンダリングされるときReactツリーの上位での状態更新は、クリックのたびに数百のコンポーネントを再レンダリングします。レンダリング連鎖の見つけ方と、memo・useCallback・useTransitionでの修正方法。