스마트 CDN OptiPic — 압축 그 이상. WebP로 변환을 통한 복잡한 즉석 이미지 최적화 [더]
Previous Next

다음 페인트로의 상호작용 (INP)

Chrome 사용 데이터에 따르면 사용자가 페이지에서 하는 작업 중 90%가 로딩이 끝난 후에 발생합니다. 따라서 페이지 수명 주기 동안 반응성을 신중하게 측정하는 것이 중요합니다. 이것이 INP(Immediate Feedback) 지표가 평가하는 바입니다.

좋은 반응성은 페이지가 사용자의 상호작용에 빠르게 응답하는 것을 의미합니다. 페이지가 상호작용에 응답할 때, 그 결과로 '시각적 피드백'이 나타납니다. 시각적 피드백은 브라우저가 다음 프레임에서 제공하는 것으로, 예를 들어 온라인 쇼핑 카트에 항목을 추가한 것이 실제로 추가되고 있는지, 모바일 네비게이션 메뉴가 열렸는지, 로그인 양식의 내용이 서버에서 인증되는지 등을 알려줍니다.

일부 상호작용은 자연스럽게 다른 것보다 더 오래 걸릴 수 있습니다. 그러나 특히 복잡한 상호작용의 경우, 사용자에게 빠르게 일부 초기 시각적 피드백을 제공하는 것이 중요합니다. 다음 페인트까지 걸리는 시간이 이를 위한 가장 빠른 기회입니다. 따라서 INP의 의도는 상호작용의 모든 최종 효과(네트워크 패치 및 기타 비동기 작업에서의 UI 업데이트 등)를 측정하는 것이 아니라, '다음' 페인트가 차단되는 시간을 측정하는 것입니다. 시각적 피드백을 지연함으로써 페이지가 사용자의 동작에 응답하지 않는 것 같은 인상을 줄 수 있습니다.

INP의 목표는 사용자가 상호작용을 시작한 시점부터 다음 프레임이 그려질 때까지 걸리는 시간을 가능한 한 짧게 하는 것입니다. 사용자가 수행하는 모든 또는 대부분의 상호작용에 대해 해당됩니다.

다음 비디오에서, 오른쪽 예제는 아코디언이 열리고 있다는 즉각적인 시각적 피드백을 제공합니다. 또한 좋지 않은 반응성이 입력에 여러 가지 의도하지 않은 응답을 일으킬 수 있다는 것을 보여줍니다. 사용자가 경험이 망가졌다고 생각하기 때문입니다.

An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.

이 기사에서는 INP가 작동하는 방식, 측정하는 방법 및 개선 자료에 대해 설명합니다.

INP는 사용자 상호작용에 대한 페이지의 전체적인 응답성을 평가하는 지표로, 사용자가 페이지를 방문하는 동안 발생하는 모든 클릭, 탭 및 키보드 상호작용의 지연시간을 관찰하여 계산됩니다. 최종 INP 값은 가장 긴 상호작용을 기준으로 하며, 이상치는 무시됩니다.

위에서 언급한 대로, INP는 페이지와의 모든 상호작용을 관찰하여 계산됩니다. 대부분의 사이트에서는 가장 느린 응답 시간을 가진 상호작용이 INP로 보고됩니다. 그러나 상호작용이 많은 페이지의 경우, 임의의 문제로 인해 일반적으로 응답성이 좋은 페이지에서도 예외적으로 높은 상호작용이 발생할 수 있습니다. 상호작용이 많을수록 이런 현상이 발생할 확률이 더 높아집니다. 이를 해결하기 위해 이러한 유형의 페이지의 실제 응답성을 더 잘 나타내기 위해 50회 상호작용마다 가장 큰 상호작용을 무시합니다. 대부분의 페이지 경험은 50회 이상의 상호작용을 갖지 않으므로 최악의 상호작용이 보고됩니다. 그런 다음 모든 페이지 뷰의 75번째 백분위 수가 일반적으로 보고되며, 이를 통해 이상치가 제거된 값이 사용자 대다수가 경험하는 값을 제공합니다.

상호작용은 동일한 논리적 사용자 제스처 중에 발생하는 이벤트 핸들러 그룹입니다. 예를 들어, 터치스크린 장치에서의 "탭" 상호작용은 pointerup, pointerdown, click과 같은 여러 이벤트로 구성됩니다. 상호작용은 JavaScript, CSS, 내장된 브라우저 컨트롤(예: 폼 요소) 또는 그들의 조합에 의해 구동될 수 있습니다.

상호 작용의 대기 시간은 상호 작용을 구동하는 이벤트 처리기 그룹의 단일 가장 긴 지속 시간으로 이루어져 있습니다. 사용자가 상호 작용을 시작한 시점부터 다음 프레임이 시각적 피드백과 함께 제시되는 순간까지입니다.

"good" 또는 "poor"와 같은 응답성 측정 기준에 대한 라벨을 정하는 것은 어렵습니다. 한편으로는 좋은 응답성을 우선시하는 개발 관행을 장려하고 싶지만, 다른 한편으로는 사람들이 개발 기대치를 설정할 때 사용하는 기기의 능력에 상당한 변동이 있다는 사실을 고려해야 합니다.

좋은 응답성을 가진 사용자 경험을 제공하기 위해서는, 현장에서 기록된 페이지 로드의 75번째 백분위수를 모바일 및 데스크톱 기기별로 분할하여 측정하는 것이 좋습니다:

  • INP가 200 밀리 초 이하이면 페이지의 반응성이 좋습니다.
  • INP가 200 밀리 초 이상 500 밀리 초 이하이면 페이지의 반응성이 개선이 필요합니다.
  • INP가 500 밀리 초 이상이면 페이지의 반응성이 떨어집니다.


A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.
The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.

상호 작용의 주된 원동력은 종종 JavaScript이며, 하지만 브라우저는 JavaScript가 아닌 다른 방법으로 제공되는 상호 작용도 제공합니다. 이 방법에는 체크박스, 라디오 버튼, CSS로 제어되는 컨트롤 등이 있습니다.

INP에 관하여, 다음과 같은 상호 작용 유형만 관찰됩니다:

  • 마우스로 클릭하기.
  • 터치 스크린을 사용하는 디바이스에서 탭하기.
  • 물리적 또는 화면 키보드에서 키를 누르기.

인터랙션은 메인 문서나 문서에 포함된 iframe에서 발생합니다. 예를 들어, 임베디드된 비디오에서 재생 버튼을 클릭하는 것입니다. 최종 사용자는 어떤 내용이 iframe 안에 있는지 인식하지 못할 것입니다. 따라서 상위 레벨 페이지의 사용자 경험을 측정하기 위해 iframe 내부의 INP가 필요합니다. 참고로 JavaScript 웹 API는 iframe 내용에 접근할 수 없으므로 iframe 내부의 INP를 측정할 수 없을 수 있으며, 이는 CrUX와 RUM 사이의 차이로 표시됩니다.

상호 작용은 두 부분으로 구성될 수 있으며, 각 부분은 여러 이벤트로 이루어집니다. 예를 들어, 키 입력은 keydown, keypress 및 keyup 이벤트로 구성됩니다. 탭 상호 작용에는 pointerup 및 pointerdown 이벤트가 포함됩니다. 상호 작용 내에서 가장 긴 지속 시간을 가진 이벤트가 상호 작용의 대기 시간으로 선택됩니다.

A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.
A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.

INP는 사용자가 페이지를 나갈 때 계산되며, 전체적인 응답성을 대표하는 하나의 값을 도출합니다. 낮은 INP는 페이지가 신뢰할 수 있는 사용자 입력에 반응한다는 것을 의미합니다.

Where INP considers all page interactions, First Input Delay (FID) only accounts for the first interaction. It also only measures the first interaction's input delay, not the time it takes to run event handlers, or the delay in presenting the next frame.

Given that FID is also a load responsiveness metric, the rationale behind it is that if the first interaction made with a page in the loading phase has little to no perceptible input delay, the page has made a good first impression.

INP는 첫 인상에 관한 것 이상입니다. 모든 상호작용을 샘플링함으로써 응답성을 포괄적으로 평가하고, INP는 FID보다 전반적인 응답성을 신뢰할 수 있는 지표로 만들어줍니다.

페이지가 INP 값이 없을 수도 있습니다. 이는 여러 가지 이유로 발생할 수 있습니다:

  • 페이지가 로드되었지만 사용자가 클릭하거나 탭하거나 키보드에서 키를 누르지 않았습니다.
  • 페이지가 로드되었지만 사용자가 클릭, 탭 또는 키보드를 사용하지 않는 동작으로 페이지와 상호 작용했습니다. 예를 들어 스크롤이나 요소 위로 마우스를 가져가는 등은 INP 계산에 영향을 주지 않습니다.
  • 검색 크롤러 또는 헤드리스 브라우저와 같은 봇이 페이지에 접근하고 있으며 페이지와 상호 작용을 스크립트화하지 않았습니다.

INP can be measured both in the field and in the lab through a variety of tools.

이상적으로 INP 최적화 여정은 필드 데이터로 시작됩니다. 최고의 경우, 실제 사용자 모니터링(RUM)에서 얻은 필드 데이터는 페이지의 INP 값뿐만 아니라, INP 값 자체에 영향을 미친 특정한 상호 작용이나 페이지 로드 후에 발생한 상호 작용인지, 상호 작용의 유형(클릭, 키 입력 또는 탭) 및 기타 유용한 정보를 강조하는 문맥 데이터도 제공합니다.

If your website qualifies for inclusion in the Chrome User Experience Report (CrUX), you can quickly get field data for INP via CrUX in PageSpeed Insights (and other Core Web Vitals). At a minimum, you can get an origin-level picture of your website's INP, but in some cases, you can also get page-level data as well.

However, while CrUX is useful to tell you that there is a problem at a high level, it often doesn't provide enough detail to help fully understand what the problem is. A RUM solution can help you drill down into more detail as to the pages, users or user interactions which are experiencing slow interactions. Being able to attribute INP to individual interactions avoids guesswork and wasted effort.

Optimally, you'll want to start testing in the lab once you have field data that suggests you have slow interactions. In the absence of field data, however, there are some strategies for reproducing slow interactions in the lab. Such strategies include following common user flows and testing interactions along the way, as well as interacting with the page during load—when the main thread is often busiest—in order to surface slow interactions during that crucial part of the user experience.

A collection of guides on optimizing INP is available to guide you through the process of identifying slow interactions in the field and using lab data to drill down and optimize them in a variety of ways.

?