インタラクションを妨げるサードパーティスクリプト：診断と封じ込め
何が起きているか
サードパーティスクリプト — アナリティクス、タグマネージャー、広告、チャットウィジェット、A/Bテスト — はあなたのコードと同じメインスレッドで動きます。タグマネージャーが50のルールを評価したり広告スクリプトがペイロードを解析したりすると、ユーザーのクリックは自分の長いタスクを待つのと同じように待たされます。
Long Animation Frames APIは長いタスクをそのsource URLに帰属させるので、どのドメインがINPを犠牲にしているか正確に分かります。
見分け方
- DevTools Performanceで長いタスクが外部ドメイン（googletagmanager.com、connect.facebook.net、ウィジェットのCDN）に帰属している。
- 自分のコードを変えていないのに、マーケティングタグを追加したらINPが悪化した。
- サードパーティスクリプトが初期化される読み込み直後にinput delayが跳ね上がる。
直し方
- すべてのサードパーティスクリプトをasyncまたはdeferで読み込む。<head>で同期的に読み込まない。
- タグ一覧を監査し、誰も使っていないタグを削除する — スクリプトの削除は0msで済む唯一の修正。
- Partytownでタグをメインスレッドから外し（Web Workerで実行）、チャットなどのウィジェットはページ読み込み時ではなくユーザーの意図（最初のクリック）で読み込む。
問題
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->修正
<script async src="https://cdn.example-widget.com/loader.js"></script>
<!-- or better: inject on first user intent -->
<script>
chatButton.addEventListener("click", loadChatWidget, { once: true })
</script>