오렌지: 새로운 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 그룹 소속)는 음성, 데이터, 인터넷 액세스, 텔레비전과 같은 모바일 및 유선 통신 서비스를 포함하여 폴란드에서 통신 서비스를 제공하는 선두 업체입니다. 또한 IT 및 통합 서비스, 전용선, 기타 통신 부가가치 서비스 및 장비도 제공합니다.

새 PWA의 스크린샷

도전과제

웹사이트가 로드되는 데 시간이 오래 걸리면 불안감이 생기고 짜증이 나는 것을 누구나 잘 알고 있습니다. 오프라인 매장이 거의 없거나 아예 없는 디지털 기업의 경우 이러한 영향은 분명합니다. 특히 모바일 앱의 경우 Google의 내부 연구에서 앱 제거의 가장 중요한 이유가 속도라는 점을 분명히 보여주고 있습니다. 하지만 Google과 같이 오프라인 유통 채널에 강력한 오프라인 전략을 갖춘 기존 부문에서 운영하는 경우 디지털이 유일한 판매원이 아니므로 디지털 속도의 영향이 그렇게 분명하지 않습니다. 따라서 경영진을 설득하여 속도에 투자하도록 하는 것이 더욱 어려워집니다.

Google은 Google 애널리틱스의 이전 실적 데이터를 활용하여 로드 시간과 전환율 간의 상관관계를 명확하게 보여주면서 임원진에게 제안하여 설득력을 높였습니다. 냉혹한 사실에 입각하여 페이지 로드 시간이 1초 늘어날 때마다 수익과 판매가 15~20% 감소한다는 것을 보여주었습니다.

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

접근 방식

프로그레시브 웹 앱 (PWA)을 빌드하기로 결정했습니다. 고객의 75% 이상이 휴대기기를 통해 웹사이트를 사용하므로 특히 모바일 트래픽에 중점을 두었습니다. 팀은 핵심성과지표를 개선하고 더 매력적이고 흥미로운 환경을 제공하는 데 동등하게 중점을 두었습니다.

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

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

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

결과

새 PWA의 평균 로드 시간은 기존 사이트보다 30% 빨라졌으며, 모바일 기기에서 전환이 52% 증가하고 이탈률이 12% 개선되었으며 세션 깊이가 18% 개선되었습니다. 이 경험을 통해 모든 고객 대상 솔루션(고객 셀프 서비스 및 영업사원 프런트엔드 포함)을 PWA 기술로 전환하기 위한 전략적 방향이 확인되었습니다.