T-Mobile 以資料為依據的網頁效能改善方法，讓使用者網站問題減少 20%，購物車轉換成訂單的比率則提升 32%。

Lucas Miré
Lucas Miré
LinkedIn
David Lee
David Lee
LinkedIn
Tee Yeow
Tee Yeow
LinkedIn
Bill Dinger
Bill Dinger
LinkedIn

發布日期：2025 年 3 月 19 日

T-Mobile 是美國首屈一指的電信公司，提供廣大的網路涵蓋範圍和快速的 5G 連線服務。

T-Mobile 分析實際使用者的網站使用體驗核心指標後，發現改善網站使用體驗核心指標，可大幅提升使用者體驗和業務指標。

為了持續改善數位形象，T-Mobile 改善了網站的網站使用體驗核心指標，尤其是最大內容顯示時間 (LCP)，進而提升使用者體驗，並改善主要業務指標。

運用資料提高對網頁效能的認識

為滿足日益增加的網路使用者體驗需求，T-Mobile 的 SEO 和產品團隊展開了共同計畫，旨在改善網站成效。第一步是與利害關係人討論時，將網站體驗核心指標列為首要議題，確保這項指標獲得重視，這是許多公司開發團隊常見的難題。

為解決這個問題，T-Mobile 採用了資料導向策略。他們深知Lighthouse 的實驗室資料和Chrome 使用者體驗報告 (CrUX) 的資料只能提供部分效能敘述，因此將 web-vitals JavaScript 程式庫整合至 T-Mobile 的網站資源，直接擷取並分析來自實際使用者的效能資料 (稱為「現場資料」)。

T-Mobile 將實地資料與自家數據分析套件整合，進而取得多項有力的資料點，包括：

  • 對使用者體驗的影響：網頁載入速度越慢，T-Mobile.com 訪客跳出率就越高。
  • 對業務的影響：網頁載入時間愈長，T-Mobile.com 的轉換率就會愈低。
長條圖顯示，隨著 LCP 從 2 到 3 秒增加到 7 秒，轉換率下降，跳出率上升。
當 LCP 逐漸變慢至超過 2 秒時，對轉換和跳出率的影響。

資料清楚顯示 T-Mobile 網站成效與業務指標之間的關聯。

團隊估算出 LCP 的 100 毫秒區段對收益的影響，進而引起主管的注意，並啟動跨部門工作小組，以改善網站成效。T-Mobile 的 SEO 和產品團隊透過呈現明確的資料並評估商機，有效傳達改善 Core Web Vitals 的重要性。

擴大網站效能改善範圍，爭取最大成效

為全面解決效能問題，T-Mobile 團隊進行了一系列技術改善，並考量到擴充性。這些努力著重於改善關鍵元件，並善用技術，確保數位平台持續提升效能。

對客戶體驗的影響

改善網站效能的努力讓整體最大內容繪製 (LCP) 時間縮短了 42%：

折線圖：顯示 LCP 載入時間隨時間推移而縮短，整體減少 42%。
最大內容繪製時間縮短 42%

這項強化功能對使用者體驗帶來多項正面影響，包括：

折線圖：顯示整體網站申訴案件數隨時間下降，整體下降 20%。
使用者對網站的抱怨總數減少 20%。
折線圖：顯示網站載入速度緩慢的申訴案件數量隨時間下降，整體下降 34%。
網站載入速度緩慢的申訴案件減少 34%。

業務影響

網頁載入速度加快，購物流程也更有效率，有購物意圖的潛在訪客造訪轉換率相較於去年同期提升了 60%。

折線圖：顯示潛在客戶造訪轉單率隨時間增加，整體提升幅度達 60%。
有購物意圖的潛在客戶造訪次數，與訂單率相比提升了 60%。

推動 T-Mobile 前進的關鍵成效升級

以下是主要計畫和各自的影響詳情：

  • API 快取和重構

    我們快取並重構了 API (包括 Products API 和 Promotions API)，以縮短回應時間並降低伺服器負載。將工作卸載至內容傳遞聯播網 (CDN) 進行快取最佳化，是這項改善的關鍵因素。

  • 快取靜態素材資源

    靜態素材資源 (包括 JavaScript、樣式表和用戶端程式庫) 會快取，以縮短載入時間。使用 CDN 快取和最佳化快取設定，可提升提交速度並降低伺服器負載。這項最佳化功能對於提升整體網站效能至關重要。

  • 圖片元件最佳化

    團隊透過縮減圖片大小、使用 WebP 等新式圖片格式，以及導入回應式圖片，以確保在最小的檔案大小下，仍能維持最佳品質，來最佳化圖片元件。

  • 預先載入和預先擷取元件

    我們預先載入和預先擷取重要資源，確保在需要時能立即使用，進而縮短使用者的等待時間，並改善網頁載入時間。

  • 預先連線至重要網域和改善防閃爍指令碼

    團隊實作了至關鍵網域的預先連線功能，以便及早建立連線，縮短資源擷取的延遲時間。此外，他們也改善了防閃爍指令碼，盡可能減少內容閃爍情形，確保使用者體驗更流暢。

  • Adobe Experience Manager (AEM) 平台遷移

    團隊遷移至前端平台的新版本，可提供更優異的效能功能和改善基礎架構。

  • 將 Angular 元件遷移至 AEM 工廠元件

    我們將 Angular 元件遷移至 Adobe Experience Manager (AEM) 工廠元件，以簡化架構並提升效能和可維護性。

  • 主要到達網頁最佳化

    改善項目包括改善圖片輪轉介面、使用 Adobe webSDK、延長動態媒體的快取時間、壓縮酬載，以及更新圖片設計，以縮短載入時間並提升使用者體驗。

  • 減少 API 錯誤

    團隊減少了幾個主要電子商務網頁的錯誤，確保資料傳送更加可靠，並改善使用者互動。

透過資料民主化培養網站效能文化

為確保持續致力於提升網站效能，T-Mobile 在整個組織中實施了幾項重要措施。這些計畫旨在讓所有人都能存取成效資料、教育和吸引團隊成員、主動監控 Core Web Vitals，以及強制執行所有程式碼版本的成效標準。以下策略概述了他們如何透過提供資料存取權、鼓勵持續學習，以及建立完善的治理做法，培養網路效能文化。

  • 讓所有人都能使用 Core Web Vitals 資料

    T-Mobile 使用功能強大的 Looker Studio 資訊主頁，讓機構內所有成員都能存取成效資料。此外，我們也提供一篇完整的網站效能 Wiki，協助團隊成員有效解讀及運用 Core Web Vitals 報表。

    T-Mobile 的 Looker Studio 資訊主頁顯示，LCP 隨著時間推移而下降至 2.22 秒，且符合良好分數的網頁數量增加。
    T-Mobile 的 Looker Studio 資訊主頁，顯示即時 Core Web Vitals 指標。

    從左至右顯示：

    • 速率計：在所選日期範圍內，所有 LCP 事件的 75 百分位數。
    • 折線圖：所選日期範圍內第 75 個百分位分數的每日趨勢。
    • 圓餅圖：在所選日期範圍內，良好、需要改善和不良評分的百分比分佈情形。
    • 堆疊折線圖：在所選範圍內，按「良好」、「需要改善」和「不佳」評分分布的每日趨勢。

  • 持續宣導和參與

    產品和 SEO 經理會定期舉辦網站成效巡迴活動和知識傳授課程。這些計畫可讓更多團隊成員接受教育並參與其中，持續致力於提升網站成效。

  • Core Web Vitals 的警示系統

    我們已建立警示系統，用於監控各個網頁群組的 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 的客戶解決方案合作夥伴 Ilya Motamedi、Dakota Deady 和 Christine Zanedis 共同完成，他們的洞察和支援功不可沒，為這項計畫的成功奠定基礎。