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

<ph type="x-smartling-placeholder">

Chrome 사용 데이터에 따르면 사용자가 페이지에서 보내는 시간의 90% 가 페이지가 로드된 후에 소비되는 것으로 나타납니다. 따라서 페이지 수명 주기 전체의 반응성을 신중하게 측정하는 것이 중요합니다. INP 측정항목은 이를 평가합니다.

반응성이 좋다는 것은 페이지가 상호작용에 빠르게 반응한다는 의미입니다. 페이지가 상호작용에 응답하면 브라우저는 그린 다음 프레임에 시각적 피드백을 표시합니다. 시각적 피드백은 예를 들어 온라인 장바구니에 추가한 항목이 실제로 추가되었는지, 모바일 탐색 메뉴가 열렸는지, 로그인 양식의 콘텐츠가 서버에서 인증되었는지 등을 알려줍니다.

일부 상호작용은 자연스럽게 다른 상호작용보다 오래 걸리지만, 특히 복잡한 상호작용의 경우 사용자에게 무슨 일이 일어나고 있음을 알리기 위해 초기 시각적 피드백을 빠르게 표시하는 것이 중요합니다. 브라우저가 그릴 다음 프레임이 이를 수행할 수 있는 가장 빠른 기회입니다.

따라서 INP의 목적은 상호작용의 모든 최종적인 영향(예: 다른 비동기 작업에서 네트워크 가져오기 및 UI 업데이트)을 측정하는 것이 아니라 다음 페인트가 차단되는 시간을 측정하는 것입니다. 시각적 피드백을 지연시키면 사용자는 페이지가 충분히 빠르게 응답하지 않는다는 인상을 받을 수 있습니다. INP는 개발자가 사용자 환경에서 이 부분을 측정할 수 있도록 지원하기 위해 개발되었습니다.

다음 동영상의 오른쪽 예를 보면 아코디언이 열리는 것을 바로 알 수 있습니다. 왼쪽의 예시에서 열악한 반응성이 어떻게 사용자 경험을 저하시킬 수 있는지 확인할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

이 가이드에서는 INP의 작동 방식과 측정 방법을 설명하고 INP 개선을 위한 리소스를 소개합니다.

INP란 무엇인가요?

INP는 사용자가 페이지를 방문하는 전체 기간에 발생하는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하여 사용자 상호작용에 대한 페이지의 전반적인 응답성을 평가하는 측정항목입니다. 최종 INP 값은 관찰된 가장 긴 상호작용이며 이상점을 무시합니다.

상호작용은 동일한 논리적 사용자 동작 중에 실행되는 이벤트 핸들러 그룹입니다. 예: "탭" 터치 스크린 기기에서의 상호작용에는 pointerup, pointerdown, click 등 여러 이벤트가 포함됩니다. 상호작용은 JavaScript, CSS, 내장된 브라우저 컨트롤 (예: 양식 요소) 또는 이들의 조합으로 구동될 수 있습니다.

상호작용의 지연 시간은 사용자가 상호작용을 시작한 시점부터 브라우저가 다음 프레임을 그리는 시점까지 상호작용을 구동하는 이벤트 핸들러 그룹의 가장 긴 기간으로 구성됩니다.

<ph type="x-smartling-placeholder">

좋은 INP 점수란 무엇인가요?

라벨 고정(예: '좋음') 또는 '나쁨' 매우 어렵습니다 한편으로는 좋은 응답성을 우선시하는 개발 관행을 장려하는 것이 좋습니다. 반면, 사람들이 달성 가능한 개발 기대치를 설정하기 위해 사용하는 기기의 기능에는 상당한 변동이 있다는 사실을 고려해야 합니다.

우수한 반응성으로 사용자 경험을 제공하려면 페이지에 기록되는 페이지 로드의 75번째 백분위수를 기준으로 삼아 모바일 및 데스크톱 기기 간에 분할하여 측정하는 것이 좋습니다.

• INP가 200ms 미만이거나인 경우응답성이 우수하다는 의미입니다.
• INP가 200밀리초 초과 이하 또는 500밀리초일 경우 페이지의 응답성을 개선해야 합니다.
• INP가 500밀리초를 초과하면 페이지의 응답성이 좋지 않음을 의미합니다.

<ph type="x-smartling-placeholder"></ph>

상호작용의 내용

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

상호작용의 주요 동인은 JavaScript인 경우가 많지만, 브라우저는 체크박스, 라디오 버튼, CSS로 제공되는 컨트롤과 같이 JavaScript로 구동되지 않는 컨트롤을 통해 상호작용을 제공합니다.

INP의 목적에 따라 다음과 같은 상호작용 유형만 준수됩니다.

• 마우스로 클릭
• 터치스크린이 있는 기기를 탭합니다.
• 실제 키보드 또는 터치 키보드의 키를 누릅니다.

상호작용이 기본 문서 또는 문서에 삽입된 iframe에서 발생합니다(예: 삽입된 동영상에서 재생 클릭). 최종 사용자는 iframe에 무엇이 있는지 알 수 없습니다. 따라서 최상위 페이지의 사용자 환경을 측정하려면 iframe 내의 INP가 필요합니다. JavaScript Web API는 iframe 콘텐츠에 액세스할 수 없으므로 CrUX와 RUM의 차이로 표시될 수 있습니다.

상호작용은 여러 이벤트로 구성될 수 있습니다. 예를 들어 키 입력에는 keydown, keypress, keyup 이벤트가 포함됩니다. 탭 상호작용에는 pointerup 및 pointerdown 이벤트가 포함됩니다. 상호작용 내에서 지속 시간이 가장 긴 이벤트가 상호작용의 총 지연 시간에 영향을 미칩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

페이지의 INP는 사용자가 페이지를 떠날 때 계산됩니다. 결과적으로 수명 주기 동안 페이지의 전반적인 응답성을 나타내는 단일 값이 생성됩니다. INP가 낮다는 것은 페이지가 사용자 입력에 안정적으로 반응했음을 의미합니다.

INP는 최초 입력 지연 (FID)과 어떻게 다른가요?

INP는 첫 입력 지연 (FID)의 후속 측정항목입니다. 두 가지 모두 반응성 측정항목이지만 FID는 페이지에서의 첫 상호작용의 입력 지연만 측정했습니다. INP는 입력 지연부터 이벤트 핸들러를 실행하는 데 걸리는 시간, 브라우저에서 다음 프레임을 그릴 때까지의 모든 상호작용을 관찰하여 FID를 개선합니다.

이러한 차이점은 INP와 FID가 모두 다른 유형의 응답성 측정항목이라는 것을 의미합니다. FID가 사용자에게 표시되는 페이지의 첫인상을 평가하도록 설계된 로드 응답성 측정항목인 반면, INP는 페이지 상호작용의 수명 중 언제 발생하는지와 관계없이 전반적인 응답성을 더 신뢰할 수 있는 지표로 사용합니다.

INP 값이 보고되지 않으면 어떻게 해야 하나요?

페이지에서 INP 값을 반환하지 않을 수도 있습니다. 이 문제는 다음을 비롯한 여러 가지 이유로 발생할 수 있습니다.

• 페이지가 로드되었지만 사용자가 키보드의 키를 클릭하거나 탭하거나 누르지 않았습니다.
• 페이지가 로드되었지만 사용자가 요소 스크롤 또는 마우스 오버 등 측정되지 않는 동작을 사용하여 페이지와 상호작용했습니다.
• 페이지와 상호작용하도록 스크립트되지 않은 헤드리스 브라우저 또는 검색 크롤러 등의 봇이 페이지에 액세스하는 경우

INP 측정 방법

INP는 실제 사용자 상호작용을 시뮬레이션할 수 있는 범위까지 현장과 실습에서 모두 측정할 수 있습니다.

<ph type="x-smartling-placeholder">

들판

INP 최적화 여정은 필드 데이터에서 시작하는 것이 가장 좋습니다. 기껏해야 RUM (Real User Monitoring)의 필드 데이터는 페이지의 INP 값뿐만 아니라 INP 값 자체에 영향을 준 특정 상호작용, 페이지 로드 중이나 페이지 로드 후에 상호작용이 발생했는지 여부, 상호작용 유형 (클릭, 키 누름 또는 탭) 및 상호작용의 어떤 부분이 반응에 영향을 미쳤는지 식별하는 데 도움이 되는 기타 중요한 타이밍을 강조하는 문맥 데이터도 제공합니다.

<ph type="x-smartling-placeholder">

웹사이트가 Chrome 사용자 환경 보고서 (CrUX)에 포함되기 위한 요건을 충족하면 PageSpeed Insights의 CrUX를 통해 (및 기타 Core Web Vitals) INP의 필드 데이터를 빠르게 가져올 수 있습니다. 최소한 웹사이트의 INP에 대한 출처 수준 사진을 가져올 수 있지만, 경우에 따라 URL 수준 데이터도 가져올 수 있습니다.

그러나 CrUX는 문제가 있는 경우 알려줄 수 있지만 문제의 원인을 알려줄 수는 없습니다. RUM 솔루션을 사용하면 응답성 문제가 발생한 페이지, 사용자 또는 사용자 상호작용에 대한 자세한 내용을 발견할 수 있습니다. 개별 상호작용에 INP를 부여할 수 있으면 추측에 의존하거나 노력을 허비하지 않아도 됩니다.

실험실

페이지의 상호작용이 느리다는 것을 나타내는 필드 데이터가 있는 경우 실험실에서 테스트를 시작하는 것이 좋습니다. 필드 데이터를 사용하면 실습에서 문제가 되는 상호작용을 재현하는 작업이 훨씬 더 쉬워집니다.

그러나 필드 데이터가 없을 수도 있습니다. INP는 일부 실험실 도구에서 측정할 수 있지만, 실험실 테스트 중 페이지의 결과 INP 값은 측정 기간 동안 수행된 상호작용에 따라 달라집니다. 사용자 행동은 예측할 수 없고 매우 가변적일 수 있습니다. 즉, 실험실의 테스트에서는 필드 데이터와 동일한 방식으로 문제 상호작용을 표면화하지 못할 수 있습니다. 또한 일부 실습 도구는 상호작용 없이 페이지 로드만 관찰하므로 페이지의 INP를 보고하지 않습니다. 이러한 경우 총 차단 시간 (TBT)이 INP의 합리적인 프록시 측정항목일 수 있지만 그 자체로 INP를 대체하지는 않습니다.

페이지의 INP를 평가할 때 실습 도구에 제한사항이 있지만, 실습에서 느린 상호작용을 재현하기 위한 몇 가지 전략이 있습니다. 전략에는 사용자 경험에서 중요한 부분 동안 느린 상호작용을 파악하기 위해 일반적인 사용자 플로우를 따르고 그 과정에서 상호작용을 테스트하며 기본 스레드가 가장 많을 때 페이지가 로드될 때 페이지와 상호작용하는 것이 포함됩니다.

<ph type="x-smartling-placeholder">

INP 개선 방법

INP 최적화에 관한 가이드 모음에서 현장에서 느린 상호작용을 식별하고 실험실 데이터를 사용하여 원인을 파악하고 최적화하는 과정을 안내합니다.

변경 로그

가끔 측정항목을 측정하는 데 사용되는 API에서 버그가 발견되며, 측정항목 자체의 정의에서도 버그가 발견됩니다. 그 결과, 때때로 변경이 이루어져야 하며, 내부 보고서 및 대시보드에서 이러한 변경사항이 개선되거나 회귀로 나타날 수 있습니다.

이를 관리하는 데 도움이 되도록 이러한 측정항목의 구현 또는 정의에 대한 모든 변경사항이 이 변경 로그에 표시됩니다.

이러한 측정항목에 관한 의견이 있으면 web-vitals-feedback Google 그룹에 알려주세요.

학습한 내용 테스트