오렌지: 새로운 PWA로 얻은 모바일 전환율 52% 향상

또한 새 PWA는 이전 사이트보다 평균 로드 시간이 30% 더 빠르고 이탈률은 12%, 세션 깊이는 18% 개선되었습니다.

Adam Skręt
Adam Skręt
Marcin Sierakowski
Marcin Sierakowski
Rafał Filipek
Rafał Filipek

Orange Polska S.A. (국제적인 Orange Group의 자회사)는 음성, 데이터, 인터넷 액세스, TV와 같은 모바일 및 유선 통신 서비스를 포함하는 폴란드의 주요 통신 서비스 제공업체입니다. 또한 IT 및 통합 서비스, 임대 회선, 기타 통신 관련 부가 가치 서비스와 장비도 제공합니다.

새 PWA의 스크린샷

당면 과제

웹사이트를 로드하는 데 시간이 너무 오래 걸리면 불안감이 짜증으로 남는다는 것은 누구나 잘 알고 있습니다. 물리적인 존재가 거의 또는 전혀 없는 디지털 회사의 경우, 특히 Google의 내부 연구에 따르면 앱 제거의 가장 중요한 유일한 이유는 속도입니다. 모바일 앱의 경우 이러한 영향은 분명합니다. 하지만 우리와 같이 유통 채널에 대한 강력한 오프라인 전략을 바탕으로 기업을 운영하는 경우 디지털이 판매의 유일한 소스가 아니기 때문에 디지털 속도의 영향이 확연히 드러나지 않습니다. 이로 인해 경영진이 속도에 투자하도록 설득하기가 훨씬 더 어려워집니다.

경영진을 대상으로 피칭할 때 로드 시간과 전환율 간의 상관관계를 명확히 하기 위해 Google 애널리틱스의 이전 실적 데이터를 통해 보다 강력한 근거를 제시했습니다. 사실만으로도 페이지 로드 시간을 1초 증가시킬 때마다 수익과 매출이 15~20% 감소한다는 사실을 확인할 수 있었습니다.

로드 시간과 전환수의 상관관계를 보여주는 차트
상단 차트 (주황색)는 이전 사이트의 전환율을 로드 시간별로 분류하여 보여줍니다. 예를 들어 왼쪽의 첫 번째 막대는 2초 미만의 로드 시간을 경험한 사용자를 나타냅니다. 옆에 있는 막대는 2~3초의 로드 시간을 경험한 사용자를 나타냅니다. 하단 차트 (회색)에는 이전 사이트에서 모든 사용자가 실제로 경험한 로드 시간이 표시됩니다.

접근 방법

우리는 프로그레시브 웹 앱 (PWA)을 빌드하기로 결정했습니다. 특히 모바일 트래픽에 중점을 두는 이유는 75% 이상의 고객이 휴대기기로 당사 웹사이트를 사용하기 때문입니다. 팀은 핵심성과지표를 개선하고 더욱 매력적이고 매력적인 환경을 제공하는 데 똑같이 집중했습니다.

Google은 개념 증명을 제공하여 다음 질문에 답하는 것을 목표로 하는 새로운 교차 기능 스크럼팀 (IT, 비즈니스, UX 전문가 포함)을 출범했습니다.

  • 기존의 중요한 제한사항을 준수하면서 로드 시간을 효과적으로 줄일 수 있나요?
  • 전환과 수익에 실제로 어떤 영향을 미치나요?

Google에서 Next.js를 선택한 이유는 기본으로 사용 설정되거나 설정하기 쉬운 자동 서버 측 렌더링 (SEO에 특히 중요함), 데이터 미리 가져오기, 코드 분할 등 다양한 최적화 기능을 사용하기 때문입니다. 또 다른 주요 고려사항은 Next.js를 사용하여 기존 애플리케이션에 아무런 문제 없이 페이지를 하나씩 이전할 수 있다는 점입니다. 그럼에도 여전히 기존 시스템에 의존해야 하는 복잡한 환경에서 변환을 관리해야 했기 때문에 서비스를 사용할 수 없게 되었습니다. 이 문제를 해결하기 위해 Workbox를 통합하여 백엔드가 다운되더라도 웹사이트를 항상 사용할 수 있도록 했습니다. Workbox는 사전 캐싱, 요청 라우팅, 런타임 캐싱을 위한 기본 제공 솔루션 덕분에 성능이 크게 향상되었습니다.

결과

새로운 PWA의 평균 로드 시간은 이전 사이트보다 30% 더 빠르고, 휴대기기에서의 전환율은 52% 증가했으며, 이탈률은 12%, 세션 깊이는 18% 개선되었습니다. 이러한 경험을 통해 모든 고객 대면 솔루션(고객 셀프 케어 및 영업 담당자 프런트엔드 포함)을 PWA 기술로 전환하기 위한 전략적 방향을 확인할 수 있었습니다.