FID의 대체 지표: INP(Interaction to Next Paint)

최소희·2024년 4월 28일

프론트엔드 학습

목록 보기

13/14

기존 Core Web Vitals에서 상호 작용 응답성을 측정하는 방식인 First Input Delay(FID)의 단점을 개선하여, Interaction to Next Paint(INP)가 앞으로 대체되게 된다.

원문: https://web.dev/blog/inp-cwv-launch

INP(Interfaction to Next Paint): 다음 페인트와의 상호작용

INP는 Event Timing API의 데이터를 사용하여 페이지 응답성을 평가하는 Core Web Vitals 측정 항목이다.

INP는 페이지 수명 동안, 페이지와의 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하고 이상점을 무시하고 가장 긴 기간을 보고한다.

그래서 INP가 낮으면 페이지가 대다수의 사용자 상호작용에 일관되게 빠르게 반응할 수 있다는 것을 의미한다.

INP의 목적

INP의 목표는 사용자가 시작하는 모든 상호작용 또는 대부분의 상호작용에서 사용자가 상호작용을 시작한 시점부터 다음 프레임이 그려질 때까지의 시간을 최소화하는 것입니다.

INP는 상호작용의 모든 최종 효과(예: 다른 비동기 작업의 네트워크 가져오기 및 UI 업데이트)가 아니라 다음 페인트가 차단되는 시간을 측정하는 것이다.

시작적 피드백이 지연되면, 사용자가 페이지가 사용자의 동작에 반응하지 않는다고 생각하게 만들 수 있다.
INP 비교 영상
왼쪽 화면은 사용자의 아코디언 클릭 이벤트에 대한 다음 프레임 반응이 지연되어 여러 번 클릭하는 모습이다.
오른쪽 화면은 사용자의 반응에 아코디언이 문제없이 빠르게 열린다.
비교 영상 출처 및 보기: https://web.dev/articles/inp/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WSmcjiQC4lyLxGoES4dd.mp4

좋은 INP 점수

INP metrics

INP가 200밀리초 이하: 페이지의 응답성이 양호하다.
INP가 200밀리초에서 500밀리초 사이: 페이지의 응답성을 개선해야 한다.
INP가 500밀리초보다 클 경우: 페이지의 응답성이 좋지 않다.

상호작용

interaction

상호작용의 수명이다. 입력 지연은 이벤트 핸들러가 실행될 때까지 지속되며, 기본 스레드의 장기 작업과 같은 요인으로 인해 발생할 수 있다.
그런 다음 상호작용의 이벤트 핸들러가 실행되고 다음 프레임이 표시되기 전에 또 다른지연(페이지가 새로운 정보나 상태를 갱신하고, 화면에 변경 사항을 반영하기 위한 시간)이 발생할 수 있다.

INP의 경우에는 다음 상호작용 유형만 관찰된다.