📖 개념 정의 및 실무 적용

INP는 구글이 기존의 FID(First Input Delay)를 대체하여 도입한 핵심 웹 성능 지표로, 페이지 로드 시점의 첫 반응뿐만 아니라 전체 세션 동안 발생하는 모든 클릭, 탭, 키보드 인터랙션의 응답성을 평가합니다. 반응 속도가 느리면 사용자는 서비스가 버벅인다고 느끼며 즉시 이탈하게 되므로, 전자상거래 전환율과 SEO 랭킹 모두에 직접적인 타격을 줍니다.

💻 실무 활용 코드 스니펫 (JAVASCRIPT)

const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.duration > 200) { console.warn('Long INP detected:', entry.duration, entry); } } }); observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });

⚡ 5분 만에 적용하는 실행 스텝

1. Chrome DevTools의 Performance 패널을 열고 사용자의 실제 인터랙션을 시뮬레이션하여 Long Task를 식별합니다.
2. Web Vitals JavaScript 라이브러리를 사이트에 주입하여 실제 유저(RUM)의 INP 데이터를 수집하고 GA4나 BigQuery로 전송합니다.
3. 메인 스레드를 오래 점유하는 무거운 이벤트 핸들러(예: 복잡한 DOM 조작, 긴 복잡한 연산)를 찾아내어 비동기 처리합니다.
4. 개선 후 Search Console과 RUM 도구를 통해 P75 INP 점수가 200ms 이하로 떨어졌는지 모니터링합니다.

❓ 자주 묻는 질문 (FAQ)