다음 페인트(INP)와의 상호 작용: 완전한 기술 가이드 및 최적화 표준

INP(Interaction to Next Paint)는 웹페이지의 전반적인 인터페이스 응답성을 평가하기 위해 도입된 공식 Google Core Web Vital 지표입니다.

페이지 로드 시 초기 상호작용만 평가하는 FID(첫 번째 입력 지연)와 달리 INP는 사용자가 페이지를 방문하는 전체 기간 동안 발생하는 모든 사용자 상호작용(클릭, 탭, 키보드 입력)의 지연 시간을 관찰합니다.

답변 우선 요약

INP(Interaction to Next Paint)는 사용자가 페이지와 상호 작용(클릭, 탭 또는 키 누르기)할 때부터 브라우저가 업데이트된 시각적 프레임을 화면에 표시할 때까지 경과된 시간을 측정하는 Core Web Vital 지표입니다.INP 대기 시간은 입력 지연, 처리 기간 및 프레젠테이션 지연의 세 가지 하위 부분으로 구성됩니다.합격 INP 점수는 실제 사용자 방문의 75번째 백분위수에서 200밀리초 이하입니다.2024년 3월, INP는 Google의 검색 순위 알고리즘에서 FID(첫 번째 입력 지연)를 공식적으로 대체했습니다.

INP 점수 임계값 및 평가 척도

반응형 사용자 경험을 제공하려면 웹 페이지는 실제 사용자 현장 방문의 75번째 백분위수에서 평가된 INP에 대한 다음 핵심 웹 바이탈 임계값을 충족해야 합니다.

좋음: $\le 200\text {ms} $ (녹색) - 사용자에게 즉각적으로 느껴지는 빠르고 유연한 UI 응답입니다.
개선 필요: $> 200\text {ms} $ 및 $\le 500\text {ms} $ (황색) - 사용자 참여에 영향을 미치는 클릭 또는 탭 중에 눈에 띄는 지연이 있습니다.
나쁨: $> 500\text {ms} $ (빨간색) - 심각한 인터페이스 정지 및 메인 스레드 차단으로 인해 사용자 불만과 높은 반송률이 발생합니다.

INP 대기 시간	성과 평가	사용자 경험에 미치는 영향	구글 검색 순위 현황
$\le 200\text {ms} $	좋습니다	탭하거나 클릭하면 즉시 시각적 피드백을 받을 수 있습니다.	핵심 웹 바이탈 평가에 대한 전체 합격 등급입니다.
$201\text {ms} - 500\text {ms} $	개선 필요	지연된 상호작용UI 상태 업데이트가 눈에 띄게 지연됩니다.	경쟁 키워드에 대해서는 순위 페널티가 발생할 수 있습니다.
$> 500\text {ms} $	불량	응답하지 않는 버튼, UI 정지 및 기본 스레드 교착 상태.	핵심 웹 바이탈 평가에 실패합니다.활성 순위 페널티.

INP 상호 작용 대기 시간의 세 가지 구성 요소

사용자가 웹페이지의 요소와 상호 작용할 때 INP로 측정된 총 상호 작용 지연 시간은 세 가지 순차적 단계로 구성됩니다.

입력 지연: 사용자가 물리적 상호 작용(클릭, 탭 또는 키 누르기)을 시작한 시점과 브라우저의 기본 스레드가 관련 이벤트 핸들러 실행을 시작한 시점 사이에 경과된 시간입니다.입력 지연은 주로 페이지 로드 또는 구성 요소 다시 렌더링 중에 실행되는 긴 백그라운드 JavaScript 작업으로 인한 기본 스레드 정체로 인해 발생합니다.
처리 기간: 해당 상호 작용에 대해 등록된 모든 이벤트 리스너(예: onclick , onkeydown 또는 프레임워크 반응 상태 업데이트 핸들러) 내에서 JavaScript 코드를 실행하는 데 소요된 시간입니다.
프레젠테이션 지연: 이벤트 핸들러가 완료된 후 브라우저가 스타일 재계산 계산, 레이아웃, 업데이트된 픽셀 그리기 및 사용자 디스플레이 하드웨어에 다음 시각적 프레임 표시를 완료할 때까지 경과된 시간입니다.

수학적으로 단일 상호 작용에 대한 총 INP 대기 시간은 다음과 같이 표현됩니다.

$$\text{INP 대기 시간} = \text{입력 지연} + \text{처리 기간} + \text{프레젠테이션 지연}$$

Google이 2024년 3월에 FID를 INP로 대체한 이유

FID(첫 번째 입력 지연)는 페이지의 첫 번째 상호 작용의 입력 지연 구성 요소만 측정했습니다.FID는 메인 스레드 차단이 초기 상호 작용을 방해하는 페이지를 식별하는 데 도움이 되었지만 두 가지 주요 기술적 한계로 인해 어려움을 겪었습니다.

단일 상호 작용 범위: FID는 페이지 로드 후 모든 후속 사용자 상호 작용을 무시하여 복잡한 단일 페이지 애플리케이션(SPA) 클라이언트 측 탐색 중에 느린 현상을 포착하지 못했습니다.
불완전한 지연 시간 측정: FID는 처리 시간과 프레젠테이션 지연을 완전히 무시하고 입력 지연만 측정했습니다.실행하는 데 2,000ms가 걸린 이벤트 핸들러는 초기 입력 지연이 50ms 미만인 경우 합격 FID 점수를 받았습니다.

2024년 3월 Google은 공식 Core Web Vital 순위 요소로 공식적으로 FID를 INP로 대체했습니다.INP는 세션 중 모든 상호 작용의 75번째 백분위수를 평가하여 최신 웹 애플리케이션 전반의 실제 사용자 경험에 대한 훨씬 더 포괄적이고 현실적인 평가를 제공합니다.

적격 사용자 상호작용과 적격 이벤트

INP는 사용자가 즉각적인 시각적 피드백을 기대하는 개별 사용자 상호 작용을 측정합니다.진단 프로파일링에는 어떤 상호작용이 INP에 포함되는지 이해하는 것이 필수적입니다.

측정된 상호작용

마우스 클릭: 버튼, 링크, 양식 컨트롤 또는 사용자 정의 대화형 구성 요소를 클릭합니다.
터치스크린 탭: 모바일 기기나 태블릿에서 요소를 탭합니다.
키보드 누르기: 물리적 또는 가상 키보드 키(예: Enter , Space 또는 텍스트 입력의 영숫자 키)를 누릅니다.

측정되지 않은 이벤트

스크롤링 및 패닝: 페이지를 스크롤하거나 지도 구성요소를 패닝해도 INP 측정이 트리거되지 않습니다.
호버링: 클릭하지 않고 요소 위로 마우스 커서를 이동하는 것은 INP에서 제외됩니다.
페이지 로드 애니메이션: 사용자 입력 없이 자동으로 실행되는 CSS 애니메이션은 INP에 포함되지 않습니다.

높은 INP 점수를 최적화하기 위한 입증된 기술 전략

INP 대기 시간을 200ms 임계값 미만으로 줄이려면 엔지니어링 팀은 다음과 같은 기술 최적화를 구현해야 합니다.

긴 메인 스레드 작업 분할: requestIdleCallback() , setTimeout() 또는 scheduler.yield()을 사용하여 50ms보다 긴 실행 작업을 더 작은 청크로 나누어 브라우저가 작업 실행 블록 사이에서 들어오는 사용자 입력을 즉시 처리할 수 있도록 합니다.
프레임워크 상태 업데이트 최적화: Vue 3 및 Nuxt 4 애플리케이션에서 비동기 구성 요소 경계 또는 지연된 반응 참조 업데이트를 사용하여 중요하지 않은 UI 다시 렌더링을 연기합니다.
레이아웃 스래싱 최소화: 동기식 레이아웃 재계산을 강제하는 DOM 요소를 변경한 직후 DOM 지오메트리 속성(예: offsetHeight 또는 getBoundingClientRect() )을 읽지 마세요.
DOM 트리 깊이 줄이기: 크기가 너무 큰 DOM 트리는 프레젠테이션이 지연되는 동안 스타일 계산 및 레이아웃 비용을 증가시킵니다.총 DOM 요소 수를 페이지당 노드 1,500개 미만으로 유지하세요.
타사 스크립트 최적화: 무거운 타사 스크립트(분석, 광고 네트워크, 고객 채팅 위젯)가 메인 스레드를 가로채는 경우가 많습니다.지연 또는 웹 작업자는 필수적이지 않은 타사 스크립트를 오프로드합니다.

SimpleOps을 사용한 지속적인 INP 모니터링

SimpleOps은 합성 Lighthouse 감사와 함께 Chrome UX 보고서(CrUX) 실제 사용자 필드 데이터 세트 측정항목을 캡처하여 INP 성능을 지속적으로 추적합니다.SimpleOps은 웹사이트의 75번째 백분위수 INP가 200ms를 초과할 때마다 자동으로 팀에 경고하여 애플리케이션이 빠르고 유연하며 검색 엔진 순위에 최적화되도록 보장합니다.