Interaction to Next Paint란 무엇일까요?
Interaction to Next Paint
INP (Interaction to Next Paint)
- 다음 페인트에 대한 상호작용
- Event Timing API의 데이터를 사용해 페이지 응답성을 평가하는 안정적인 Core Web Vitals 측정항목
- 페이지 수명 동안 페이지와의 모든 클릭, 탭, 키보드 상호작용의 지연시간을 관찰
- 이상점을 무시하고 가장 긴 기간을 보고
INP가 낮으면 페이지가 대다수의 사용자 상호작용에 일관되게 빠르게 반응할 수 있다는 의미
INP에 대해
INP의 목표
- 사용자가 상호작용을 시작한 시점부터 다음 프레임이 그려질 때까지의 시간을 최소화하는 것
상호작용의 지연 시간
- 사용자가 상호작용을 시작한 시점부터 다음 프레임에 시각적 피드백이 표시되는 순간까지 상호작용을 유도하는 이벤트 핸들러 그룹에서 가장 긴 단일 기간으로 구성됨
좋은 INP 점수
200ms이하이면 응답성이 양호500ms보다 크면 좋지 않음
상호작용
INP의 경우, 다음 상호작용 유형만 관찰
- 마우스 클릭
- 터치스크린 탭
- 물리적 키보드 또는 터치 키보드의 키 누르기
INP와 FID의 차이
FID (First Input Delay)
- 페이지에서 첫 번째 상호작용의 입력 지연만 측정
INP
- 입력 지연부터 이벤트 핸들러를 실행하는 데 걸리는 시간,
- 마지막으로 브라우저가 다음 프레임을 그릴 때까지의 모든 페이지 상호작용을 고려해 FID를 개선
- 전반적인 응답성을 더 신뢰할 수 있는 지표
INP 값이 보고되지 않는 경우
페이지에서 INP 값을 반환하지 않을 수 있음
- 페이지가 로드되었지만 사용자가 상호작용한 적이 없음
- 페이지가 로드되었지만 사용자가 측정되지 않는 동작을 사용하여 페이지와 상호작용
- 스크롤 또는 요소 위로 마우스 오버
- 페이지와 상호작용하도록 스크립트를 작성하지 않은 봇이 페이지에 액세스하는 경우
- 검색 크롤러 또는 헤드리스 브라우저