Long Task는 무엇이며 INP 성능 개선과 어떤 관련이 있나요?

Long Task는 브라우저 메인 스레드를 50ms 이상 점유하는 작업을 말합니다. JavaScript 실행, 스타일 계산, 레이아웃, 렌더링이 길게 이어지면 브라우저는 그동안 사용자 입력에 즉시 반응하지 못합니다.

INP(Interaction to Next Paint)는 사용자의 클릭, 탭, 키보드 입력 후 다음 화면 업데이트까지 걸리는 반응성을 측정합니다. Long Task가 많으면 입력 이벤트가 큐에서 기다리거나, 이벤트 핸들러가 늦게 실행되거나, 화면 업데이트가 밀려 INP가 나빠집니다.

개선 방법은 작업을 작게 쪼개는 것입니다.

• 큰 배열 처리나 JSON 파싱을 chunk 단위로 나누기
• 중요하지 않은 작업은 idle 시간으로 미루기
• 무거운 계산은 Web Worker로 이동
• hydration 범위를 줄이거나 지연하기
• 이벤트 핸들러에서 동기 작업 최소화

for (let i = 0; i < items.length; i += 100) {
  process(items.slice(i, i + 100));
  await new Promise((resolve) => setTimeout(resolve, 0));
}

위처럼 중간에 브라우저에게 숨 쉴 틈을 주면 입력 처리 기회가 생깁니다. 단, 무작정 쪼개면 총 처리 시간은 늘 수 있으므로 사용자에게 중요한 입력 경로를 먼저 측정해야 합니다.