INP(Interaction to Next Paint)는 사용자 상호작용에 대한 웹페이지의 반응성을 측정합니다. 이 문서에서는 Google의 Core Web Vitals 측정항목을 설명하고, 더 이상 사용되지 않는 FID 측정항목과 어떻게 다른지 살펴보고, ‘양호’ 점수를 달성하기 위해 JavaScript 실행 경로를 최적화하는 방법을 간략하게 설명합니다.

1. INP(Interaction to Next Paint)란 무엇인가요?

INP는 사용자가 페이지를 방문하는 동안 모든 사용자 상호작용(클릭, 탭, 키보드 입력)의 지연 시간을 추적합니다. 사용자가 작업을 시작한 시점과 브라우저가 시각적 업데이트를 표시하는 다음 프레임을 그리는 시점 사이의 기간을 측정합니다.

FID(첫 번째 입력 지연)와의 차이점

FID는 Google의 이전 응답 측정항목이었지만 우회하기 쉬운 제한 사항이 있었습니다.

1. 첫 번째 상호작용 편향: FID는 첫 번째 사용자 상호작용만 모니터링했습니다. 메뉴 탐색이나 필터 클릭으로 인한 후속 지연은 무시되었습니다.
2. 무시된 스크립트 실행: FID는 입력 지연(브라우저가 이벤트를 수신하는 데 걸린 시간)만 계산했습니다. 실제 JavaScript 이벤트 핸들러를 실행하고 업데이트된 UI를 그리는 데 필요한 시간을 무시했습니다.

INP는 세션의 전체 수명 주기에 걸쳐 모든 상호 작용을 추적하고 최악의 상호 작용(이상값 제외)을 보고함으로써 이러한 제한 사항을 해결합니다.

INP 점수 임계값

• 양호(통과): 200ms 이하
• 개선 필요: 200ms ~ 500ms
• 나쁨: 500ms 이상

2. 낮은 INP 점수의 주요 원인

낮은 INP 점수의 핵심 원인은 메인 스레드 차단입니다.

브라우저는 단일 기본 스레드에서 UI 렌더링 및 JavaScript 실행을 처리하기 때문에 복잡한 스크립트 논리를 실행하면 브라우저가 뷰포트를 업데이트하는 것을 즉시 차단합니다. 클릭으로 인해 300ms가 소요되는 작업이 트리거되면 해당 기간 동안 화면이 정지되어 INP 점수가 높아집니다.

3. INP 최적화 기술

1) Task Yielding(장기 작업 분할)

50ms 이상 실행되는 JavaScript 함수는 “장기 작업"으로 플래그가 지정됩니다. 이 문제를 해결하려면 장기 실행 작업을 모듈식 단계로 나누고 기본 스레드를 브라우저에 다시 제공하여 UI 프레임을 처리하세요.

// ✕ Bad: Continuous loop blocking the main thread
function processArray(items) {
  for (let item of items) {
    calculateComplexResult(item); // Freezes the browser
  }
}

// ◯ Good: Yielding control periodically using async timeouts
async function processArrayOptimized(items) {
  for (let i = 0; i < items.length; i++) {
    calculateComplexResult(items[i]);

    // Yield every 50 items to let the browser paint
    if (i % 50 === 0) {
      await yieldToMainThread();
    }
  }
}

function yieldToMainThread() {
  // Use scheduler.yield if supported, otherwise fallback to setTimeout
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return window.scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

2) 사용자 피드백 루프 최적화

대용량 로직을 실행해야 하는 경우 대용량 처리 스크립트가 시작되기 전에 “로드 스피너” 또는 활성 버튼 상태로 UI를 업데이트해야 합니다.

button.addEventListener('click', () => {
  // Step 1: Update UI immediately (registers low INP latency)
  toggleSpinner(true);

  // Step 2: Queue the heavy calculation task for the next event loop
  setTimeout(() => {
    executeHeavyCalculation();
    toggleSpinner(false);
  }, 0);
});

4. 결론

INP 최적화는 단순히 SEO 감사를 확인하는 것이 아닙니다. 사용자 입력에 대한 즉각적인 시각적 피드백을 제공하면 전환율이 높아지고 사용자가 응답하지 않는 페이지를 떠나는 일이 방지됩니다. Chrome DevTools의 ‘성능’ 패널을 사용하여 긴 작업을 추적하고 사용자 경험을 최적화하세요.