INP(Interaction to Next Paint)란? | SEO 용어집

Interaction to Next Paint(INP)는 사용자가 페이지와 상호작용(클릭·탭·키 입력)한 뒤 화면이 다음 프레임을 그려 시각적 반응을 보여주기까지 걸린 시간을 측정하는 Core Web Vitals 지표입니다. 2024년 3월 구글이 기존 First Input Delay(FID)를 대체해 공식 랭킹 지표로 도입했습니다.

왜 중요한가

FID는 '첫 입력의 지연 시간'만 측정했지만, INP는 페이지 수명 주기 전체의 모든 상호작용을 추적해 '가장 느린' 상호작용을 기준으로 점수를 매깁니다. 즉 사용자가 실제로 체감하는 반응성을 훨씬 정확하게 반영합니다. 구글에 따르면 2026년 현재 데스크톱 사이트의 약 36%, 모바일 사이트의 약 45%가 "좋음(Good)" 기준을 통과하지 못하고 있어, INP 최적화는 경쟁 페이지 대비 뚜렷한 차별화 포인트가 됩니다.

기준값

평가	INP 값
Good (좋음)	200ms 이하
Needs Improvement	200~500ms
Poor (나쁨)	500ms 초과

75번째 백분위(p75) 값을 기준으로 평가되며, Chrome User Experience Report(CrUX)에서 실제 사용자 데이터로 측정됩니다.

INP가 느려지는 원인

긴 JavaScript 작업: 메인 스레드를 50ms 이상 점유하는 태스크는 다음 상호작용의 반응을 직접 지연시킵니다.

입력 지연(Input Delay): 이미 처리 중인 다른 태스크 때문에 이벤트 핸들러가 실행되기까지 걸리는 시간.

프레젠테이션 지연(Presentation Delay): 이벤트 처리가 끝난 뒤 브라우저가 다음 프레임을 그리기까지의 지연. 복잡한 DOM·레이아웃 변경이 원인.

최적화 방법

긴 태스크 분할: setTimeout, scheduler.yield(), requestIdleCallback로 50ms 이상 태스크를 작은 청크로 쪼갭니다.

이벤트 핸들러 가볍게: 클릭 이벤트에서 무거운 작업을 즉시 실행하지 말고 requestAnimationFrame 이후로 미룹니다.

불필요한 리렌더 제거: React에서 memo, useMemo, useCallback으로 불필요한 재렌더를 방지합니다.

CSS contain 활용: contain: content 같은 속성으로 레이아웃·페인트 영역을 제한하면 프레임 렌더가 가벼워집니다.

제3자 스크립트 지연: 광고, 분석, 채팅 위젯은 async/defer로 메인 상호작용을 막지 않게 합니다.

측정 도구: PageSpeed Insights, Web Vitals Chrome 확장, Search Console의 Core Web Vitals 리포트에서 실제 INP 점수를 확인할 수 있습니다.

Sources:

inblog에서 활용하기

inblog는 블로그 페이지의 JavaScript 번들을 최소화하고 이미지 지연 로딩과 서버 사이드 렌더링을 기본 적용해, 블로그 운영자가 별도 최적화 없이 INP "Good" 기준을 충족하기 쉽습니다. 임베드 위젯이나 커스텀 스크립트를 추가할 때만 제3자 리소스의 무게를 점검하면 Core Web Vitals 랭킹 신호를 유지할 수 있습니다.

Interaction to Next Paint (INP)

왜 중요한가

기준값

INP가 느려지는 원인

최적화 방법

관련 인블로그 게시물

inblog에서 활용하기