전자상거래 패션 소매업체에서 코어 웹 바이탈 및 실적 측정항목을 비즈니스 측정항목과 연결하고, KPI 증가를 확인하고, '실적 비즈니스 사례 계산기'를 빌드하여 제품 관련 의사결정과 실적 문화를 조성한 방법
많은 기업에서 여전히 웹사이트 속도 성능과 코어 웹 바이탈을 엔지니어링팀이 담당하고 있습니다. 비즈니스 및 고객 환경의 가치를 이해하지 못하는 경우 사이트의 다른 영역에서 사이트 속도가 눈에 띄지 않을 수 있습니다. 따라서 주요 결정을 내리고 로드맵을 정의할 때 성능을 간과할 수 있습니다.
럭셔리 전자상거래 패션 소매업체인 Farfetch는 팀 전반의 성과 문화를 개선하고 웹 환경을 대폭 개선하기 위해 진정한 고객 중심의 실적 측정항목을 정의하고 사용하는 프로젝트를 시작했습니다. 실적이 회사의 KPI에 어떤 영향을 미치는지를 밝히기 위해 이러한 측정항목을 비즈니스 측정항목과 연관 짓는 것을 목표로 했습니다.
하지만 이들의 야망은 그것으로 끝이 아니었습니다. 궁극적으로 프로젝트의 목표는 조직 내 사일로를 허물고 새로운 비즈니스 지향 언어를 도입하여 모두가 과거에 기술적 주제로 여겨졌던 주제에 대해 공유할 수 있는 방법을 제공하는 등 대규모의 문화적 변화를 도모하는 것이었습니다. Farfetch는 웹사이트 속도 성능을 공동의 책임으로 갖고, 정보에 입각한 의사결정을 용이하게 하며, 이를 양질의 웹 경험을 만드는 핵심 요소로 삼고자 했습니다.
Farfetch는 한 부서에서 전처럼 목표를 달성할 수 없다는 사실을 깨닫고 회사의 다양한 분야(엔지니어링, 인프라, 아키텍처, 제품)의 전문가로 구성된 핵심 팀을 구성하여 회사에서 이 주제를 바라보는 방식을 개편하기 위한 단계별 전략을 마련했습니다.
1단계: 측정항목 정의, 측정, 모니터링
무엇보다도 Farfetch는 현재 상태와 여정 터치포인트와 애플리케이션 간의 편차를 파악할 수 있는 적절한 모니터링 도구가 필요했습니다.
팀은 실험실 데이터와 실제 사용자 모니터링 (필드 데이터)을 모두 사용하여 코어 웹 바이탈을 추적하고 추가로 사용자 중심 성능 측정항목을 사용하여 속도 성능의 현재 상태를 분석했습니다. 자바스크립트와 web-vitals.js 라이브러리를 사용하여 데이터를 캡처한 결과, 제품 애널리틱스팀이 동일한 세션에서 비즈니스 측정항목과 함께 실적 측정항목을 확인하고 서로에 어떤 영향을 미치는지 살펴볼 수 있었습니다.
다양한 분야에서 활동하는 이 그룹은 비즈니스에 가장 중요한 측정항목을 파악하기 시작했습니다. 이를 위해 Farfetch 사용자의 중요한 여정 경로를 살펴보고 이 여정을 실적 마커와 연결하려고 했습니다. Google에서 각각 사용자 환경의 고유한 측면을 나타내는 코어 웹 바이탈 측정항목 외에도 맞춤 자바스크립트를 사용하여 첫 바이트까지의 시간 (TTFB), 콘텐츠가 포함된 첫 페인트 (FCP), 첫 페인트, 상호작용 시간 (TTI)을 추적했습니다.
측정항목은 Performance API, Long Tasks API, Google의 폴리필의 여러 메서드를 사용하여 수집됩니다. 자세한 내용은 웹 부문 선임 엔지니어인 마누엘 가르시아가 작성한 2020년 중반 Farfetch Tech 블로그 게시물에서 확인하실 수 있습니다.
데이터 분석 측면에서 Farfetch에는 Omnitracking이라는 프런트엔드 애플리케이션에서 사용하는 자체 다중 채널 추적 솔루션이 있습니다. 페이지 조회, 사용자 액션, 시스템 액션에 의해 생성된 이벤트를 추적합니다. Omnitracking 데이터 모델은 추적기에서 생성된 이벤트를 기반으로 만들어지는 분석, 데이터 탐색 및 보고 사례를 위한 Farfetch의 솔루션입니다. 데이터 모델의 목표는 다음을 이해해야 하는 모든 사람을 돕고 지원하는 것입니다.
- 사용자 행동
- Farfetch 애플리케이션의 사용자 환경
- 애플리케이션 사용량
- 주요 전환 및 단순 전환
- 교차 채널 및 유입경로 분석
그런 다음 자바스크립트로 캡처한 Farfetch.com의 각 페이지 조회에 대한 실적 데이터를 이 데이터 영역에 추가하는 것을 아이디어로 삼았습니다. 이 모델을 적용하자 각 세션의 실적 데이터와 주요 전환 유입경로 측정항목 간의 일치가 보장되었으며, 해당 주제에 대한 분석적 탐색 분석의 기반이 되었습니다.
마지막으로 Farfetch는 기본 여정 페이지의 각 측정항목에 시간 기반 성능 예산을 설정하고 예산 위반을 처리하기 위한 거버넌스 프로세스를 설정했습니다. 또한 개발 흐름에서 예산 편차를 최대한 빨리 파악하기 위해 성능 측정항목을 CI 파이프라인에 통합하기 시작했습니다.
2단계: 비즈니스 언어를 통한 커뮤니케이션
이제 Farfetch의 내부 비즈니스 인텔리전스 데이터 세트에서 실적 데이터를 사용할 수 있게 되면서 분석팀은 실적 측정항목과 비즈니스 KPI (예: 전환율 및 단일 페이지 방문의 비율) 간의 상관관계를 나타낼 수 있는 데이터의 수학적 모델과 패턴을 탐구하기 시작했으며, 이를 통해 사이트 속도와 비즈니스 UX의 재정적 영향을 새로운 방식으로 파악할 수 있게 되었습니다. 이를 통해 비즈니스 의사 결정권자와 공통된 언어로 성과를 논의할 수 있었습니다. 분석에는 모든 Core Web Vitals와 Farfetch가 가치 있다고 간주한 기타 측정항목이 포함되었습니다. 그 결과 실로 놀라운 분석 정보를 확인할 수 있었습니다.
최적의 사용자 환경을 제공하려면 최대 콘텐츠 렌더링 시간 (LCP)을 2.5초 미만으로 유지하는 것이 좋습니다. Farfetch는 이 임계값을 신중하게 연구하여 의미 있는 결과를 얻었습니다.
Farfetch 통계적 상관관계 분석에서는 그 지점 이후 전환율이 감소하기 시작하고 종료율이 상승하는 것으로 나타났습니다. 이를 통해 사용자는 느린 페이지 로드 인식의 단점을 실제로 느끼기 시작했으며, LCP가 100ms 증가할 때마다 전환율이 평균 1.3% 감소합니다.
또한 Farfetch는 누적 레이아웃 변경 (CLS) 점수에서 0.01만큼 감소한 만큼 이탈률이 3.1% 감소하는 것을 확인했으며, 이는 사용자가 웹사이트에 머무르는 데 페이지 안정성이 미치는 영향을 재확인했습니다.
최초 입력 반응 시간 (FID)이 지속적으로 추적 및 분석되지만 페이지 상호작용 및 유동성 측면에서 Farfetch는 TTI를 측정합니다. 이는 Farfetch 비즈니스 전환 유입경로에 상당한 영향을 미치는 측정항목입니다.
이를 위해 이 측정항목을 저장하기 위해 Google의 TTI 폴리필을 웹사이트에 삽입했습니다. Long Tasks API를 사용하여 장기 작업 (브라우저의 기본 스레드에서 50밀리초 넘게 걸리는 작업) 보고
그 후 애널리틱스 팀은 TTI가 초당 2.8% 감소하여 전환율이 2.8% 증가한다는 사실을 확인할 수 있었으며, 이는 코드 효율성을 개선하고 브라우저의 기본 스레드를 막을 수 있는 강력한 사례가 되었습니다.
결국 이 분석을 통해 일부 측정항목이 비즈니스 KPI에 큰 영향을 미치지 않거나 일부 측정항목은 사용자 여정의 여러 단계에서 관련성이 높다는 것도 확인할 수 있었습니다. 이를 통해 전환 유입경로의 각 지점에서 얻을 수 있는 기회를 완벽하게 파악할 수 있었습니다.
3단계: 문화적 변화 삽입
사이트 속도에 대한 사용자 인식에 대한 정성적 사용자 연구와 함께 위의 통계를 보여주는 것이 회사 목표에 부합하고, 임원 수준의 인지도를 확보하고, 제품 로드맵 전반에서 성과 기반 의사 결정을 위한 동의를 얻는 데 중요했습니다. 이제 Farfetch가 어느 정도의 실적을 거두었는지 증명할 수 있게 되었습니다.
Farfetch는 우선순위 지정을 간소화하기 위해 Google의 속도 개선 효과 추정 도구에서 아이디어를 얻어 Site Speed Business Case Calculator라는 셀프서비스 도구를 만들었습니다. 이를 통해 모든 제품 관리자가 비즈니스에 미치는 영향을 즉석에서 계산하여 실적 개선을 바탕으로 비즈니스 사례를 만들 수 있습니다. 전환율과 사용자 경험 측정항목 간의 상관관계를 사용하는 데이터 모델을 사용하면 다양한 제품 범위, 기기, 사용자 여정 터치 포인트에 유연하게 적응할 수 있습니다.
한편 일련의 셀프서비스 분석 대시보드를 통해 실시간 성과 지표와 이것이 비즈니스에 미치는 영향에 대한 전사적 가시성을 확보할 수 있었습니다. 이제 성능이 제품 개발에 완전히 통합되고 있으며 제품팀은 측정항목, 감사 도구, 성능 예산 모니터링에 쉽게 액세스할 수 있습니다. 또한 데이터 영역 통합으로 인해 Farfetch A/B 테스트 도구에서도 실적 측정항목을 사용할 수 있으므로 제품 관리자에게 또 다른 강력한 통계 정보를 제공합니다.
최근 몇 개월 동안, 핵심 팀은 유사한 방법론을 사용하여 주요 마이크로 서비스 및 트랜잭션의 영향을 모니터링하고 증명함으로써 프런트엔드 개발팀뿐만 아니라 플랫폼 영역 내에서도 이러한 문화를 조성하고 있습니다.
이 주제에 관한 Farfetch 기반 프레젠테이션이 많이 있었지만, 외부에서 언급하기도 했습니다. 코어 웹 바이탈이 비즈니스에 미치는 영향에 관한 2021년 Google I/O 강연을 예로 들 수 있습니다. 또한 주제와의 관련성을 지속적으로 높이고 문화에 대한 팀의 전략을 확고히 하는 데에도 기여했습니다.
4단계: 측정항목 개선
결국 이러한 모든 작업은 Farfetch가 웹사이트 속도 측정항목을 객관적으로 개선하고, 팀이 동급 모범 사례를 따르고 개선 기회를 추구하도록 보장하는 데 기여하는 데 기여했습니다.
2021년에 발견된 주요 기회 중 하나는 Farfetch의 두 가지 기본 페이지 유형인 제품 페이지와 제품 등록정보 페이지에서 LCP를 개선해야 한다는 것이었습니다.
각 팀은 이러한 페이지의 주요 콘텐츠를 로드하는 방식을 해결했습니다. 이 같은 기회를 노리는 영향력을 보여준 비즈니스 사례를 통해 다음과 같은 성과를 거둘 수 있었습니다.
- JavaScript 기반 솔루션의 제품 이미지 로드 구성요소를 네이티브 구현에 맞게 조정합니다.
- 이미지의 우선순위를 정의하고 중요한 애셋과 중요하지 않은 애셋으로 나눕니다.
- 소스가 이미 HTML에 인라인이고
<link rel="preload">를 사용하여 최대한 빨리 다운로드되도록 중요한 이미지를 조기에 로드합니다. - Safari와 같이 지원되지 않는 브라우저에서 Intersection Observer를 사용하는 폴리필과 함께 중요하지 않은 이미지에
<img loading="lazy">속성을 사용하세요.
이를 통해 가설과 비즈니스에 미치는 영향을 A/B 테스트를 통해 입증할 수 있었습니다. 예를 들어 이러한 노력으로 제품 페이지에서 이러한 노력으로 600ms 이상이 단축되었고, A/B 테스트에서 회사가 정의한 신뢰 수준에 따라 전환율이 1~5% 상승하는 것으로 나타났습니다.
LCP 점수에 대한 Google의 정의에 따라 '좋음', '개선이 필요함', '느림'으로 간주되는 페이지 조회의 비율을 기준으로 팀에서 개선한 내용은 다음과 같습니다.
더 빠른 사이트 및 개선된 작업 관행의 이점
성능 및 비즈니스 사례 계산기와 같은 도구에 대한 문화를 조성한 덕분에 모두가 제품 관리자, 이해관계자, 엔지니어 모두가 이해할 수 있는 공통의 언어를 사용할 수 있게 되었습니다. 이에 따라 새로운 이니셔티브와 실적 향상의 우선순위를 정하는 방법에 대한 지속적인 논의가 촉발되었습니다.
Farfetch의 웹 채널 수석 제품 관리자인 Rui Santos는 "우리는 성능의 악순환에서 벗어나 기술에만 국한된 문제를 해결하고 싶었습니다."라고 말하며 다음과 같이 덧붙입니다. "성과 측정항목을 비즈니스 측정항목과 연결하는 것은 놀라울 정도로 효과적으로 메시지를 전달할 수 있었습니다. 비즈니스는 회사를 주도하고 있으며, 회사의 성공을 속도 측정 지표에 연결하면 더 많은 이해관계자가 균형 잡힌 결정을 이해하고 헤매기 위해 노력할 수 있었습니다."
고급 전자상거래 세그먼트의 경우 사이트 속도가 빠르거나 느린지에 따라 소비자가 브랜드와 서비스 품질을 전체적으로 보는 방식이 달라질 수 있습니다. 사용자에게 품질은 럭셔리함과 같습니다. 그리고 웹사이트의 실적을 비롯하여 사용자 경험의 모든 측면에 적용됩니다. 사이트 속도가 전환율에 영향을 미치는 것으로 입증됨에 따라 이제 Farfetch의 사전 계획에서 실적이 안전하게 중요한 위치를 차지하게 되었습니다.