우리가 수년간 익숙해져 온 Google의 Pagespeed 구조는 웹사이트가 빠르게 로드되고 제공되도록 보장하는 데 중점을 두고 구축되었습니다. 측정 가능한 매개변수를 생성하고 Chrome의 시장 점유율에서 수집된 익명 데이터를 활용함으로써 Google은 이러한 측정항목을 SEO 지표로 사용합니다. 2022년 INP(Interaction to Next Paint)가 도입되면서 초점은 단순한 페이지 로드 속도에서 더 넓은 웹 성능 관점으로 옮겨졌습니다. INP는 페이지가 로드되는 속도뿐만 아니라 페이지에서 사용자 상호 작용이 처리되는 속도도 측정합니다. 기본적으로 사이트 탐색 경험을 Pagespeed 측정항목으로 전환합니다.
Kerem의 블로그에서, "일반 상호 작용 지연"이라는 용어는 이 개념에 적합하다고 제안되었으며 Google도 자체 동영상에서 이에 대해 잘 설명하고 있습니다. 그러나 이 측정항목을 완전히 이해하기 위해 다음 섹션에서 해당 주제를 더 자세히 살펴보겠습니다.
INP 기간에 대한 설명은 무엇입니까?
INP 기간은 다음과 같습니다.
- 사용자와 페이지의 상호 작용과 이벤트 핸들러 실행 사이의 시간입니다.
- 스크립트의 실행 시간입니다.
- 코드 실행부터 출력이 사용자에게 표시될 때까지의 시간입니다.
이러한 프로세스는 일반적으로 밀리초 내에 발생하지만 모바일 장치, 특히 CPU 성능이 낮은 구형 Android 휴대폰에서는 이러한 지연(대기 시간)이 눈에 띄는 경우가 많습니다. 다른 Lighthouse 데이터와 마찬가지로 INP 데이터는 익명으로 수집되고 다음을 기반으로 평가된다는 점은 주목할 가치가 있습니다. 75 번째 백분위 수. 따라서 목표는 고성능 장치뿐만 아니라 일반 장치에서도 잘 작동하는 응용 프로그램을 만드는 것입니다.
INP 기간의 실제 사례
다음은 이 개념을 설명하기 위해 우리가 매일 방문하는 인터넷 페이지의 실제 예입니다.
전자상거래 사이트에 주소 입력하기
전자상거래 사이트에서 쇼핑할 때 배송주소를 입력할 때 먼저 주를 선택한다. 그러다가 셀렉트 박스를 클릭해 지역을 선택하면 Ajax 결과가 로딩될 때까지 잠시 기다리다가 일정 시간이 지나면 지역 정보가 로딩된다. 이는 INP의 좋은 예입니다. 이 예에서 사용자 경험을 개선하려면 사용자에게 Ajax 프로세스를 알리는 "로딩 표시기"를 추가하는 것이 포함될 수 있습니다.
선택 정렬
상품 목록 페이지에서 필터를 사용할 때 체크박스를 클릭한 후 필터링된 상품이 제대로 관리되지 않으면 INP가 증가합니다. 덜 복잡한 JS를 사용하고 필터 작업 중 사용자 경험을 고려하면 INP 값을 최대한 높게 유지하는 데 도움이 됩니다.
제품 사진 갤러리
사용자가 제품 세부 정보 페이지에서 제품 사진을 클릭한 후 사진 갤러리가 로드될 때까지 기다리는 시간은 잠재적으로 INP에 영향을 미칠 수 있습니다.
예약 버튼
"예약하기" 버튼을 클릭한 후 다음 페이지로 이동하는 사이의 상호 작용 지연은 INP의 예입니다.
장바구니에 담기 버튼
"장바구니에 추가" 버튼을 클릭하고 품목이 카트에 추가되었는지 또는 INP를 완벽하게 정의하는지 궁금해할 때의 지연 시간은 밀리초입니다.
이러한 예에서 볼 수 있듯이 INP 트랩은 SEO와 직접 전환율 모두에 영향을 미치는 시나리오에 존재합니다.
INP를 개선하는 방법은 무엇입니까?
- 최신 JS 프런트엔드 라이브러리 사용: Vue, React, Angular와 같은 최신 JS 프런트엔드 라이브러리를 사용하여 성능을 향상시키는 것은 성능과 재사용성 이점을 제공하므로 유익합니다.
- JS 라이브러리의 복잡성 최소화: 덜 복잡한 JS 라이브러리를 사용하는 것이 좋습니다. 개인적으로는 jQuery를 최대한 피하는 것이 좋습니다.
허용되는 INP 측정 수준
다음에 대한 임계값 좋음, 중간, 나쁨 INP 수준은 200밀리초와 500밀리초입니다.. INP를 이러한 임계값 아래로 유지하는 것은 우수한 사용자 경험과 전반적인 웹 성능을 유지하는 데 중요합니다.
