게시일: 2025년 3월 19일
T-Mobile은 광범위한 네트워크 범위와 빠른 5G 연결을 제공하는 미국의 대표적인 통신사입니다.
T-Mobile은 실제 사용자의 웹 바이탈을 분석하여 Core Web Vitals를 개선하면 사용자 환경과 비즈니스 측정항목 모두에 상당한 영향을 미칠 수 있음을 확인했습니다.
T-Mobile은 디지털 가시성을 지속적으로 개선하기 위해 웹사이트의 Core Web Vitals(특히 Largest Contentful Paint(LCP))를 개선하여 사용자 환경을 개선하고 궁극적으로 핵심 비즈니스 측정항목을 개선했습니다.
데이터를 통한 웹 성능 인식 제고
웹 전반에서 우수한 사용자 환경을 보장해야 할 필요성이 점점 커짐에 따라 T-Mobile의 SEO팀과 제품팀은 웹사이트 실적 개선을 목표로 하는 공동 이니셔티브를 시작했습니다. 첫 번째 단계는 코어 웹 바이탈을 이해관계자와의 논의에서 최우선으로 다루고 이를 최우선 과제로 인식하도록 하는 것이었습니다. 이는 많은 회사의 개발팀에서 흔히 직면하는 어려움입니다.
이 문제를 해결하기 위해 T-Mobile은 데이터 기반 전략을 사용했습니다. Lighthouse의 실험실 데이터와 Chrome UX 보고서 (CrUX)의 데이터가 성능에 관한 일부만을 보여줄 수 있다는 점을 잘 알고 있는 T-Mobile은 웹-비탈스 JavaScript 라이브러리를 T-Mobile의 웹 속성에 통합하여 실제 사용자로부터 필드 데이터라고 하는 성능 데이터를 직접 캡처하고 분석했습니다.
T-Mobile은 현장의 Core Web Vitals 데이터를 애널리틱스 모음과 통합하여 다음과 같은 여러 가지 유용한 데이터 포인트를 얻었습니다.
- 사용자 환경 영향: 페이지 로드 시간이 길면 T-Mobile.com 방문자가 이탈할 가능성이 높습니다.
- 비즈니스 영향: 페이지 로드 시간이 길어지면 T-Mobile.com의 전환율이 감소합니다.
데이터를 통해 T-Mobile 웹사이트의 실적과 비즈니스 측정항목 간의 상관관계를 명확하게 파악할 수 있었습니다.
팀은 LCP의 100밀리초 세그먼트에서 발생하는 수익 영향을 추정하여 경영진의 관심을 끌고 웹사이트 실적을 개선하기 위한 횡단 기능 태스크포스를 시작했습니다. T-Mobile의 SEO 및 제품팀은 명확한 데이터를 제시하고 기회를 측정하여 Core Web Vitals 개선의 중요성을 효과적으로 전달했습니다.
최대 효과를 위해 웹 성능 개선 확장
성능 문제를 포괄적으로 해결하기 위해 T-Mobile팀은 확장성을 염두에 두고 일련의 기술 개선을 진행했습니다. 이러한 노력은 중요한 구성요소를 최적화하고 기술을 활용하여 디지털 플랫폼 전반에서 지속적인 성능 향상을 달성하는 데 중점을 두었습니다.
고객 경험 영향
사이트 성능을 개선하기 위한 노력으로 전반적인 최대 콘텐츠 렌더링 시간 (LCP)이 42% 감소했습니다.
이번 개선사항은 다음과 같은 여러 가지 긍정적인 사용자 환경 영향을 미쳤습니다.
비즈니스에 영향
페이지 로드 속도가 빨라지면서 구매 의도가 있는 잠재고객 방문의 전환율이 동기 대비 60% 개선되어 구매 흐름이 더욱 효율적으로 이루어졌습니다.
T-Mobile의 성장을 이끈 주요 실적 업그레이드
다음은 주요 이니셔티브와 각 이니셔티브의 영향에 관한 자세한 목록입니다.
API 캐싱 및 리팩터링
Products 및 Promotions API를 비롯한 API가 캐싱되고 리팩터링되어 응답 시간을 개선하고 서버 부하를 줄였습니다. 캐싱 최적화를 위해 콘텐츠 전송 네트워크 (CDN)로 오프로드한 것이 이러한 개선에 크게 기여했습니다.
정적 확장 소재 캐싱
JavaScript, 스타일 시트, 클라이언트 라이브러리 등 정적 애셋이 캐시되어 로드 시간이 단축되었습니다. CDN 캐싱과 최적화된 캐시 설정을 사용하면 전송 속도가 개선되고 서버 부하가 줄었습니다. 이 최적화는 전반적인 사이트 성능을 개선하는 데 중요한 역할을 했습니다.
이미지 구성요소 최적화
팀은 이미지 크기를 줄이고, WebP와 같은 최신 이미지 형식을 사용하고, 반응형 이미지를 구현하여 최소 파일 크기로 최고의 품질을 보장하도록 이미지 구성요소를 최적화했습니다.
구성요소 미리 로드 및 미리 가져오기
필요한 경우 즉시 사용할 수 있도록 중요한 리소스를 미리 로드하고 미리 가져와 사용자의 대기 시간을 줄이고 페이지 로드 시간을 개선했습니다.
중요한 도메인에 대한 사전 연결 및 플리커 방지 스크립트 개선
팀은 중요한 도메인에 사전 연결을 구현하여 조기에 연결을 설정하여 리소스 가져오기 지연 시간을 줄였습니다. 또한 콘텐츠 플래시를 최소화하고 더 원활한 사용자 환경을 제공하기 위해 플리커 방지 스크립트를 개선했습니다.
Adobe Experience Manager (AEM) 플랫폼 이전
팀은 성능 기능이 개선되고 인프라가 개선된 최신 버전의 프런트엔드 플랫폼으로 이전했습니다.
Angular 구성요소를 AEM 팩토리 구성요소로 이전
아키텍처를 간소화하고 성능과 유지보안성을 개선하기 위해 Angular 구성요소가 Adobe Experience Manager (AEM) 팩토리 구성요소로 이전되었습니다.
주요 방문 페이지 최적화
이미지 캐러셀 최적화, Adobe webSDK 사용, 동적 미디어의 캐시 시간 연장, 페이로드 압축, 이미지 디자인 업데이트 등 로드 시간과 사용자 환경을 개선하기 위한 개선사항이 포함되었습니다.
API의 오류 감소
팀은 여러 주요 전자상거래 페이지의 오류를 줄여 데이터 전송의 안정성을 높이고 사용자 상호작용을 개선했습니다.
데이터 민주화를 통해 웹 성능 문화 조성
T-Mobile은 웹 성능 우수성을 유지하기 위해 조직 전반에 몇 가지 주요 조치를 구현했습니다. 이러한 이니셔티브는 실적 데이터에 대한 액세스를 민주화하고, Google팀을 교육하고 참여를 유도하며, Core Web Vitals를 사전에 모니터링하고, 모든 코드 출시에 대해 실적 표준을 시행하기 위해 마련되었습니다. 다음 전략에서는 데이터에 액세스할 수 있도록 하고, 지속적인 학습을 장려하며, 강력한 거버넌스 관행을 수립하여 웹 성능 문화를 조성하는 방법을 간략히 설명합니다.
Core Web Vitals 데이터 민주화
T-Mobile은 강력한 Looker Studio 대시보드를 사용하여 조직의 모든 구성원이 성능 데이터에 액세스할 수 있도록 했습니다. 또한 포괄적인 웹 성능 위키를 통해 팀원들이 Core Web Vitals 보고서를 효과적으로 해석하고 활용할 수 있습니다.
실시간 코어 웹 바이탈 측정항목을 보여주는 T-Mobile의 Looker Studio 대시보드 왼쪽에서 오른쪽으로 다음을 보여줍니다.
- 속도계: 선택한 기간 동안 캡처된 모든 LCP 이벤트의 75번째 백분위수입니다.
- 선 그래프: 선택한 기간 동안 75번째 백분위수 점수의 일일 동향입니다.
- 원형 차트: 선택한 기간 동안 좋음, 개선 필요, 나쁨 평가의 비율입니다.
- 누적 선 그래프: 선택한 기간 동안 '좋음', '개선 필요', '나쁨' 평가의 비율 분포에 대한 일일 동향입니다.
지속적인 교육 및 참여
제품 및 SEO 관리자가 정기적으로 웹 성능 로드쇼와 지식 전달 세션을 주최합니다. 이러한 이니셔티브는 더 많은 팀원에게 교육하고 참여를 유도하여 웹 성능 우수성을 위한 지속적인 노력을 장려합니다.
Core Web Vitals 알림 시스템
다양한 페이지 그룹의 Core Web Vitals를 모니터링하는 알림 시스템이 설정되었습니다. 코어 웹 바이탈이 특정 기준점 임곗값에 도달하면 관련 이해관계자에게 이메일 알림이 자동으로 전송됩니다.
코드 출시의 성능 요구사항
T-Mobile은 코드 출시에 대한 성능 요구사항도 수립했습니다. 페이지를 출시하려면 Lighthouse에서 특정 성능 수준을 충족해야 하므로 높은 수준의 웹 성능이 유지됩니다.
T-Mobile은 이러한 조치를 구현하여 웹 성능을 최우선으로 하고 지속적인 개선 문화를 계속해서 조성할 수 있습니다.
감사의 말씀
T-Mobile의 웹사이트 성능 및 이 사례 연구에 참여한 Kevin Lau, Monique Misrahi, Bill Dinger, Laura Mathisen, Suresh Gundu, Duke Fong, Amir Mohammadi, Liang Yeh, Jennifer Panke, Julia Edgar, Ejaz Malik, Damon Jochum, Will Fraley, Gene McKenna, Vinayak Hegde, Warren McNeel님께 감사드립니다.
이 사례 연구는 T-Mobile과 Google의 고객 솔루션 파트너인 일리아 모타메디, 다코타 데디, 크리스틴 자네디스와 공동으로 작성되었습니다. 이들의 통계와 지원이 이 이니셔티브의 성공에 기여했습니다.