다음 페인트에 대한 상호작용 (INP)은 Event Timing API의 데이터를 사용하여 페이지 응답성을 평가하는 안정적인 Core Web Vitals 측정항목입니다. INP는 페이지 수명 동안 페이지와의 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하고 이상점을 무시하고 가장 긴 기간을 보고합니다. INP가 낮으면 페이지가 대다수의 사용자 상호작용에 일관되게 빠르게 반응할 수 있다는 의미입니다.
우수한 응답성은 페이지가 상호작용에 빠르게 반응한다는 의미입니다. 페이지가 상호작용에 응답하면 브라우저는 렌더링되는 다음 프레임에 시각적 피드백을 표시하여 상호작용이 성공했음을 표시합니다. 예를 들어 다음 항목에 관한 의견을 제공할 수 있습니다.
- 온라인 장바구니에 추가한 상품이 실제로 추가되는지 여부
- 모바일 탐색 메뉴가 열렸는지 여부입니다.
- 로그인 콘텐츠가 서버에서 인증되는지 여부.
일부 상호작용은 자연스럽게 다른 상호작용보다 시간이 오래 걸리지만 특히 복잡한 상호작용의 경우 초기 시각적 피드백을 사용자에게 빠르게 제시하는 것이 중요합니다. 다음 페인트까지의 시간이 이 작업을 할 수 있는 가장 이른 기회입니다. 따라서 INP의 목적은 상호작용의 모든 최종 효과 (예: 다른 비동기 작업의 네트워크 가져오기 및 UI 업데이트)가 아니라 다음 페인트가 차단되는 시간을 측정하는 것입니다. 시각적 피드백을 지연하면 사용자가 페이지가 사용자의 동작에 반응하지 않는다고 생각하게 만들 수 있습니다.
INP의 목표는 사용자가 시작하는 모든 상호작용 또는 대부분의 상호작용에서 사용자가 상호작용을 시작한 시점부터 다음 프레임이 그려질 때까지의 시간을 최소화하는 것입니다.
INP는 페이지와의 모든 상호작용을 관찰하여 계산됩니다. 대부분의 사이트에서 최악의 지연 시간과의 상호작용은 INP로 보고됩니다. 하지만 상호작용이 많은 페이지의 경우 임의의 지연으로 인해 다른 반응형 사이트에서 비정상적으로 긴 지연 시간이 발생할 수 있습니다. 상호작용이 많을수록 이러한 일이 일어날 가능성도 높아집니다. 이러한 문제에 대응하고 이러한 유형의 페이지에 대한 실제 응답성을 더 정확하게 측정하기 위해 Google에서는 상호작용 50회마다 가장 높은 상호작용 하나를 무시합니다. 대부분의 페이지 환경은 50회를 초과하는 상호작용이 없으므로 브라우저는 거의 항상 최악의 상호작용을 보고합니다. 그런 다음 모든 페이지 조회의 75번째 백분위수가 평소와 같이 보고되며, 이 과정에서 이상점을 제거하여 일반적인 사용자 환경을 더 잘 나타내는 값을 제공합니다.
상호작용은 동일한 논리적 사용자 동작 중에 실행되는 이벤트 핸들러 그룹입니다. 예를 들어 터치스크린 기기의 '탭' 상호작용에는 pointerup, pointerdown, click 등 여러 이벤트가 포함됩니다. 상호작용은 JavaScript, CSS, 양식 요소 등의 기본 제공 브라우저 컨트롤 또는 이러한 요소의 조합으로 구동될 수 있습니다.
상호작용의 지연 시간은 사용자가 상호작용을 시작한 시점부터 다음 프레임에 시각적 피드백이 표시되는 순간까지 상호작용을 유도하는 이벤트 핸들러 그룹에서 가장 긴 단일 기간으로 구성됩니다.
핵심 사항: INP 측정 방법에 관한 자세한 내용은 '상호작용의 요소'를 참고하세요.
좋은 INP 점수란 무엇인가요?
우수한 응답성으로 사용자 환경을 제공하려면 필드에 기록된 페이지 로드의 75번째 백분위수를 모바일 및 데스크톱 기기별로 세분화하여 측정해야 합니다.
- INP가 200밀리초 이하이면 페이지의 응답성이 양호하다는 의미입니다.
- INP가 200밀리초에서 500밀리초 사이인 경우 페이지의 응답성을 개선해야 합니다.
- INP가 500밀리초보다 크면 페이지의 응답성이 좋지 않은 것입니다.
상호작용이란 무엇인가요?
상호작용의 기본 동인은 대개 자바스크립트이지만 브라우저는 체크박스, 라디오 버튼, CSS에서 제공하는 컨트롤과 같이 JavaScript로 구동되지 않는 컨트롤을 통해 상호작용을 제공합니다.
INP의 경우에는 다음 상호작용 유형만 관찰됩니다.
- 마우스로 클릭합니다.
- 터치스크린이 있는 기기를 탭합니다.
- 물리적 키보드 또는 터치 키보드의 키 누르기
핵심사항: 마우스 오버와 스크롤은 INP에 반영되지 않습니다. 그러나 키보드를 사용하여 스크롤 (스페이스바, 페이지 위로, 페이지 아래로 등)하면 키 입력이 필요하며, 이로 인해 INP에서 측정하는 다른 이벤트가 트리거될 수 있습니다. 이에 따른 스크롤은 INP 계산에 포함되지 않습니다.
상호작용은 기본 문서 또는 문서에 삽입된 iframe에서 발생합니다(예: 삽입된 동영상에서 재생 클릭). 최종 사용자는 페이지의 어떤 부분이 iframe에 있는지 알지 못하므로 iframe 내에서 INP를 측정하여 전체 페이지의 INP를 정확하게 측정해야 합니다. 그러나 JavaScript Web API는 iframe 콘텐츠에 액세스할 수 없으며 iframe 내에서 INP를 측정하지 못할 수도 있습니다. CrUX와 RUM의 차이를 알 수 있습니다.
상호작용은 여러 이벤트로 구성될 수 있습니다. 예를 들어 키 입력에는 keydown, keypress, keyup 이벤트가 포함되며 탭 상호작용에는 pointerup 및 pointerdown 이벤트가 포함됩니다. 상호작용 내에서 지속 시간이 가장 긴 이벤트가 상호작용의 지연 시간으로 선택됩니다.
INP는 사용자가 페이지를 떠날 때 계산되며, 그 결과로 전체 수명 주기 동안 페이지의 전반적인 응답성을 나타내는 단일 값이 생성됩니다. INP가 낮으면 페이지가 사용자 입력에 안정적으로 반응한다는 의미입니다.
INP는 최초 입력 반응 시간 (FID)과 어떻게 다른가요?
INP는 최초 입력 반응 시간 (FID)의 후속 측정항목입니다. 둘 다 반응성 측정항목이지만 FID는 페이지에서 첫 번째 상호작용의 입력 지연만 측정했습니다. INP는 입력 지연부터 이벤트 핸들러를 실행하는 데 걸리는 시간, 마지막으로 브라우저가 다음 프레임을 그릴 때까지의 모든 페이지 상호작용을 고려하여 FID를 개선합니다.
이러한 차이점은 INP와 FID가 모두 다른 유형의 응답성 측정항목이라는 것을 의미합니다. FID가 사용자에 대한 페이지의 첫 번째 노출을 평가하기 위해 설계된 로드 반응성 측정항목인 경우, INP는 페이지 상호작용이 발생하는 시점과 관계없이 전반적인 응답성을 더 신뢰할 수 있는 지표입니다.
INP 값이 보고되지 않으면 어떻게 하나요?
페이지에서 INP 값을 반환하지 않을 수 있습니다. 이 현상은 다음을 비롯한 여러 가지 이유로 인해 발생할 수 있습니다.
- 페이지가 로드되었지만 사용자가 상호작용한 적이 없습니다.
- 페이지가 로드되었지만 사용자가 측정되지 않는 동작(예: 스크롤 또는 요소 위로 마우스 오버)을 사용하여 페이지와 상호작용했습니다.
- 페이지와 상호작용하도록 스크립트를 작성하지 않은 봇(예: 검색 크롤러 또는 헤드리스 브라우저)이 페이지에 액세스하는 경우
INP 측정 방법
INP는 현장과 실험실 모두에서 다양한 도구를 사용하여 측정할 수 있습니다.
핵심 사항: 웹사이트의 INP를 측정하는 가장 좋은 방법은 현장의 실제 사용자로부터 측정항목을 수집하는 것입니다. 성능을 평가하기 위해 실습 데이터에 의존하는 것이 익숙하다면 실습 데이터와 필드 데이터가 다를 수 있는 이유와 해야 할 일을 읽어보세요.
현장
INP 최적화를 위한 여정은 필드 데이터로 시작하는 것이 이상적입니다. 최적으로 Real User Monitoring(RUM)의 필드 데이터는 페이지의 INP 값뿐만 아니라 INP 값 자체에 대해 책임이 있는 특정 상호작용(페이지 로드 중 또는 이후에 발생했는지 여부), 상호작용 유형(클릭, 키 누름 또는 탭), 기타 중요한 정보를 강조하는 문맥 데이터도 제공합니다.
웹사이트가 Chrome 사용자 환경 보고서(CrUX)에 포함되기만 한다면 PageSpeed Insights의 CrUX를 통해 다른 코어 웹 바이탈의 데이터와 함께 INP 필드 데이터를 빠르게 확인할 수 있습니다. 최소한 웹사이트 INP의 출처 수준 그림을 가져올 수 있지만 경우에 따라 페이지 수준 데이터를 가져올 수도 있습니다.
그러나 CrUX는 개괄적으로 문제가 있다고 알려줄 수 있지만 문제를 완전히 이해하는 데 도움이 되는 충분한 세부정보를 제공하지 않는 경우가 많습니다. RUM 솔루션을 사용하면 상호작용이 느린 페이지, 사용자 또는 사용자 상호작용에 관한 세부정보를 발견할 수 있습니다. 개별 상호작용에 INP의 기여도를 부여할 수 있으면 추측과 노력의 낭비를 방지할 수 있습니다.
실험실
상호작용이 느리다는 것을 나타내는 필드 데이터가 확보된 후 실험실에서 테스트를 시작하는 것이 좋습니다. 하지만 필드 데이터가 없는 경우 실습에서 느린 상호작용을 재현하기 위한 몇 가지 전략이 있습니다. 이러한 전략에는 일반적인 사용자 플로우를 따르고 그 과정에서 상호작용을 테스트하는 것은 물론, 사용자 환경의 중요한 부분에서 느린 상호작용을 노출하기 위해 기본 스레드가 가장 많을 때 로드 중에 페이지와 상호작용하는 것이 포함됩니다.
INP 개선 방법
현장에서 느린 상호작용을 식별하고 실험실 데이터를 사용하여 이를 최적화하는 방법은 INP 최적화 가이드 모음을 참고하세요.
변경 로그
측정항목을 측정하는 데 사용되는 API에서 버그가 발견되는 경우도 있고 측정항목 자체의 정의에서 발견되는 경우도 있습니다. 그 결과, 때때로 변경이 필요하며, 이러한 변경은 내부 보고서와 대시보드에서 개선 또는 회귀로 표시될 수 있습니다.
이를 쉽게 관리할 수 있도록 이러한 측정항목의 구현 또는 정의에 대한 모든 변경사항이 이 변경 로그에 표시됩니다.
이러한 측정항목에 관한 의견이 있으면 web-vitals-feedback Google 그룹에 제공해 주세요.