또한 실제 사용자의 웹 바이탈을 측정한 결과, 최대 콘텐츠 페인트 (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는 유연성을 이용하여 문제를 해결했습니다. 이들은 사례 연구의 결과가 향후 보다 데이터 중심적인 결정을 내리는 데 도움이 될 뿐만 아니라, 다른 개발자가 작업의 효과를 측정하고 성능 향상이 투자할 가치가 있다고 이해관계자들을 확신하는 데 도움이 될 것이라고 생각합니다. 이 게시물에서 이들이 어떻게 성공했는지 알아보세요.
자바스크립트 및 리소스 최적화
- 렌더링을 차단하는 리소스를 제거합니다.
- 코드를 분할하고 동적
import()을 사용합니다. - 모든 콘텐츠를 개별 부분으로 분할하고 스크롤해야 볼 수 있는 부분의 HTML 파일로 지연 로드
- 요청 시 자바스크립트를 실행하고 로드합니다.
<script>태그에 async 속성을 사용하고 중요한 출처 (dns-prefetch,preconnect,preload와 같은 리소스 힌트)에 조기에 연결을 설정하여 느린 자바스크립트 리소스를 식별하고 로드 프로세스를 최적화하세요.- 사용하지 않는 코드를 삭제하고 코드를 축소 및 압축합니다.
- CDN을 사용합니다.
- Workbox에서 서비스 워커를 사용하여 캐싱을 제어합니다.
이미지 최적화
- 스크롤해야 볼 수 있는 부분 이미지 지연 로드.
- CDN으로 이미지를 최적화하고, 적절한 크기의 이미지를 전송하고, 이미지를 압축하고, 작업에 적합한 이미지 형식 (WebP, SVG, 웹 글꼴)을 채택하세요.
CLS 최적화
- 이미지가 로드되는 동안 CSS
aspect-ratio를 사용하여 이미지에 필요한 공간을 예약합니다. - 요소가 지연 로드되는 동안 레이아웃 변경을 최소화하려면 CSS
min-height를 사용합니다.
실적 측정
또한 PageSpeed Insights를 사용하여 웹사이트를 감사하는 것 외에도, 사용자들이 현장에서 어떤 경험을 하고 있는지 더 잘 파악할 수 있는 방법을 찾고자 했습니다. 따라서 Rakuten 24는 web-vitals JavaScript 라이브러리를 사용하여 현장의 코어 웹 바이탈 및 기타 측정항목을 측정하고 데이터를 사내 분석 도구로 전송하기로 했습니다.
성능 분석
팀은 수집된 필드 데이터를 분석하여 코어 웹 바이탈과 주요 비즈니스 측정항목 간에 상관관계가 있는지 확인했습니다. 그 결과 전환한 사용자의 LCP가 전환하지 않은 사용자보다 더 높은 LCP를 경험하는 경향이 있다는 것을 알게 되었습니다.
수집된 데이터를 통해 다음과 같은 사실도 밝혀졌습니다.
- LCP가 우수하면 전환율은 최대 61.13%, 방문자당 수익은 26.09%, 평균 주문 금액은 11.26% 증가합니다.
- FID가 좋으면 전체 평균 데이터에 비해 전환율이 최대 55.88% 상승할 수 있습니다.
성능 모니터링
팀은 현장 및 비즈니스 인텔리전스 도구에서 수집된 데이터를 사용하여 성능 모니터링 대시보드를 구축했습니다. 이는 진행 상황을 모니터링하고 회귀를 방지하는 데 중요합니다.
A/B 테스트
A/B 테스트가 성능 최적화의 비즈니스 영향을 측정하는 좋은 방법이라고 생각한 팀은 코어 웹 바이탈에 맞게 방문 페이지 중 하나를 최적화한 다음 한 달 동안 A/B 테스트를 통해 최적화된 버전과 원본 페이지를 비교했습니다. 테스트 결과를 얻기 위해 트래픽과 전환이 많은 방문 페이지를 선택했습니다. 테스트 기간에 트래픽 중 50% 는 최적화된 방문 페이지 (버전 A)로, 나머지 50% 는 원본 페이지 (버전 B)로 전송되었습니다. 버전 A와 버전 B의 유일한 차이점은 버전 A가 코어 웹 바이탈에 최적화되었고 다른 기능적, 시각적인 차이는 없다는 점입니다.
최적화된 버전 A는 모바일 로드 테스트에서 0.4초 일찍 로드를 완료했으며 레이아웃의 큰 변화가 없었습니다. 실제로 버전 A의 CLS는 버전 B에 비해 92.72% 개선되었습니다. 다른 웹 바이탈 점수도 개선되었습니다. FID가 7.95%개선, FCP가 8.45%개선, TTFB가 18.03%개선되었습니다.
최적화된 버전 A와 최적화되지 않은 버전 B를 비교한 결과, Rakuten 24는 버전 A가 다음과 같은 이점을 제공합니다.
- 방문자당 수익 53.37% 증가
- 전환율 33.13% 증가
- 평균 주문 금액 15.20% 증가
- 평균 사용 시간 9.99% 증가
- 이탈률 35.12% 감소
결론
웹 성능 최적화는 어렵지만 보람을 느낍니다. Rakuten 24는 데이터 기반 접근 방식을 채택하여 더 나은 사용자 경험을 제공하고 비즈니스에 긍정적인 영향을 주는 것을 성공적으로 측정했습니다. 그러나 이 여행은 목적지가 아닌 여정의 일부일 뿐이라는 사실을 이해하여 온라인 쇼핑객에게 더욱 즐거운 경험을 제공하기 위해 지속적으로 웹사이트를 개선해 나갈 것입니다.
최적화에는 공동의 노력이 필요하며, 개발자는 이 여정에서 혼자 고민할 필요가 없습니다. Rakuten 24는 각자의 노력과 성과를 공유함으로써 더 많은 개발자가 Core Web Vitals 데이터를 사용해 이해관계자와 상호 이해를 발전시키고 고품질 사용자 경험과 비즈니스 성장을 위해 협력할 수 있기를 바랍니다.