redBus에서 웹사이트의 'Next Paint(다음 페인트)에 대한 상호작용(INP)'을 개선하고 판매를 7% 늘린 방법

INP 최적화를 통해 redBus의 매출이 약 7% 증가했습니다.

Amit Kumar

Saurabh Rajpal

웹과 그 기능은 빠르게 진화하고 있습니다. 이제 웹에서 기능 측면에서 네이티브 애플리케이션이 할 수 있는 많은 작업을 실행할 수 있는 풍부하고 기능이 완벽한 환경을 빌드할 수 있습니다.

JavaScript는 웹에서 상호작용을 위한 기본적인 도구이지만 주의해서 사용하지 않으면 상호작용이 느려지고 사용자가 웹사이트가 응답하지 않거나 완전히 손상되었다고 인식할 수 있습니다. 다행히 이 특정 사용자 환경 문제를 해결하기 위해 다음 페인트에 대한 상호작용 (INP) 측정항목이 만들어졌습니다.

INP는 페이지의 수명 주기 동안 페이지와 이루어진 모든 상호작용을 측정하고 사용자 입력에 응답하는 웹사이트의 속도를 나타내는 단일 값을 보고합니다. 간단히 말해 페이지의 INP가 좋은 임곗값 미만이면 페이지와의 모든 상호작용이 안정적으로 빠르다고 할 수 있습니다.

인도에 소재한 버스 예약 및 티켓 판매 웹사이트인 redBus는 INP가 아직 실험용 측정항목으로 간주되던 시절에도 웹사이트의 INP를 개선하기 위해 상당한 노력을 기울였습니다. 그 결과 매출이 7% 증가하여 웹 성능과 비즈니스 상태 간의 관계를 다시 한번 입증했습니다. redBus는 웹사이트의 INP를 개선하기 위해 다음과 같은 조치를 취했습니다.

주요 목표

redBus는 웹사이트의 INP를 최적화하기 위해 세 가지 목표를 세웠습니다.

1. 네트워크 속도와 기기 기능에 관계없이 상호작용 지연 시간에 집중하여 사용자에게 더 나은 사용자 환경을 제공하세요.
2. 상호작용을 최대한 빠르게 유지하도록 웹사이트를 최적화합니다.
3. 프런트엔드로의 빠른 데이터 전송을 위해 API의 응답이 최대한 가벼워야 합니다.

여정

redBus는 상호작용 지연 시간을 다음 두 가지 방법으로 분류했습니다.

1. 클라이언트에서 JavaScript를 차단하여 발생하는 상호작용 지연 시간입니다. 상호작용에서 기본 스레드를 차단하는 JavaScript를 과도하게 사용하면 렌더링이 지연되고 이는 페이지의 INP에 영향을 미칩니다.
2. API 호출로 인한 네트워크 지연 시간입니다. 네트워크 활동은 INP에서 측정하는 항목이 아니지만 원격 API 호출에 의존하는 상호작용은 느린 네트워크에서 또는 요청으로 인해 대용량 응답이 발생하는 경우 느리게 느껴질 수 있습니다.

redBus는 처음에 웹사이트의 INP가 양호할 것이라고 확신했지만, 이 측정항목의 95번째 백분위 수에 대한 실시간 사용자 모니터링 (RUM) 데이터는 다른 결과를 보여주었습니다.

redBus에서 INP를 측정한 방법

redBus는 Google에서 빌드한 web-vitals JavaScript 라이브러리를 사용하여 INP뿐만 아니라 웹사이트의 모든 페이지에 대한 모든 중요한 사용자 환경 측정항목을 추적했습니다. redBus는 web-vitals JavaScript 라이브러리 외에도 ELK를 사용하여 프런트엔드에서 수집된 INP 데이터를 분석했습니다.

하지만 현장에서 웹사이트의 INP를 추적하는 방법은 redBus에서 문제에 접근한 방식과 상당히 다를 수 있습니다. 상호작용 최적화를 시작하기 전에 현장에서 느린 상호작용을 찾는 방법을 읽고 웹사이트의 INP를 가장 잘 추적하는 방법을 알아본 후 실험실에서 이를 재현하는 방법을 알아보는 것이 좋습니다.

redBus는 INP 추적 시스템을 마련한 후 데이터를 분석하여 상호작용이 느린 위치를 더 잘 파악할 수 있었습니다.

사용 사례

사용자가 redBus 웹사이트에서 요금을 검색할 때 검색 페이지에서 날짜를 변경하여 원하는 목적지의 선택된 요금을 필터링할 수 있습니다. 이 페이지에서 날짜를 변경하는 상호작용이 느려 INP가 저조했습니다.

또한 사용자가 요금을 스크롤하면 추가 요금이 API에서 지연 로드됩니다. 스크롤 자체는 INP 측정 방식에 반영되지 않지만 scroll 이벤트 리스너 자체는 기본 스레드에서 실행되어야 하는 많은 작업을 예약합니다. 이 작업으로 인해 기본 스레드에서 경합이 발생하여 상호작용 지연 시간이 증가하여 검색 페이지의 INP가 저하되었습니다.

redBus에서 검색 페이지에 INP를 최적화한 방법

검색 페이지의 INP를 개선하기 위해 redBus에서는 다음과 같은 최적화를 진행했습니다.

• 지정된 기간에 이벤트 콜백이 실행되는 횟수를 줄이기 위해 scroll 이벤트 핸들러가 데브운스 처리되었습니다. scroll 이벤트 콜백이 실행되는 빈도를 낮춤으로써 기본 스레드는 검색 페이지에서 사용자 상호작용에 더 빠르게 응답할 수 있었습니다.
• 결과 렌더링 작업은 requestAnimationFrame 콜백을 사용하여 우선순위가 지정되었습니다. requestAnimationFrame는 브라우저에 콜백의 작업이 다음 프레임 전에 완료되어야 한다고 알려줍니다.

또한 검색 결과 페이지에 다음과 같은 추가 최적화가 적용되었습니다.

• 지연 로드를 더 일찍 트리거하여 사용자 환경과 시각적 성능을 개선하기 위해 검색 결과 페이지의 두 번째 카드에서 새 검색 결과 일괄을 가져왔습니다.
• 지연 로드 중에 각 네트워크 호출에서 가져온 결과가 줄었습니다. 가져오기를 30개에서 10개로 줄이자 INP 범위가 870~900에서 350~370으로 감소했습니다.

이러한 변경사항으로 검색 페이지의 INP가 크게 개선되었지만 검색 페이지의 입력란에 있는 change 이벤트가 비용이 많이 드는 리듀서 함수를 호출하여 사용자 인터페이스를 업데이트하는 문제가 여전히 남아 있었습니다. 이로 인해 사용자 인터페이스가 불필요하게 다시 렌더링되어 페이지의 INP에 영향을 미쳤습니다.

이 상호작용을 최적화하기 위해 redBus는 입력 구성요소의 상태를 로컬에서 관리하고 입력의 blur 이벤트가 실행될 때만 Redux 저장소와 동기화했습니다. 이 변경사항으로 인해 리렌더링 횟수가 줄었고, 리듀서를 덜 자주 호출하여 사용자 인터페이스의 원치 않는 리렌더링이 제거되었습니다.

이 변경사항으로 인해 페이지의 INP가 72% 개선되어 사용자가 더 빨리 원활하게 참여할 수 있는 사용자 환경이 조성되었습니다.

비즈니스에 영향

비즈니스 상태와 페이지 실적 간의 관계는 잘 알려져 있습니다. INP는 다른 Core Web Vitals에 비해 비교적 새로운 측정항목이지만 redBus는 이 중요한 사용자 중심 성능 측정항목을 개선하는 데 중점을 두어 비즈니스 성과를 개선했습니다. 그 결과 전반적인 판매가 7% 증가했습니다.

요컨대 INP를 통해 redBus 웹사이트의 런타임 성능 문제를 파악할 수 있었습니다. 개선이 필요하다는 사실을 알게 된 redBus는 문제를 관찰하고 재현한 후 이 중요한 정보를 사용하여 redBus와 비즈니스에 도움이 되는 최적화를 실행할 수 있었습니다.