메인 스레드 차단: 핸들러가 실행되기도 전에 높은 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())