Rakuten 24에서 코어 웹 바이탈에 투자하여 방문자당 수익을 53.37%, 전환율을 33.13% 늘린 방법

또한 실제 사용자의 웹 바이탈을 측정한 결과, 최대 콘텐츠 페인트 (LCP)가 우수할 경우 전환율이 61.13% 증가할 수 있는 것으로 나타났습니다.

이하영
이하영
린두옹
린두옹
아키바 류노스케
아키바 류노스케
가시와세 쇼고
카시와세 쇼고

Rakuten 24는 주요 다국적 및 국내 소비재 제조업체와 협력하여 헬스케어, 음료, 반려동물 용품, 유아용품 등 매우 다양한 생필품을 판매하는 온라인 상점입니다. 이 스토어는 인터넷 서비스의 글로벌 리더인 Rakuten Group, Inc.에서 제공하며 일본 디지털 마켓플레이스 플랫폼에서 우수한 실적을 거두고 있습니다.

웹 성능이 사용자 환경에 미치는 영향을 이해하여 Rakuten 24팀은 코어 웹 바이탈 및 기타 측정항목을 지속적으로 측정, 최적화, 모니터링해 왔습니다.

그 결과 사용자의 75% 이상이 최대 콘텐츠 렌더링 시간 (LCP), 최초 입력 반응 시간 (FID), 콘텐츠가 포함된 첫 페인트 (FCP) 문제를 경험하고 있습니다. 그러나 레이아웃 변경 횟수 (CLS) 개선 작업은 아직 진행 중입니다.

홈페이지 데이터를 분석한 결과, Rakuten 24는 LCP 점수가 높으면 다음과 같은 결과로 이어질 수 있다는 사실을 발견했습니다.

  • 전환율이 최대 61.13% 증가합니다.
  • 방문자당 수익 26.09%
  • 평균 주문 금액 11.26%
  • FID 점수가 높으면 전환율이 최대 55.88% 까지 상승할 수 있습니다.

코어 웹 바이탈과 비즈니스 측정항목의 상관관계를 추가로 분석하기 위해 Rakuten 24는 코어 웹 바이탈 및 관련 측정항목을 최적화하는 데 중점을 둔 A/B 테스트도 실행했으며, 결과는 다음과 같이 개선되었습니다.

  • 방문자당 수익 53.37%
  • 전환율이 33.13% 증가했습니다.
  • 평균 주문 금액 15.20%
  • 평균 사용 시간 9.99%
  • 종료율이 35.12% 감소했습니다.

기회 강조

웹 성능 최적화는 사용자 환경과 비즈니스 성장을 개선하기 위한 현명한 투자이지만, Rakuten 24팀은 이해관계자가 코어 웹 바이탈을 채택하고 웹 성능에 집중하도록 설득하기가 얼마나 어려운 일인지 잘 알고 있습니다. 그들은 이해 관계자에게 어떤 종류의 투자수익 (ROI) 성과 최적화가 가져올 수 있는지 정확히 보여주는 것이 그들을 참여시키는 가장 좋은 방법이라고 생각합니다.

상대적으로 새롭고 독립적인 서비스였던 Rakuten 24는 유연성을 이용하여 문제를 해결했습니다. 이들은 사례 연구의 결과가 향후 보다 데이터 중심적인 결정을 내리는 데 도움이 될 뿐만 아니라, 다른 개발자가 작업의 효과를 측정하고 성능 향상이 투자할 가치가 있다고 이해관계자들을 확신하는 데 도움이 될 것이라고 생각합니다. 이 게시물에서 이들이 어떻게 성공했는지 알아보세요.

각 스크린샷 주변에 휴대기기 프레임이 있는 Rakuten 24 홈페이지의 스크린샷 예
Rakuten 24 홈페이지의 예시 스크린샷

자바스크립트 및 리소스 최적화

이미지 최적화

CLS 최적화

  • 이미지가 로드되는 동안 CSS aspect-ratio를 사용하여 이미지에 필요한 공간을 예약합니다.
  • 요소가 지연 로드되는 동안 레이아웃 변경을 최소화하려면 CSS min-height를 사용합니다.

실적 측정

또한 PageSpeed Insights를 사용하여 웹사이트를 감사하는 것 외에도, 사용자들이 현장에서 어떤 경험을 하고 있는지 더 잘 파악할 수 있는 방법을 찾고자 했습니다. 따라서 Rakuten 24는 web-vitals JavaScript 라이브러리를 사용하여 현장의 코어 웹 바이탈 및 기타 측정항목을 측정하고 데이터를 사내 분석 도구로 전송하기로 했습니다.

Rakuten 24의 Web Vitals 추적 통합 흐름 첫 번째 단계는 Rakuten 24 웹사이트에 스크립트를 추가하여 web-vitals 라이브러리를 통합하는 것입니다. 그런 다음 실제 사용자 측정항목에서 Web Vitals를 측정하고 Rakuten 24의 사내 데이터 수집 도구로 데이터를 전송합니다.

성능 분석

팀은 수집된 필드 데이터를 분석하여 코어 웹 바이탈과 주요 비즈니스 측정항목 간에 상관관계가 있는지 확인했습니다. 그 결과 전환한 사용자의 LCP가 전환하지 않은 사용자보다 더 높은 LCP를 경험하는 경향이 있다는 것을 알게 되었습니다.

LCP를 기준으로 전환한 사용자와 전환하지 않은 사용자 비교 전환에 자주 도달한 사용자 그룹의 LCP가 낮아졌습니다.

수집된 데이터를 통해 다음과 같은 사실도 밝혀졌습니다.

  • LCP가 우수하면 전환율은 최대 61.13%, 방문자당 수익은 26.09%, 평균 주문 금액은 11.26% 증가합니다.
  • FID가 좋으면 전체 평균 데이터에 비해 전환율이 최대 55.88% 상승할 수 있습니다.
전환율과 LCP 시간을 기준으로 분류된 LCP LCP가 낮을 때 전환한 사용자가 더 자주 전환했으며, 사용자 중 61.13% 가 LCP 1초 이하에서 전환했습니다.
LCP가 전환율에 미치는 영향
LCP는 방문자당 수익 및 LCP 시간으로 분류되어 있습니다. LCP가 1초 이하인 사용자는 더 많은 수익을 창출했으며, LCP가 1초 이하인 경우 사용자당 발생한 수익은 26.09% 증가했습니다.
LCP가 방문자당 수익에 미치는 영향
평균 주문 금액 및 LCP 시간으로 분류된 LCP LCP가 1초 이하일 때 LCP가 낮은 사용자는 평균 주문 금액이 11.26% 더 높았습니다.
평균 주문 금액에 대한 LCP의 영향
전환율과 FID 시간으로 버케팅된 FID. FID가 낮을 때 전환한 사용자가 더 자주 전환했으며, 사용자 중 55.88% 가 50밀리초 이하의 FID로 전환했습니다.
FID가 전환율에 미치는 영향

성능 모니터링

팀은 현장 및 비즈니스 인텔리전스 도구에서 수집된 데이터를 사용하여 성능 모니터링 대시보드를 구축했습니다. 이는 진행 상황을 모니터링하고 회귀를 방지하는 데 중요합니다.

각 코어 웹 바이탈 (LCP, CLS, FID)에 관한 Rakuten 24의 내부 성능 모니터링 대시보드 스크린샷
성능 모니터링 대시보드입니다.

A/B 테스트

A/B 테스트가 성능 최적화의 비즈니스 영향을 측정하는 좋은 방법이라고 생각한 팀은 코어 웹 바이탈에 맞게 방문 페이지 중 하나를 최적화한 다음 한 달 동안 A/B 테스트를 통해 최적화된 버전과 원본 페이지를 비교했습니다. 테스트 결과를 얻기 위해 트래픽과 전환이 많은 방문 페이지를 선택했습니다. 테스트 기간에 트래픽 중 50% 는 최적화된 방문 페이지 (버전 A)로, 나머지 50% 는 원본 페이지 (버전 B)로 전송되었습니다. 버전 A와 버전 B의 유일한 차이점은 버전 A가 코어 웹 바이탈에 최적화되었고 다른 기능적, 시각적인 차이는 없다는 점입니다.

Rakuten 24 웹사이트 모바일 A/B 테스트의 스크린샷 각 버전은 시각적으로, 기능적으로 동일했으며 버전 A는 코어 웹 바이탈을 개선하기 위해 최적화되었습니다.

최적화된 버전 A는 모바일 로드 테스트에서 0.4초 일찍 로드를 완료했으며 레이아웃의 큰 변화가 없었습니다. 실제로 버전 A의 CLS는 버전 B에 비해 92.72% 개선되었습니다. 다른 웹 바이탈 점수도 개선되었습니다. FID가 7.95%개선, FCP가 8.45%개선, TTFB가 18.03%개선되었습니다.

Rakuten 24 홈페이지 스타트업 비교 버전 A는 2초 이내에 로드되는 버전 B와 비교하여 1.6초 이내에 더 효과적으로 로딩되도록 최적화되어 있습니다.
버전 A와 버전 B의 모바일 로드 테스트 결과

최적화된 버전 A와 최적화되지 않은 버전 B를 비교한 결과, Rakuten 24는 버전 A가 다음과 같은 이점을 제공합니다.

  • 방문자당 수익 53.37% 증가
  • 전환율 33.13% 증가
  • 평균 주문 금액 15.20% 증가
  • 평균 사용 시간 9.99% 증가
  • 이탈률 35.12% 감소
Rakuten 24 홈페이지의 Core Web Vitals 개선사항 스크린샷 해당 통계는 방문자당 수익 53.37% 증가, 전환율 33.13% 증가, 평균 주문 금액 15.2% 증가, 페이지에 머문 평균 시간 9.99% 증가, 종료율 35.12% 감소입니다.

결론

웹 성능 최적화는 어렵지만 보람을 느낍니다. Rakuten 24는 데이터 기반 접근 방식을 채택하여 더 나은 사용자 경험을 제공하고 비즈니스에 긍정적인 영향을 주는 것을 성공적으로 측정했습니다. 그러나 이 여행은 목적지가 아닌 여정의 일부일 뿐이라는 사실을 이해하여 온라인 쇼핑객에게 더욱 즐거운 경험을 제공하기 위해 지속적으로 웹사이트를 개선해 나갈 것입니다.

최적화에는 공동의 노력이 필요하며, 개발자는 이 여정에서 혼자 고민할 필요가 없습니다. Rakuten 24는 각자의 노력과 성과를 공유함으로써 더 많은 개발자가 Core Web Vitals 데이터를 사용해 이해관계자와 상호 이해를 발전시키고 고품질 사용자 경험과 비즈니스 성장을 위해 협력할 수 있기를 바랍니다.