Ray-Ban이 Speculation Rules API를 사용한 사전 렌더링을 통해 전환율을 두 배로 높이고 이탈율을 13% 줄인 방법

Daniele Merola
Daniele Merola
LinkedIn
Giorgio Pellegrino
Giorgio Pellegrino
LinkedIn
Hadyan Andika
Hadyan Andika
LinkedIn

게시일: 2025년 1월 28일

이 사례 연구에서는 Ray-Ban이 Speculation Rules API를 사용하여 사전 렌더링을 통해 향후 사용자 탐색 속도를 높여 LCP 측정항목을 개선하고 Ray-Ban의 전자상거래 플랫폼 비즈니스 실적을 개선한 방법을 설명합니다. 이 작업의 성공에 힘입어 Ray Ban은 페이지를 bfcache에 적합하게 만드는 등 성능을 유사하게 개선할 수 있는 다른 옵션을 모색했습니다.

Ray-Ban은 Aviator, Wayfarer와 같은 시대를 초월한 스타일로 유명한 아이웨어 브랜드로, 클래식 디자인과 현대적인 트렌드를 조화시킵니다. Ray-Ban은 안경 업계의 대표 브랜드 중 하나로, 연간 8, 000만 명 이상의 순 방문자를 유치하여 회사의 경쟁력을 높이는 데 중요한 역할을 하는 전자상거래 채널을 운영하고 있습니다.

Ray-Ban은 핵심 비즈니스 채널로서 전자상거래 플랫폼의 사용자 환경을 지속적으로 개선하고 있으며, 핵심 성능 보고서의 중요성과 플랫폼의 사용자 환경에 미치는 직접적인 영향을 잘 알고 있습니다.

중요한 사용자 여정을 개선하기 위한 Ray-Ban의 지속적인 접근 방식

Ray-Ban의 전자상거래 플랫폼에 사용되는 MPA (다중 페이지 애플리케이션) 아키텍처의 특성상 사용자가 새 페이지가 필요한 링크나 버튼과 상호작용할 때마다 브라우저는 서버에 탐색 요청을 전송하고 서버는 새 HTML 페이지로 응답합니다. 이로 인해 Ray-Ban은 특히 가장 일반적으로 사용되는 진입점 중 하나로 확인되고 전환 유입경로의 중요한 부분인 제품 세부정보 페이지 (PDP)에서 사용자에게 원활한 탐색 환경을 제공하기가 어렵습니다.

최근 완료된 리디자인 덕분에 Ray-Ban의 Core Web Vitals 측정항목이 개선되었습니다. 하지만 여전히 개선의 여지가 있습니다. 특히 대화형 사용자 환경을 제공하기 위해 외부 라이브러리를 광범위하게 사용해야 하는 경우 다른 페이지에 비해 최대 콘텐츠 페이지 (LCP) 측정항목이 증가합니다.

이러한 이유로 Ray-Ban은 사이트의 중요한 사용자 여정을 개선하기 위해 사전 로드를 구현했습니다. 추측 규칙은 사용자가 다음에 방문할 페이지의 콘텐츠를 미리 로드한 후 사전 렌더링하므로 향후 탐색의 인지된 페이지 로드 속도를 줄이는 가장 효과적인 솔루션 중 하나일 수 있습니다.

Ray-Ban의 기기별 사전 렌더링 전략

Ray-Ban은 데스크톱과 휴대기기 간의 동작 및 리소스 차이를 고려하기 위해 두 가지 별도의 사전 렌더링 전략을 채택했습니다. 이러한 전략은 웹사이트의 기존 기능이나 사용자 경험을 손상시키지 않으면서 실적을 극대화하도록 설계되었습니다.

데스크톱에서는 제품 등록정보 페이지 (PLP)의 제품 카드 위로 마우스를 가져가 "moderate" 이그조르트 설정을 사용하고 동일한 카드의 식별 클래스를 선택기로 전달하여 미리 렌더링을 실행합니다.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

hover 이벤트는 휴대기기에서 실제로 사용할 수 없으므로 가장 많이 클릭된 것으로 확인된 처음 4개의 카드에 immediate 조기 렌더링 설정을 사용하여 미리 렌더링이 실행됩니다.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

결과 미리 렌더링

두 가지 사전 렌더링 전략은 Ray-Ban PDP 페이지의 Core Web Vitals 측정항목과 비즈니스 KPI 동향에 상당한 영향을 미쳤습니다.

기기 LCP 전환율 변동 이탈율 변경 사전 렌더링 비율
이전 이후 변경
모바일 4.69초 2.66초 43.28% +101.47% -13.25% 29%
데스크톱 3.03초 1.74초 42.57% +156.16% -13.18% 50%
출처: Aviator PDP 페이지의 CrUX URL 수준 데이터

서버에서 제공된 PDP를 탐색하는 사용자의 비즈니스 측정항목을 사전 렌더링된 PDP를 탐색하는 사용자의 측정항목과 비교했습니다. API를 지원하는 브라우저 (예: Chrome)를 사용하는 사용자를 위해 Adobe 추적 워크스페이스에서 데이터를 수집한 후 Ray-Ban은 사용자가 사이트를 더 원활하게 탐색할 수 있음을 보여주는 상당한 개선사항을 발견했습니다. 미리 렌더링이 지원되지 않는 다른 브라우저의 경우 Ray-Ban은 데스크톱의 hover 이벤트 시 리소스를 미리 로드하고 휴대기기의 PLP의 처음 4개 카드를 미리 로드하기로 결정했습니다.

사전 렌더링을 위한 Speculation Rules API 구현은 Ray-Ban의 전자상거래 플랫폼에 혁명적인 변화를 가져왔습니다. 이러한 혁신적인 전략을 통해 Ray-Ban은 데스크톱과 모바일 모두에서 LCP를 43% 개선하여 사용자 경험을 크게 향상시켰습니다.

이 최적화는 거의 즉각적인 페이지 로드를 제공할 뿐만 아니라 특히 PDP와 같은 중요한 페이지에서 현재 MPA 아키텍처를 유지하면서 SPA 스타일 아키텍처의 많은 이점을 누릴 수 있도록 했습니다.

비즈니스 관점에서는 A/B 테스트에서 확인된 바와 같이 개선사항이 혁명적인 변화를 가져왔습니다.

  • 전환율 증가:
    • PDP의 모바일 전환율이 101.47% 크게 증가했습니다.
    • 데스크톱 전환율은 156.16%나 급증했습니다.
  • 사용자 참여도 향상:
    • 세션당 조회된 평균 페이지 수는 모바일에서 51.95%, 데스크톱에서 65.30% 증가하여 탐색이 원활해지고 사용자의 관심이 더 오래 지속되었음을 나타냅니다. 참고: 활성화되지 않은 사전 렌더링된 페이지는 '조회됨'으로 간주되지 않았습니다.
  • 종료율 감소:
    • 이탈률(해당 페이지의 조회수 대비 페이지에서 이탈한 사용자의 비율)은 모바일에서 13.25%, 데스크톱에서 13.18% 감소하여 중요한 쇼핑 순간에 유지율이 높아졌음을 보여줍니다.

더 빠른 사용자 탐색을 제공하기 위해 확장

PDP의 미리 렌더링에서 얻은 우수한 결과를 토대로 Ray-Ban은 메뉴의 PLP 링크도 미리 렌더링하여 Speculation Rules API의 잠재력을 더욱 극대화하기로 결정했습니다. 이 접근 방식을 사용하면 카탈로그 및 제품 페이지 유형 모두의 로드 속도와 LCP를 크게 개선할 수 있습니다.

사전 렌더링은 향후 탐색에 도움이 되지만 Ray-Ban은 PLP와 PDP 간의 왕복 탐색도 상당 부분 관찰합니다. 사전 렌더링 실험 결과에서 최적화된 사용자 탐색이 우수한 비즈니스 측정항목과 직접적인 연관이 있음이 분명해 Ray-Ban은 뒤로/앞으로 캐시 (bfcache)도 살펴봤습니다.

bfcache는 브라우저 기록에서 사용 가능한 페이지의 스냅샷을 메모리에 유지하고 네트워크를 거치지 않고 이를 복원하여 즉시 앞뒤로 탐색할 수 있는 브라우저 최적화 기능입니다. Ray-Ban의 PDP 및 PLP가 bfcache를 사용할 수 있도록 몇 가지 빠른 업데이트가 이루어졌습니다.

  • unload 이벤트를 사용 중지하고 Permissions-Policy 헤더 값 unload=(), bluetooth=(), andaccelerometer=()을 사용하여 기기의 블루투스 및 가속도계 API에 대한 액세스를 제한합니다.
  • pagehide 이벤트에서 RTC 및 IndexedDB 연결을 닫습니다.
  • Cache-Control: no-store 응답 헤더를 불필요하게 사용하지 마세요.

뒤로/앞으로 탐색이 트래픽의 최대 40% 를 차지하는 반면 bfcache 적중률은 0인 PLP에서 bfcache 지원을 사용 설정하면 LCP가 거의 30%, CLS가 83% 개선되었습니다.

측정항목 2024-10-13 > 2024-11-9 2024-11-24 > 2024-12-21 델타
LCP 3725ms 2,674ms -28.21%
INP 521ms 395ms -24.18%
CLS 0.46 0.08 -82.61%
뒤로-앞으로 캐시 적중률 0.02% 72.90% +72.87pp
출처: 여성용 선글라스 페이지의 CrUX URL 수준 데이터

결론

이 결과는 전자상거래 사이트의 실적을 크게 개선할 수 있는 사전 렌더링의 잠재력을 보여줍니다. Ray-Ban은 향후 탐색을 위한 사용자 행동을 기반으로 페이지를 미리 렌더링하여 코어 웹 바이탈을 개선할 뿐만 아니라 사용자 참여도를 높이고 판매를 늘렸습니다. 이 이점 덕분에 향후 탐색뿐만 아니라 bfcache에서 제공하는 뒤로/앞으로 탐색도 원활하게 제공하겠다는 Ray-Ban의 노력이 강화되었습니다.

이 사례에서는 최신 웹 성능 기법을 사용하여 기술적 측정항목과 비즈니스 KPI 간의 격차를 해소하고 사용자 환경과 전자상거래 성공을 위한 새로운 벤치마크를 설정하는 방법을 강조합니다.

이 작업에 기여해 주신 로렌조 바르토미올리, 길베르토 코치, 알레한드로 바에자 레돈도, 배리 폴러드, 제레미 바그너님께 감사의 인사를 전합니다.