상호작용을 막는 서드파티 스크립트: 진단과 격리
무슨 일이 일어나는가
서드파티 스크립트 — 분석, 태그 매니저, 광고, 채팅 위젯, 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>