INP (Interaction to Next Paint) – 코어 웹 바이탈 보고서 따라잡기

구글은 코어 웹 바이탈 보고서의 측정 지표인 FID (First Input Delay)를 대체하여 새로운 지표인 INP (Interaction to Next Paint)를 활용할 계획이라 발표하였습니다.

INP란 무엇일까?

INP는 클릭, 키보드 입력 등 사용자의 입력이 발생할 때 화면이 얼마나 빨리 변화하는지(상호작용)에 대한 응답성을 측정하는 요소입니다. 첫 상호작용만 측정하는 FID와 달리 페이지의 모든 상호작용을 측정하기 때문에 응답성에 대한 보다 신뢰할 수 있는 지표의 역할을 가집니다.

클릭 후 아코디언이 열리기까지 시간이 오래걸리는 경우가 응답성이 좋지못한 예제가 될 수 있습니다. 사용자는 대기시간동안 동작이 실행되고 있는지 알 수 없기 때문에 여러번 클릭을 하게 되고 아코디언은 예기치 않게 열리고 닫히게 됩니다.

좋은 INP 값은 무엇일까?

사용자들의 다양한 환경(기기의 사양, 네트워크의 상태 등)을 고려해야 합니다. 또한 페이지별로 발생하는 상호작용의 빈도가 다르고, 일시적인 지연증가 등의 예외상황이 발생하는 것을 고려하여 전체 데이터 중 최상위 혹은 최하위 데이터가 아닌 75번째 백분위수를 임계값으로 설정하는것을 권장합니다.

• 응답성 우수 : 200밀리초 이하의 INP
• 응답성 개선필요 : 200밀리초 초과 ~ 500밀리초 미만의 INP
• 응답성 낮음 : 500밀리초 초과의 INP

내 사이트의 INP를 알아보는 방법

INP를 알아보는 방법에는 현장 측정과 실험실 측정이 있습니다. 현장 측정은 웹사이트 방문자의 실제 데이터를 활용하는 방식이고 실험실 측정은 기기, 네트워크 상태 등 테스트 환경을 사전에 만들어 둔 뒤 데이터를 수집하는 방식입니다.

두 방법 중 실제 사용자의 데이터를 활용하는 현장 측정방식 사용을 권장하며 테스트를 위한 몇 가지 툴을 아래에 소개합니다.

• [현장 측정 도구] PageSpeed Insights
• [현장 측정 도구] 구글 사용자 경험 리포트 (CrUX Report)
• [실험실 측정 도구] 개발자 도구 Lighthouse Timespan mode
• [실험실 측정 도구] Web Vitals 크롬 확장 프로그램

더 알고싶다면

• Google의 코어 웹 바이탈(Core Web Vitals) 보고서란? : 코어 웹 바이탈 (Core Web Vitals) – 핵심 성능 보고서
• 코어 웹 바이탈 보고서의 데이터 세트(CrUX) : 핵심 성능 보고서(Core Web Vitals)의 데이터는 어떻게 수집될까?

참고링크

• INP 알아보기 : https://web.dev/inp/
• 구글 코어 웹 바이탈 보고서의 INP 도입 : https://developers.google.com/search/blog/2023/05/introducing-inp
• Understanding and Optimizing Interaction to Next Paint (INP) : https://www.youtube.com/watch?v=BoaORHnJYAE