メインスレッドのブロック：ハンドラーが動く前から大きなinput delay

何が起きているか

input delayは、ユーザーのクリックからイベントハンドラーが開始するまでの時間です。ハンドラー自体は完璧に速くても、メインスレッドが長いタスク（ハイドレーション、アナリティクス初期化、データ解析のタイマー）の途中だと、イベントはそのタスクが終わるまで列で待ちます。

これはハンドラーでは直せない唯一のINPフェーズです。原因はたまたま実行されていた別のコードだからです。

見分け方

• INPの内訳でinput delayが支配的で、processing timeは短い。
• 問題が断続的：同じボタンがクリックのタイミングで速かったり遅かったりする。
• ページ読み込み直後が最悪で、初期化コード・ハイドレーション・サードパーティスクリプトがメインスレッドを奪い合う。

直し方

• DevTools Performanceで長いタスク（50msを超える赤フラグのブロック）を見つける — 直すのはハンドラーではなくそれら。
• 初期化作業をscheduler.yield()でチャンクに分け、重要でない部分はrequestIdleCallbackで先送りする。
• 機能はページ読み込み時ではなく初回利用時に遅延初期化する。サードパーティスクリプトはasync/deferで読み込む。

問題

// at page load: one 800 ms task — every click during it waits
initAnalytics()
buildSearchIndex(allProducts)
prefetchRecommendations()

修正

initAnalytics()
await scheduler.yield()                  // events can run between steps
buildSearchIndex(allProducts)
requestIdleCallback(() => prefetchRecommendations())