T-Mobile 采用以数据为依据的 Web 性能改进方法，使用户网站问题减少了 20%，购物车转化率提高了 32%。

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

发布时间：2025 年 3 月 19 日

T-Mobile 是美国一家领先的电信公司，提供广泛的网络覆盖范围和快速的 5G 连接。

通过分析真实用户的 Web Vitals，T-Mobile 发现，提升 Core Web Vitals 的效果可以显著提升用户体验和业务指标。

为了不断优化其数字形象，T-Mobile 改进了其网站的 Core Web Vitals（尤其是 Largest Contentful Paint [LCP]），以提升用户体验，进而提升关键业务指标。

利用数据提高对网站性能的认知度

认识到确保在网络上提供出色的用户体验日益重要，T-Mobile 的 SEO 团队和产品团队发起了一项联合计划，旨在提升其网站的效果。第一步是将核心网页指标纳入与利益相关方讨论的首要议程，确保将其视为首要任务，这是许多公司开发团队常常面临的难题。

为了解决此问题，T-Mobile 转而采用了以数据为依据的策略。他们深知 Lighthouse 中的实验室数据和 Chrome 用户体验报告 (CrUX) 中的数据只能提供对性能数据的部分视图，因此将 web-vitals JavaScript 库纳入了 T-Mobile 的网站媒体资源，以便直接捕获和分析来自真实用户的性能数据（称为“实测数据”）。

通过将来自现场的 Core Web Vitals 数据与其分析套件集成，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 团队在考虑可扩展性的情况下，进行了一系列技术改进。这些工作重点是优化关键组件并利用相关技术，确保其数字平台的持续提升。

对客户体验的影响

通过采取措施来提升网站性能，总体 Largest Contentful Paint (LCP) 缩短了 42%：

折线图：显示 LCP 加载时间随时间推移而缩短，总体缩短了 42%。
Largest Contentful Paint 缩短了 42%

这项增强功能对用户体验产生了多种积极影响，包括：

一张折线图，显示网站投诉总数随时间推移而减少，总体下降了 20%。
用户网站投诉总量减少了 20%。
一张折线图，显示网站加载缓慢的投诉随着时间的推移而减少，总体减少了 34%。
网站加载缓慢的投诉减少了 34%。

业务影响

网页加载速度加快还有助于提高购买流程的效率，在同一时间段内，有购物意向的潜在客户的访问转化率提高了 60%。

一张折线图，显示潜在客户的访问到订单转化率随时间推移而不断提高，总体提高了 60%。
有购物意向的潜在客户光顾到下单率提高了 60%。

推动 T-Mobile 不断前进的关键效果提升

以下详细列出了主要计划及其各自的影响：

  • API 缓存和重构

    我们缓存了一些 API（包括商品和促销活动 API），并对其进行了重构，以缩短响应时间并减少服务器负载。将内容分流到内容分发网络 (CDN) 以进行缓存优化，对这些改进起到了重要作用。

  • 缓存静态素材资源

    静态资源（包括 JavaScript、样式表和客户端库）已缓存，以缩短加载时间。使用 CDN 缓存和优化的缓存设置提高了传送速度并减少了服务器负载。这项优化在提升整体网站性能方面发挥了关键作用。

  • 图片组件优化

    该团队通过缩减图片大小、使用 WebP 等新型图片格式以及实现响应式图片来优化图片组件，以确保在最小文件大小下获得最佳质量。

  • 预加载和预提取组件

    系统预加载和预提取了关键资源，以确保在需要时立即可用，从而缩短了用户的等待时间并缩短了网页加载时间。

  • 预连接到重要网域和防闪烁脚本改进

    该团队实现了对关键网域的预连接，以尽早建立连接，从而缩短资源提取延迟时间。此外，他们还改进了防闪烁脚本，以最大限度地减少内容闪烁，确保用户获得更流畅的体验。

  • Adobe Experience Manager (AEM) 平台迁移

    该团队迁移到了更高版本的前端平台，该平台提供了更好的性能功能和基础架构改进。

  • 将 Angular 组件迁移到 AEM 工厂组件

    Angular 组件已迁移到 Adobe Experience Manager (AEM) 工厂组件，以简化架构并提升性能和可维护性。

  • 着陆页关键优化

    改进包括优化图片轮播界面、使用 Adobe webSDK、延长动态媒体的缓存时间、压缩载荷以及更新图片设计，以缩短加载时间并提升用户体验。

  • 减少 API 错误

    该团队减少了几个关键电子商务网页的错误，确保了更可靠的数据传送和更出色的用户互动。

通过数据民主化培养 Web 性能文化

为了确保始终致力于提升网站性能，T-Mobile 在整个组织中实施了多项关键措施。这些计划旨在让所有人都能访问性能数据，为我们的团队提供培训并吸引他们参与，主动监控 Core Web Vitals，并强制执行所有代码版本的性能标准。以下策略概述了他们如何通过开放数据、培养持续学习的氛围以及建立健全的治理做法，培养 Web 性能文化。

  • 普及 Core Web Vitals 数据

    T-Mobile 使用强大的 Looker Studio 信息中心，让组织中的所有成员都可以访问效果数据。此外，我们还提供了一本全面的 Web 性能 Wiki，可指导团队成员有效解读和利用 Core Web Vitals 报告。

    T-Mobile 的 Looker Studio 信息中心，显示 LCP 随着时间的推移而下降至 2.22 秒，符合良好得分的网页数量有所增加。
    T-Mobile 的 Looker Studio 信息中心，显示实时核心 Web 指标。

    从左到右，分别显示：

    • 速度计：在所选日期范围内捕获的所有 LCP 事件的 75 百分位数。
    • 折线图：所选日期范围内第 75 个百分位得分的每日趋势。
    • 饼图：所选日期范围内“良好”“需要改进”和“欠佳”评分的百分比分布。
    • 堆叠线形图：所选范围内“良好”“需要改进”和“欠佳”评分的百分比分布每日趋势。

  • 持续宣传和互动

    产品和 SEO 经理会定期举办网站效果巡回活动和知识传授会议。这些计划旨在为更广泛的团队提供相关培训并吸引他们参与其中，从而培养他们对卓越网站性能的持续承诺。

  • Core Web Vitals 提醒系统

    我们已建立一套提醒系统，用于监控各种网页群组的 Core Web Vitals。当核心网页指标达到特定基准阈值时，系统会自动向相关利益相关方发送电子邮件提醒。

  • 代码版本的性能要求

    T-Mobile 还针对代码版本制定了性能要求。网页必须在 Lighthouse 中达到特定的性能水平，然后才能发布，以确保保持高标准的 Web 性能。

通过实施这些措施，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 共同撰写。他们的洞见和支持对该计划的成功起到了重要作用。