01 · URL
중요한 동작이 있는 URL 입력
버튼, 메뉴 또는 입력란이 있는 접근 가능한 페이지를 선택하세요. 실행 결과를 비교할 때는 테스트 조건을 동일하게 유지하세요. 자동 테스트가 모든 방문자의 이용 경로를 재현하지는 않습니다.
클릭 후 INP 확인
메뉴, 필터 또는 장바구니 반응이 느린가요? 테스트 실행으로 INP를 검사하고 페이지 반응을 늦추는 스크립트를 찾으세요.
INP란 무엇인가
INP는 동작과 페이지의 가시적 응답 사이의 일시 정지입니다
이 지표는 페이지가 얼마나 빨리 로드되었는지가 아니라 클릭, 탭, 입력 후 얼마나 빨리 반응했는지를 측정합니다. 따라서 INP는 양식, 필터, 장바구니, 메뉴, 검색, 계정 영역에서 특히 중요합니다.
상호작용 예시
한 번의 클릭이 INP가 되는 방법
브라우저는 이벤트를 수신하고, 핸들러를 실행하고, 인터페이스를 다시 계산하고, 다음 프레임을 표시해야 합니다. INP는 이 전체 경로를 측정합니다.
이벤트 분석
INP 예시386ms
입력 지연58ms이벤트가 메인 스레드를 기다립니다JS 핸들러178ms유효성 검사, 상태 재계산, 동기 로직레이아웃 / 렌더83ms브라우저가 DOM과 스타일을 다시 계산합니다다음 페인트67ms새 프레임이 마침내 화면에 도달합니다
작동 방식
Milten이 INP를 확인하는 방법
INP 검사기는 페이지를 열고 사용 가능한 상호작용을 자동으로 테스트합니다. 보고서는 입력 지연, JavaScript 처리 시간과 다음 화면 업데이트까지의 시간을 구분합니다.
02 · 시나리오
대화형 시나리오를 확인합니다
스캐너가 발견한 요소와 상호작용하고 측정된 지연을 기록합니다. 대상에 접근할 수 없거나 상호작용이 측정되지 않았다면 결과는 해당 동작의 성능을 확인해 주지 못합니다.
03 · 개선 계획
원인과 수정 순서 확인
예를 들어 메뉴가 늦게 열린다면 입력 지연, JavaScript 처리 시간과 표시 지연을 비교하세요. 무거운 작업을 나눈 뒤 같은 테스트를 반복하고 각 부분의 시간을 비교하세요.
FAQ
INP 검사에 관한 자주 묻는 질문
Interaction to Next Paint, Core Web Vitals, SEO, 실용적인 인터페이스 최적화에 대한 짧은 답변.
INP란 무엇이며 왜 중요한가요?
INP는 인터페이스 반응성을 측정하는 Core Web Vitals 지표입니다. 사용자 동작과 페이지의 다음 시각적 응답 사이에 얼마나 많은 시간이 걸리는지 보여줍니다. 좋은 값은 75번째 백분위수에서 최대 200ms입니다.
사이트의 INP를 어떻게 검사하나요?
로그인하고 INP가 포함된 요금제를 선택하세요. 페이지 URL과 기기 설정을 입력한 후 검사를 시작하세요. Milten이 브라우저에서 상호작용을 테스트하고 지연과 권장 사항을 보여줍니다.
INP는 TBT와 어떻게 다른가요?
TBT는 로딩 중 메인 스레드 차단을, INP는 상호작용 지연을 측정합니다. 이 진단 실행은 원인을 찾는 데 도움이 되지만 관찰 기간 동안 실제 방문자에게서 수집한 필드 INP와 같지는 않습니다. 특정 URL에는 CrUX 데이터가 없을 수 있습니다.
INP가 나쁠 때 무엇을 해야 하나요?
먼저 가장 큰 기여를 하는 특정 상호작용(버튼, 필터, 양식, 메뉴, 결제)을 찾으세요. 그런 다음 긴 작업, 동기 핸들러, 불필요한 렌더링 작업, 강제 리플로우, 서드파티 스크립트를 확인하세요.
INP 분석은 얼마나 걸리나요?
빠른 확인은 보통 1분 이내에 완료되지만, 정확한 시간은 선택한 리전, 네트워크 프로필, CPU 스로틀링, 상호작용 시나리오 수에 따라 달라집니다. 안정적인 결론을 얻으려면 동일한 조건에서 여러 번 실행하여 비교하세요.
관련 서비스
INP 이후 확인할 사항
뒤로/앞으로 캐시
뒤로 가기와 앞으로 가기에서 브라우저가 캐시를 사용하는지 확인하세요. 캐시 사용을 막는 원인을 찾아보세요.
확인메모리 누수
페이지 이동을 반복한 뒤에도 메모리에 남는 데이터를 찾아보세요. 메모리 누수 가능성과 쌓이는 데이터를 확인할 수 있습니다.
열기JavaScript 점검
JavaScript 파일, 로딩 오류, 로딩 중 사용되지 않은 코드를 확인하세요. 더 자세히 살펴볼 스크립트를 찾아보세요.
열기로드 속도
선택한 기기와 네트워크 설정으로 페이지 로딩을 점검하세요. 속도 측정값, 문제점, 개선 제안을 확인할 수 있습니다.
스캐너 실행